(资料图片仅供参考)

初探富文本之编辑器引擎

在前文中我们介绍了富文本的基础概念，以及富文本的基本发展历程，那么在本文中将会介绍当前主流开源的富文本编辑器引擎。当前使用最广泛的富文本编辑器是L1的富文本编辑器，其能满足绝大部份使用场景，由此也诞生了非常多优秀的开源富文本引擎，这其中有仅提供引擎的编辑器例如Slate.js，也有提供了部分开箱即用的功能的例如Quill.js，也有基于这些引擎二次开发的例如Plate.js，本文主要介绍了Slate.js、Quill.js、Draft.js三款编辑器引擎。

Slate.js

slate是一个仅仅提供引擎的富文本core，简单来说他本身并不提供各种富文本编辑功能，所有的富文本功能都需要自己来通过其提供的API来实现，甚至他的插件机制也需要通过自己来拓展，所以使用slate来构建富文本编辑器的话可定制度相当高。slate的文档虽然不是特别详细，但是他的示例是非常丰富的，在文档中也提供了一个演练作为上手的基础，对于新手还是比较友好的。话说回来如果只提供一个引擎的话，谁也不知道应该怎么用哈哈。

在slate的文档中有对于框架的设计原则上的描述：

示例

这样一段文本的数据结构如下所示。

[  {    children: [      { text: "这样" },      { text: "一段文本", italic: true },      { text: "的" },      { text: "数据结构", bold: true },      { text: "如下所示。" },    ],  },];

优势

不足

参考

Quill.js

quill是一个现代富文本编辑器，具备良好的兼容性及强大的可扩展性，还提供了部分开箱即用的功能。quill是在2012年开源的，quill的出现给富文本编辑器带了很多新的东西，也是目前开源编辑器里面受众非常大的一款编辑器，至今为止的生态已经非常的丰富，可以在Github等找到大量的示例，包括比较完善的协同实例。

在quill的文档中有对于框架的设计原则上的描述：

示例

这样一段文本的数据结构如下所示。

{  ops: [    { insert: "这样" },    { insert: "一段文本", attributes: { italic: true } },    { insert: "的" },    { insert: "数据结构", attributes: { bold: true } },    { insert: "如下所示。\\n" },  ],};

优势

不足

参考

Draft.js

draft是用于在React中构建富文本编辑器的框架，其为创建和自定义文本编辑器提供了强大的API，并且旨在易于扩展和与其他库集成，与React结合可以使开发者在进行编辑器开发时既不用操作DOM、也不用单独学习一套构建UI的范式，而是可以直接编写React组件实现编辑器的UI。draft整体理念与React非常的吻合，例如使用状态管理保存数据结构、使用immutable.js库、数据结构的修改基本全部代理了浏览器的默认行为、通过状态管理的方式修改富文本数据等。

在draft的README中有对于框架的设计原则上的描述：

示例

这样一段文本的数据结构如下所示。

{  blocks: [    {      key: "3eesq",      text: "这样一段文本的数据结构如下所示。",      type: "unstyled",      depth: 0,      inlineStyleRanges: [        { offset: 2, length: 4, style: "ITALIC" },        { offset: 7, length: 4, style: "BOLD" },      ],      entityRanges: [],      data: {},    },  ],  entityMap: {},};

优势

不足

参考

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://github.com/hzjswlgbsj/bloghttps://zhuanlan.zhihu.com/p/425265438https://jkrsp.com/slate-js-vs-draft-js/https://www.zhihu.com/question/404836496https://www.zhihu.com/question/449541344https://juejin.cn/post/6844903838982340622https://juejin.cn/post/7034480408888770567https://juejin.cn/post/6974609015602937870https://github.com/cudr/slate-collaborativehttps://blog.logrocket.com/what-is-slate-js-replace-quill-draft-js/https://dev.to/charrondev/getting-to-know-quilljs---part-1-parchment-blots-and-lifecycle--3e76

推荐内容