Skip to main content

ProseMirror

  • prosemirror
    • low-level rte toolkit
  • 特性
    • 结构化的模型树
    • 模型不可变
    • 支持协作编辑
    • 模型受 schema 限制 - 实现自定义
      • 解析自动化 - 但可能丢弃 schema 之外信息
    • 模型状态变化类似于 redux
    • 整体概念类似于 react+redux
    • 状态 UI 独立
  • Reference manual
tip
  • 单纯学习 ProseMirror 的设计也非常有意义
# 核心模块
npm add prosemirror-{state,view,model,schema-basic,schema-list}
npm add --dev @types/prosemirror-{state,view,model,schema-basic,schema-list}
# 扩展模块
npm add prosemirror-{keymap,history,commands,dropcursor,gapcursor,menu,inputrules}
npm add --dev @types/prosemirror-{keymap,history,commands,dropcursor,gapcursor,menu,inputrules}
import { schema } from 'prosemirror-schema-basic';
import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';
import { DOMParser } from 'prosemirror-model';

import { baseKeymap } from 'prosemirror-commands';
import { undo, redo, history } from 'prosemirror-history';
import { keymap } from 'prosemirror-keymap';

let content = document.getElementById('content');
let state = EditorState.create({
// 初始状态
doc: DOMParser.fromSchema(schema).parse(content),
schema,
plugins: [history(), keymap({ 'Mod-z': undo, 'Mod-y': redo }), keymap(baseKeymap)],
});
let view = new EditorView(document.body, { state });

// 基于 schema 可直接构建 doc
let doc = schema.node('doc', null, [
schema.node('paragraph', null, [schema.text('One.')]),
schema.node('horizontal_rule'),
schema.node('paragraph', null, [schema.text('Two!')]),
]);

// Schema 包含 nodes, marks
new Schema({
nodes: {
doc: { content: 'block+' },
paragraph: {
group: 'block',
content: 'text*',
marks: '_',

toDOM(node) {
return ['p', 0];
},
},
heading: { group: 'block', content: 'text*', marks: '', attrs: { level: { default: 1 } } },
text: { inline: true },
},
marks: {
strong: {},
em: {
parseDOM: [
{ tag: 'em' }, // Match <em> nodes
{ tag: 'i' }, // and <i> nodes
{ style: 'font-style=italic' }, // and inline 'font-style: italic'
],
},
},
});
  • content 语法 - 类似于 PEG 语法、RegExp 语法
    • paragraph
    • paragraph+
    • paragraph*
    • paragraph{2},paragraph{2,},paragraph{2,3}
    • heading paragraph+
    • (paragraph | blockquote)+
  • marks
    • _ 表示任意
  • group 定义类型组合
  • Plugin
    • props
      • decorations
    • state
  • EditorView - typing, clicking, copying, pasting, dragging