ProseMirror 开发者工具包使用教程

最新推荐文章于 2025-04-05 09:46:25 发布

戴艺音

最新推荐文章于 2025-04-05 09:46:25 发布

阅读量410

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00074/article/details/139588861

版权

ProseMirror 开发者工具包使用教程

prosemirror-dev-toolkit Injectable developer tools for ProseMirror rich-text editors implemented in Svelte and TypeScript. 项目地址: https://gitcode.com/gh_mirrors/pr/prosemirror-dev-toolkit

1. 项目目录结构及介绍

prosemirror-dev-toolkit/
├── LICENSE
├── README.md
├── ROADMAP.md
├── inject.js
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── packages/
│   ├── eslintrc.json
│   ├── gitignore
│   ├── prettierignore
│   ├── prettierrc
│   └── ...
└── ...

目录结构介绍

LICENSE: 项目的开源许可证文件。
README.md: 项目的介绍和使用说明。
ROADMAP.md: 项目的发展路线图。
inject.js: 用于注入开发者工具的脚本文件。
package.json: 项目的依赖配置文件。
pnpm-lock.yaml: 锁定依赖版本的文件。
pnpm-workspace.yaml: 配置pnpm工作空间的文件。
packages/: 包含项目的主要代码和配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 inject.js，它用于将开发者工具注入到 ProseMirror 编辑器中。以下是 inject.js 的基本介绍：

// inject.js
// 该文件用于将开发者工具注入到 ProseMirror 编辑器中

// 导入必要的模块
import { applyDevTools } from 'prosemirror-dev-toolkit';
import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';
import { schema } from 'prosemirror-schema-basic';
import { exampleSetup } from 'prosemirror-example-setup';

// 创建编辑器视图
const view = new EditorView(document.querySelector('#editor') as HTMLElement, {
  state: EditorState.create({
    doc: schema.nodes.doc.createAndFill(),
    plugins: exampleSetup({ schema }),
  }),
});

// 应用开发者工具
applyDevTools(view);

启动文件介绍

导入模块: 导入了 prosemirror-dev-toolkit 和其他必要的 ProseMirror 模块。
创建编辑器视图: 使用 EditorView 创建一个 ProseMirror 编辑器实例。
应用开发者工具: 调用 applyDevTools 函数将开发者工具注入到编辑器中。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖和脚本配置。以下是部分关键配置：

{
  "name": "prosemirror-dev-toolkit",
  "version": "1.0.0",
  "scripts": {
    "start": "pnpm start",
    "test": "pnpm test"
  },
  "dependencies": {
    "prosemirror-dev-toolkit": "^1.0.0",
    "prosemirror-state": "^1.0.0",
    "prosemirror-view": "^1.0.0",
    "prosemirror-schema-basic": "^1.0.0",
    "prosemirror-example-setup": "^1.0.0"
  }
}