Rich Text Editor

[XXHolic]

目录

• 引子
• 参考点
• 插件
• 参考资料

引子

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

参考点

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

• 文档说明，这个可以节约很多时间，无论是比较和使用时。
• 国际化，有的真没有国际化，连文档也没有说明。
• 实现列表、链接、标题等各种效果是否使用了原生的 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 使用起来，看文档比较复杂。

Back to top ⬆️

参考资料

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

🗑️

以下内容与本文无关。

最近才知道涂鸦艺术家班克斯(Banksy)的画作《气球女孩》，在拍卖成交的那一刻，这个画自动下滑，变成了一条一条的纸片，原来这个画框装设了碎纸装置，而且是他自己装上去的。

这件作品曾被评为2017年英国最受欢迎的艺术作品。