富文本编辑
目录
引子
再次碰到需要使用富文本编辑的场景，发现了之前没有想到的一些点，在此整理一下。
参考点
在使用富文本插件的时候，在比较选择时，个人发现以下几个参考点：
- 文档说明，这个可以节约很多时间，无论是比较和使用时。
- 国际化，有的真没有国际化，连文档也没有说明。
- 实现列表、链接、标题等各种效果是否使用了原生的 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 使用起来，看文档比较复杂。
