搭建一个编辑器

只用核心库「从零开始」搭建一个完整的编辑器，需要相当多的代码。为了能快速上手一个预配置好的编辑器，我们提供了 prosemirror-example-setup 包，它会为你创建一组插件，针对给定的 schema 配置出一个可用的编辑界面。在本示例中，我们使用基础 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"

// Mix the nodes from prosemirror-schema-list into the basic schema to
// create a schema with list support.
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, which are input macros that fire when certain patterns are typed. In this case, it is set up to provide things like smart quotes and some Markdown-like behavior, such as starting a blockquote when you type “> ”.
Keymaps with the base bindings and custom bindings for common mark and node types, such as mod-i to enable emphasis and ctrl-shift-1 to make the current textblock a heading.
The drop cursor and gap cursor plugins.
The undo history.
A menu bar (which is another module that is meant more for demos than for production), with menu items for common tasks and schema elements.

许多 ProseMirror 包都带有一个 CSS 文件（在 package.json 的 "style" 字段中声明）。你必须确保把这些文件加载到包含编辑器的文档里。有些打包工具会帮你处理这件事，但如果它们不处理，你就要像下面这样创建 link 标签，或者确保这些文件被合并进你打包后的 CSS 中。

Many ProseMirror packages come with a CSS file (linked under the "style" field in package.json). You must make sure to load these into the document that contains your editor. Some bundlers will help you with this, but if they don't, either create link tags like below, or make sure these files get concatenated into your bundled 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">

搭建一个编辑器

Setting up an editor

Hello ProseMirror