富文本编辑

引子

再次碰到须要使用富文本编辑的场景，发现了以前没有想到的一些点，在此整理一下。

• Origin
• My GitHub

参考点

在使用富文本插件的时候，在比较选择时，我的发现如下几个参考点：

• 文档说明，这个能够节约不少时间，不管是比较和使用时。
• 国际化，有的真没有国际化，连文档也没有说明。
• 实现列表、连接、标题等各类效果是否使用了原生的 HTML 标签，其样式跟自身系统样式重置是否有冲突，其它显示编辑后富文本的地方也要考虑。
• 字体的支持，加载额外的字体文件可能加大包的体积。
• 图片上传的处理，有的插件须要本身写。
• 视频插入的处理，有的插件只是插入一个连接，不一样的视频源可能效果会不同。
• 判空，富文本里面可能一开始有默认的标签，只是看不到，获取的时候也拿获得，但其实是没有输入内容。
• 初始化、内容改变、获取/失去焦点事件监听，嵌入其它框架时有用处。
• 扩展，这个分为自定义和覆盖原有功能两种形式，看实际需求。

关于字体方面，见 Font。

下面就是找到的一些免费开源的富文本插件比较。

插件

如下仅供参考。

Quill

文档上说，Quill 是一个为兼容性和可扩展性而构建的所见即所得的现代编辑器。

截至 2019.12.12， 仍然处于有人维护状态，结合上面的考虑点，有下面的一些我的体会。

好的方面：

• 有独立的包，大部分功能都不须要额外安装其它依赖。
• 实现的格式效果，有自身单独的处理，例如 ul 标签的样式。
• 支持部分视频网站分享连接插入。
• 扩展支持自定义和覆盖。
• 展现风格简约。

很差的方面：

• 文档说明感受不怎么好用。
• 没有国际化。
• 图片异步处理须要单独重写处理，没有提供相应的 API 。
• 工具栏和操做没有对应的提示信息。

Summernote

文档上说，Summernote 是一个超级简单的所见即所得的编辑器。

截至 2019.12.12， 仍然处于有人维护状态，结合上面的考虑点，有下面的一些我的体会。

好的方面：

• 文档比较完整好找。
• 事件和方法丰富，包含图片上传异步处理 API。
• 支持国际化。
• 工具栏和操做都会有提示信息，并且图片、表格伴有浮动操做工具。
• 支持部分视频网站分享连接插入。
• 扩展支持自定义。
• 展现风格简约。

很差的方面：

• 须要安装额外的依赖包 JQuery。
• 依赖 Bootstrap 的样式和部分组件，但不是必需，也有不依赖的版本，若是以为很差看，须要自行写额外样式调整。
• 编辑时的效果使用的是 HTML 标签原生的效果，例如 H 系列、ul、ol、table 。展现的地方须要重置样式。

UEditor

文档上说，UEditor 是所见即所得富文本 web 编辑器，具备轻量，可定制，注重用户体验等特色。

已无人维护了，在实际中使用过，主要功能仍是没有问题的，结合上面的考虑点，有下面的一些我的体会。

好的方面：

• 文档详细，由于开发人员也都是国人。
• 独立的包。
• 支持国际化。
• 实现的格式效果，部分有自身单独的重置处理。
• 功能很强大且丰富，通常富文本有的都有。
• 草稿本地存储。
• 扩展支持自定义。

很差的方面：

• 使用时初看像早期编辑器，一些交互的弹窗也很原始。
• 使用的功能越多，配置相对其它插件要复杂一些。

Slate

文档上说，Slate 是一个彻底可定制的富文本编辑框架。

截至 2019.12.12， 仍然处于有人维护状态，结合上面的考虑点，有下面的一些我的发现。

好的方面：

• 文档列出了内部实现的相关属性和方法，有中文版。
• 独立的包。
• 实现的格式效果，有自身单独的重置处理。
• 支持部分视频网站分享连接插入。
• 选择内容后支持浮动的操做工具。
• 有对应定制的 react 版本。
• 扩展支持自定义。

很差的方面：

• 无国际化。
• 偏重定制化，想要添加比较多的功能，须要花时间找对应包，看对应包文档。
• 工具栏的交互跟其它插件有些不同，要先选择内容再选择格式才有效。
• 提供的图片上传示例只支持图片源 URL 的方式。
• react 使用起来，看文档比较复杂。

参考资料

• 11 Best Rich-Text Editors
• Quill
• Summernote
• UEditor
• Slate