ProseMirror实现文本编辑

最近搞各种编辑器，也涉及到了富文本编辑器，prosemirror是当前非常流行的富文本编辑器，因此希望通过剖析其实现原理，来窥探编辑器的架构设计。

背景

prosemirror 的官网提供了很多的 example ,最基础的 demo 可以参见这里。

虽然前端研发都知道富文本是基于 html 和 css 来渲染的，但是如何可视化的修改这些 html 以及 css 确实富文本编辑器需要解决的问题。

浏览器提供了 contenteditable 使得元素可以编辑，以及 document.execCommand 让 js 具备能力去改变元素。但直接用这两个能力去做富文本编辑器是很坑的，具体可以参考这篇文章。

所以一般富文本编辑器都采用如下的架构。

prosemirror 也不例外，所以在剖析代码之前，先整体看一下 prosemirror 的代码组织结构。

代码结构

prosemirror 核心有四个模块。

• prosemirror-model：定义编辑器的文档模型，用来描述编辑器内容的数据结构。

• prosemirror-state：描述编辑器整体状态，包括文档数据、选择等。

• prosemirror-view：UI组件，用于将编辑器状态展现为可编辑的元素，处理用户交互。