ProseMirror示例设置项目教程

最新推荐文章于 2024-08-20 09:49:35 发布

孙樱晶Red

最新推荐文章于 2024-08-20 09:49:35 发布

阅读量196

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00345/article/details/141347041

版权

ProseMirror示例设置项目教程

prosemirror-example-setupAn example of how to set up a ProseMirror editor项目地址:https://gitcode.com/gh_mirrors/pr/prosemirror-example-setup

1. 项目的目录结构及介绍

ProseMirror示例设置项目的目录结构如下：

prosemirror-example-setup/
├── src/
│   ├── index.js
│   └── style.css
├── .gitignore
├── .npmignore
├── .npmrc
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
└── package.json

目录介绍

src/: 包含项目的主要源代码文件。
- index.js: 项目的入口文件，负责初始化和配置编辑器。
- style.css: 项目的样式文件，定义编辑器的外观。
.gitignore: 指定Git版本控制系统忽略的文件和目录。
.npmignore: 指定npm发布时忽略的文件和目录。
.npmrc: npm配置文件。
CHANGELOG.md: 记录项目版本变更和更新日志。
CONTRIBUTING.md: 指导开发者如何为项目贡献代码。
LICENSE: 项目的开源许可证文件。
README.md: 项目的主文档，包含项目介绍、安装和使用说明。
package.json: 项目的配置文件，包含项目的依赖、脚本和其他元数据。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js，它负责初始化和配置ProseMirror编辑器。以下是该文件的主要内容和功能：

import {EditorState} from "prosemirror-state";
import {EditorView} from "prosemirror-view";
import {Schema, DOMParser} from "prosemirror-model";
import {schema} from "prosemirror-schema-basic";
import {addListNodes} from "prosemirror-schema-list";
import {exampleSetup} from "prosemirror-example-setup";

// 扩展基本模式以包含列表节点
const mySchema = new Schema({
  nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
  marks: schema.spec.marks
});

// 创建编辑器状态
let state = EditorState.create({
  schema: mySchema,
  plugins: exampleSetup({schema: mySchema})
});

// 创建编辑器视图
let view = new EditorView(document.body, {
  state: state
});

功能介绍

导入必要的ProseMirror模块。
扩展基本模式以包含列表节点。
创建编辑器状态，包含模式和插件。
创建编辑器视图，并将其附加到文档的<body>元素。

3. 项目的配置文件介绍

项目的配置文件是 package.json，它包含了项目的依赖、脚本和其他元数据。以下是该文件的主要内容和功能：

{
  "name": "prosemirror-example-setup",
  "version": "1.2.3",
  "description": "An example for how to set up a ProseMirror editor",
  "type": "module",
  "main": "dist/index.cjs",
  "module": "dist/index.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs"
    },
    "./style/style.css": "./style/style.css"
  },
  "sideEffects": ["./style/style.css"],
  "style": "style/style.css",
  "license": "MIT",
  "maintainers": [
    {
      "name": "Marijn Haverbeke",
      "email": "marijn@haverbeke.berlin",
      "web": "http://marijnhaverbeke.nl"
    }
  ],
  "repository": {
    "type": "git",
    "url": "git://github.com/prosemirror/prosemirror-example-setup.git"
  },
  "dependencies": {
    "prosemirror-inputrules": "^1.0.0"
  }
}

功能介绍

name: 项目的名称。
`

prosemirror-example-setupAn example of how to set up a ProseMirror editor项目地址:https://gitcode.com/gh_mirrors/pr/prosemirror-example-setup

孙樱晶Red

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
ProseMirror示例设置项目教程

ProseMirror示例设置项目教程 prosemirror-example-setupAn example of how to set up a ProseMirror editor项目地址:https://gitcode.com/gh_mirrors/pr/prosemirror-example-setup 1. 项目的目录结构及介绍ProseMirror示例设置项目的目录结构如下：p...
复制链接

扫一扫