配置一个编辑器

只使用核心库来从零配置一个编辑器的话需要很多的代码。为了能够用一个预先配置好的编辑器快速开始，我们提供了 prosemirror-example-setup 包，它已经为你创建好了一系列的插件、基础设置，以及一个可配置的 schema。在这个示例中，我们使用 basic schema 以及使用 lists 来扩展该 schema。

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 和基本 schema 放在一起形成一个支持 list 的 schema
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})
  })
})

上面代码的运行效果是这个样子：

下面这些插件由上述的 example-setup 库所创建：

Input rules，它是一个 宏，以当有匹配到的输入的时候执行。在这个示例中，它提供了类似智能引号（自动配对引号）以及一些类 markdown 的编辑行为，比如如果想新建输入一个 blockquote 可以输入「>」。
Keymaps 加上 base bindings 和自定义的键盘绑定以生成常用的样式和节点，如 mod+i 可以设置斜体，ctrl—shift—1 则将当前文本块转换成一级标题。
drop cursor 和 gap cursor 插件。
撤销历史
一个菜单栏（该模块更多的是 demo 性质而不是在生产环境使用），有一些常用的菜单操作。

配置一个编辑器

你好，ProseMirror