配置一个编辑器

从头开始设置一个完整的编辑器，仅使用核心库，需要相当多的代码。为了能够快速开始使用预配置的编辑器，我们提供了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})
  })
})

这就是它的样子：

Insert
Type...
⬚

你好，ProseMirror

这是可编辑的文本。您可以聚焦并开始输入。

要应用样式，您可以选择一段文本并从菜单中操作其样式。基本模式支持强调、粗体文本、链接、代码字体和图像。

块级结构可以通过键绑定进行操作（试试 ctrl-shift-2 创建一个二级标题，或在空文本块中按回车退出父块），也可以通过菜单进行操作。

尝试使用菜单中的“列表”项将此段落包装在一个编号列表中。

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