富文本选型太难了,谁来帮帮我!

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 让你构建像 MediumDropbox 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出品的编辑器,大厂出品,值得信赖。

lexicaldraft-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