配置一个编辑器

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

这就是它的样子：

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