配置一个编辑器

从头开始设置一个完整的编辑器，仅使用核心库，需要相当多的代码。为了能够快速开始使用预配置的编辑器，我们提供了prosemirror-example-setup包，它为您创建了一组插件，配置为为给定的模式创建一个合格的编辑界面。在这个例子中，我们使用基本模式并通过列表进行扩展。

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"

// 将prosemirror-schema-list中的节点混合到基本模式中
// 创建一个支持列表的模式。
const mySchema = new Schema({
  nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
  marks: schema.spec.marks
})

window.view = new EditorView(document.querySelector("#editor"), {
  state: EditorState.create({
    doc: DOMParser.fromSchema(mySchema).parse(document.querySelector("#content")),
    plugins: exampleSetup({schema: mySchema})
  })
})

这就是它的样子：

这些插件是由示例设置创建的：

输入规则，即在输入特定模式时触发的输入宏。在这种情况下，它被设置为提供智能引号和一些类似Markdown的行为，例如在输入“> ”时启动引用块。
键映射与基本绑定以及常见标记和节点类型的自定义绑定，例如 mod-i 启用强调和 ctrl-shift-1 将当前文本块设为标题。
拖放光标和间隙光标插件。
撤销历史。
菜单栏（这是另一个更适合演示而非生产的模块），包含用于常见任务和模式元素的菜单项。

许多 ProseMirror 包都带有一个 CSS 文件（在 package.json 的 "style" 字段中链接）。您必须确保将这些文件加载到包含您编辑器的文档中。一些打包工具会帮助您完成此操作，但如果它们不这样做，您可以创建如下所示的 link 标签，或者确保这些文件被合并到您的打包 CSS 中。

<link rel=stylesheet href="path/prosemirror-view/style/prosemirror.css">
<link rel=stylesheet href="path/prosemirror-menu/style/menu.css">
<link rel=stylesheet href="path/prosemirror-example-setup/style/style.css">
<link rel=stylesheet href="path/prosemirror-gapcursor/style/gapcursor.css">

配置一个编辑器

你好，ProseMirror