富文本选型太难了，谁来帮帮我！

高志小鹏鹏
9,308 阅读16分钟

前言

在管理平台中，富文本编辑器是信息输入和内容编辑的重要工具，几乎是必不可少的功能模块。它不仅能帮助用户轻松创建和格式化文档、邮件、模版等内容，还支持多样化的输入方式，提升了内容管理的便捷性和效率。

遇事不决扔个富文本，随心所欲不逾矩

富文本编辑器的实现虽然为用户提供了极大的便利，但其背后的技术复杂度也不容小觑。实现一个全面且高效的富文本编辑器，涉及到跨浏览器兼容性、复杂的格式化操作、多媒体支持等多个技术难题，往往需要花费大量的人力物力。即便如此，富文本编辑器也不可能满足所有用户的需求。不同的用户对功能有着各自的偏好.对于用户来说，选择富文本编辑器时，也需要在功能性与操作便捷性之间进行取舍，找到最适合自己需求的解决方案。

碰到说做一个和word相同功能的富文本的领导，直接上砖头

我认为选择富文本要考虑以下这些重要的功能：

  1. 页面简洁美观（不难看是前提，不要说功能好用 - 不好看的界面，我连用都不用）
  2. 支持从Word中复制、粘贴
  3. 格式化功能丰富，尽可能的支持各种文本和段落的样式
  4. 多媒体功能丰富，支持对图片大小、位置的处理
  5. 支持html代码与显示切换
  6. 支持并满足复杂的表格功能
  7. 插件拓展
  8. 多端兼容
  9. 编辑器不能基于某一种编程语言，迁移成本小
  10. 多语言支持（对于部分海外客户可能有需求）

你很难想象竟然有不会英文的客户，强烈要求我们更换富文本编辑器

富文本测评

Tinymce

Tinymce是一个老牌做富文本的公司，文档和插件配置的自由度都不错，也支持自定义拓展。功能强大，可以完全作为用户的首选

免费版如下图所示： image.png

评测一下Tinymce的优缺点：

优点:

  1. 老牌做富文本的公司，且不断保持更新和维护，值得信赖
  2. UI也做的蛮好看的（吐槽一下5.X好丑）
  3. 免费版功能强大，基本能满足日常需要（开源版本支持商用，nice）
  4. 功能强大：如导出，自定义插件，表格功能强大，文件上传，复制粘贴，数学方程等等
  5. 对非技术用户友好: 所见所得，拖动即可完成所有
  6. 支持多端，移动端友好
  7. 社区丰富，文档友好，集成简单
  8. 支持多种语言，阿拉伯这种程序员的噩梦也支持

缺点:

  1. 图片上传需要自定义
  2. 超链接不友好并且很丑
  3. UI不是很好看 - 我们领导吐槽好丑
  4. 复杂的word复制过去格式会变化，需要重新编辑
  5. 打开缓慢，需要开发者和使用者有相当的耐心

我司从5.X开始使用，目前已迭代到7.X（UI好看了好多）

不知道怎么选的情况下，选Tinymce肯定没错，当然也不能对Tinymce有太大要求，你会失望的

CKEditor

CKEditor也是一个老牌做富文本的公司， 5.0版本无论是功能还是UI做的相当不错，毫不夸张的说，这是我见过插件最丰富的富文本了

完整版如下图所示: image.png

评测一下CKEditor的优缺点：

优点：

  1. 老牌做富文本的公司，且不断保持更新和维护，值得信赖
  2. UI简洁美观
  3. 功能强大：100多个插件，如导出，自定义插件，表格功能强大，文件上传，复制粘贴，数学方程等等
  4. 对非技术用户友好: 所见所得，拖动即可完成所有
  5. 支持多主题配置
  6. 支持多端，移动端友好
  7. 支持多人协作
  8. 支持多种语言，阿拉伯这种程序员的噩梦也支持

缺点：

  1. 价格比较贵，免费版功能太少，可能不会满足日常使用
  2. API太多，文档对于国内不是很友好, 开发成本高
  3. V38.0.0起，免费版会显示“Powered by CKEditor”logo(这也是我司最后放弃使用CKEditor的原因之一)

最基础的免费版如下：

image.png

基于CKEditor的优缺点，推荐复杂文档编辑及格式化的业务使用

白嫖党不推荐，适合人民币玩家

Tiptap

Tiptap是一个模块化的编辑器, 官方解释是tipTap是一个无头编辑器，无头特征决定了完全自由。 自由扩展，自由定义。

它基于Prosemirror，完全可扩展且无渲染。可以轻松地将自定义外观、样式、位置等等

可以像这样:

image.png

也可以像这样：

image.png

灵活的API，不仅可以让你进行天马行空的布局，各种事件也可以让你用到飞起。作为一个后起之秀，迅速占领市场，赢得了大量客户的好评。真心推荐大家去使用一下！

下面评测一下Tiptap富文本

优点：

  1. 高度可定制的UX
  2. 功能强大，插件丰富
  3. 可快速搭建，集成简单
  4. 和element适配度高，使用element-ui不要太爽
  5. 支持多人协作

缺点:

  1. 自由度太高，配置较复杂，需要对API有一定的了解
  2. 不支持markdown

经查阅资料，tiptap插件支持markdown格式，感谢 李里_lexy 和 imber的指正

想要多人协作的，不要考虑了：用它，用它，用它！

Quill

我司最开始使用的一款富文本。配置简单，UI也还不错。中文文档丰富，一天的时间就可以集成到项目中。

image.png

评测一下Quill的优缺点

优点:

  1. UI还可以（虽说排版看起来有点乱）
  2. API和文档简单，一天的时间就可以集成到项目中
  3. 支持word的复制，粘贴操作（加分项）
  4. 持续更新，从发布到至今，已13年之久，不用担心不维护的问题

缺点：

  1. 对图片非常不友好，不支持图片拖拽
  2. 不支持表格
  3. 不支持html与界面的切换（在文档中统一替换很困难，需要技术人员配合）
  4. 在v-if中显示文本到编辑文本切换后，会无法输入文本，官方bug且没有被修复

全局改样式的时候，从控制台中取一下html代码，然后全局替换一下忍忍也就算了。随着图片上传后，文档排版越来越麻烦，真的不能忍了。只能宣布这个富文本的倒计时了！

适合对图片没有太多需求，并且对文档没有太大格式需求的公司

个人开发蛮推荐的

wangEditor

国产之光，个人能做成这个样子，我还是由衷的佩服的。

image.png

有兴趣的掘友们可以看下为什么都说富文本编辑器是天坑?。觉得自己还可以的掘友可以试着做做下面这两个小功能？

  1. 输入一个Hello， world！
  2. Hello加粗，llo斜体，world加粗，ld下划线
  3. 选中hello，取消选择，复制，粘贴，全选，删除
  4. 兼容主流浏览器
  5. 看一下标签至少符合规范(加粗斜体不能嵌套，p标签不能包块元素，是否有空标签...)

不要小看这个小功能，我敢打赌，95%的程序员至少一周的时间或者压根做不出来

赌一包辣条，立贴为证

好了，回到正题。我们评测一下wangEditor富文本

优点:

  1. 简单易用，可以快速集成
  2. 中文文档友好
  3. 支持图片和表格拖拽
  4. 社区友好，可以在github提交意见和反馈
  5. 多语言支持

缺点:

  1. 个人开源，相对专门做富文本的公司，相对配置型和丰富性不足
  2. 移动端不适配，Android下有严重bug，可能会影响使用
  3. 暂停维护了

首先向wangEditor开源作者双越老师表示敬意，因为开源想盈利太不容易了，基本都是为爱发电

不考虑移动端的，并且不介意暂停维护的可以使用

否则直接pass吧，用Jodit或者wangEditor-next替代吧

wangEditor-next

wangEditor-next的作者cycleccc在简介中这样写道：

wangeditor 因作者个人原因短期不再维护，wangEditor-next为fork版本,将在尽量不 Breaking change 的前提下继续维护。

此外，wangEditor-next也不再是个人单打独斗了，开始多人团队协作。最近几个月更新也很频繁，近3000次commit也能看出该团队的活跃度和持续产出，这种高频次的更新不仅反映了团队对用户反馈的响应速度，确保项目能够持续迭代并满足用户需求。

image.png

期待wangEditor-next能够在开源和盈利中找到平衡点，期待国人的产品能够获得广泛认可，为用户提供优质的体验。

Jodit

免费版功能如下: image.png

  1. 风格和wangEditor类似，但功能要比wangEditor强大的多。
  2. 项目持续维护中，不用担心跑路的问题
  3. 支持图片和表格拖拽
  4. 支持word复制和粘贴
  5. 支持打印
  6. 适配移动端，可预览
  7. 支持多语言

白嫖党的福音

大招:收费版来了

image.png

在原有的基础上又增加了以下实用的功能

  1. 支持文档翻译和谷歌地图
  2. 支持预览和导出pdf
  3. 支持自定义button
  4. 支持插入iframe
  5. 支持恢复功能（不是撤销，是真的回档）
  6. 支持查找和替换（很nice的功能）

一次性付费99$（一个项目），399$（无限项目）即可解锁，我觉得超值

相比于wangEditor，我更推荐Jodit。无论是免费版，还是付费版，都值得拥有和尝试

Editor.js

Editor也是一个模块化编辑器。与Tiptap有很多相似之处，如模块化设计，可拓展性等等。这里不详细展开了，主要说一下两个编辑器的不同点:

  1. Editor.js 默认生成 JSON 格式的数据，便于解析和存储。适合保存结构化的数据，如文档管理等等等。

    Tiptap 功能更强大，适合需要精细控制的富文本编辑器应用，尤其适合需要所见即所得体验的场景，如博客编辑器等等

  2. Tiptap的社区及文档更友好，非常适合 Vue 或 React 项目集成，更适合初次开发者

  3. Editor功能较少，可能不满足使用

  4. Editorbug比较多，虽然已经修复了好多，但建议还是慎选

Editor默认使用JSON格式的数据，更易于展示和分析，除非有强烈需求，否则慎选

Slate

引用一下原文:

Slate是一个 完全 可定制的富文本编辑器框架。

Slate 让你构建像 Medium, Dropbox Paper或者是 Google Docs(它们正成为web应用的标杆)这样丰富，直观的编辑器，而不会让你在代码实现上深陷复杂度的泥潭。

文档介绍的很酷，但目前是beta版本，且仍没有计划发布正式版。我没有用过，不做过多的评价，有兴趣的可以自己去体验一下

开源项目，没有大公司的支持，完全是自愿奉献。30k的star用户默默的支持，期待早日发布

很酷的架构设计，推荐大家去体验一下，期待Slate的早日发布

medium-editor

image.png

一款轻量级的编辑器，压缩后约为28KB, 除了工具栏可以显示在文本上方，支持内联编辑外，我没有找到其他的优点。4年没有更新, 插件拓展非常不友好。对不起这16K的star

如果你喜欢这种编辑方式，还可以体验一下。除此外，直接Pass

Squire

image.png

又是一款轻量级的编辑器，压缩完才11.5kb，相对于其它的富文本来说是非常的小了，推荐功能不复杂的场景使用

轻量级的编辑器，相较于medium-editor更符合用户习惯，推荐功能不复杂的场景使用

UEditor

image.png

看到上面这个图片，估计很多用户直接就断绝了使用的想法吧。确实，UI设计的真不好看，不符合当今的审美。可是在小10年前，用百度UEditor的比比皆是，只能说此一时彼一时。

我们评测一下UEditor富文本

优点:

  1. 发布之初，功能强大，但是放在现在，已经有点弱了
  2. 支持从word复制粘贴
  3. 中文文档友好

缺点:

  1. 无力吐槽的UI
  2. 官方已经不维护了，gg
  3. 不支持图片和表格拖拽
  4. ...

不吐槽了，直接用省略号吧。祭奠我的青春

久远的富文本，官方已经不维护了，不推荐使用

UEditor Plus

UEditor Plus 是基于 UEditor 二次开发的富文本编辑器

image.png

让人诟病的UI风格终于焕新了，还算在我的审美点上了，简单评测一下

优点：

  1. UI风格焕新还是蛮清新的(功能平铺还是感觉有点乱，太占空间了)
  2. 支持图片拖拽
  3. 表格功能强大（虽然有些功能我不太会用）
  4. 兼容现有UEditor

缺点：

  1. 作为开发者，很多功能都不会用，更别提普通用户了，估计一脸懵
  2. 为了功能而功能，忽视了用户体验
  3. 更新迭代比较慢，社区不友好，不是很关心用户的反馈

试用了1天，总给我不踏实的感觉，担心某一天又不维护了

编辑器的功能体验不是很好，有些功能是为了功能而功能，真心希望提升一下用户体验

Summernote

image.png

一款韩国人做的开源编辑器。基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项，乍一看，页面挺清新简洁的。但使用下来非常让人之气愤。用户提的bug和优化项目完全不理，格式化也是做的很差劲。搞不懂11k的star是怎么出来的

不推荐用。除非你喜欢用hook去擦屁股

lexical

image.png

Facebook出品的编辑器，大厂出品，值得信赖。

lexical是draft-js的升级版。由于draft-js只作维护，不做开发。整体功能已迁移到Lexical新框架。

github这样写道：

该项目目前处于维护模式。它不会收到任何功能更新，只会收到关键的安全漏洞补丁。2022 年 12 月 31 日，该仓库将完全归档。

对于寻找开源替代方案的用户，Meta 一直致力于迁移到一个名为Lexical的新框架。它仍处于实验阶段，我们正在努力添加迁移指南，但我们相信，它提供了一种更高效、更易于访问的替代方案。

样式见上图，很清爽，很漂亮。多而不乱，我蛮喜欢的。

功能上也很强大，图片拖拽、表格拖拽、导入导出，分享，还能进行涂鸦，绘图。还可以选中文本设置文本样式，同时还能对文本进行评论...功能上没得说，由于React是 Facebook的亲儿子，lexical也是基于React的编辑器 。虽然可以在vue上用，但官方支持主要集中在 React 上，因此在 Vue 中的集成需要额外处理一些兼容性问题。违背了我们选择不依赖框架语言的初衷。因此将lexical放在最后，不做过多的评价，也不会放在简评中。只是让我们多了解一下，尤其是React用户，可以作为备选方案

但要注意：Lexical 不支持 Internet Explorer 或旧版本的 Edge。需要兼容IE以及Edge浏览器的业务就不要选了

Facebook出品，可以作为React全家桶使用

简评

强烈推荐

Tinymce: 不知道怎么去选的时候，就用Tinymce！不求有功，但求无过

CKEditor: 文档格式化内容众多，追求使用效率，并且土豪公司或者人民币玩家就用它

Tiptap: 喜欢diy样式的，追求美观和别具一格的开发者首选

Jodit: 一次性付款，你值得拥有

比较推荐

Quill: 集成简单，小项目够用，大项目不推荐

wangEditor: 国人之光

wangEditor-next: wangEditor的升级版，持续迭代，持续为您服务

Editor: 存储，解析JSON数据的首选，其他慎选

Slate: 很棒的架构设计，期待早上发布

UEditor Plus: 基于 UEditor 二次开发的富文本编辑器，UI和功能都做了升级，初步体验还是蛮不错的，个人建议还是要慎用

不推荐

UEditor: 百度的烂尾项目，不够打了

Squire: 轻量级编辑器，格式文本还是可以的

Summernote: 韩国佬开发的项目，大爷级别的，反人类，还不搭理你

medium-editor 除了在文档上方显示，找不到其他的优点

总结

优秀的富文本编辑器不仅要页面美观，而且要格式化功能强大，使用方便快捷。非技术用户也能轻松排版、编辑、上传多媒体内容，从而提升管理平台的整体易用性和用户体验。因此，选择合适的富文本编辑器，不仅关系到内容生产的效率，更直接影响到平台的用户满意度和运营效果。

同时，我们也要认识到，不可能有一个编辑器能百分百满足我们的需求，理解开发富文本编辑器是一个巨难，且很难盈利的项目。只能尽可能的满足我们的痛点，在使用体验和需求功能上找到一个平衡点，权衡选择。

最后，祝开发找到适合自己公司的编辑器，早日脱坑

参考资料

  1. vue-element-admin作者-富文本
  2. 为什么都说富文本编辑器是天坑?
  3. 几大开源免费的JavaScript 富文本编辑器测评 - 玖涯博客
  4. 主流富文本编辑器对比-V2EX
avatar
文章
阅读
粉丝