最好用的 8 款 Vue 富文本编辑器测评与推荐

A kitten
蒋川
B 端数据开发,卡拉云联合创始人
最近更新 2022年10月25日

最好用的 8 款 Vue 3 富文本编辑器

富文本编辑器作为直接与用户交互的内容输入生产工具,对大家的项目来说非常重要。选不好,配置不好,直接影响产品质感和用户体验,所以说在选择编辑器方面花点时间是值得的。

我试用了市面上所有主流富文本编辑器,筛掉长期不更新,bug 明显,社区活跃度低,功能单一的编辑器,把最好、最有特点的 7 款编辑器挑出来,分享给大家。这些编辑器各有各的特点,有些功能多样,但整体很重,有些功能虽然少,但某一项功能优化的特别好。希望我的测评可以帮助你选到合适你需求的编辑器。

如果你不太懂前端或不想折腾前端,推荐你使用卡拉云,卡拉云只需简单拖拽,即可生成「富文本编辑器」,更棒的是卡拉云可以帮你快速搭建内置富文本编辑器的后台管理系统,详见本文。

本文测评的 8 款 Vue 富文本编辑器

  • TinyMCE - 富文本编辑器里的 Word ,功能想不到的丰富
  • tiptap - 多人在线实时协同编辑
  • 卡拉云 - 新一代低代码开发工具,无需任何前端技术,拖拽生成富文本编辑器等前端组件
  • CKEditor 5 - 开源免费可商用,行内编辑
  • Quill - 易扩展、轻量级二开、代码高亮好用
  • Froala - 插件丰富,UI友好,编辑器里的苹果
  • summernote - 恰到好处的轻,可直接粘贴图片
  • Trumbowyg - 超轻量,体积小巧,仅 8KB

1. TinyMCE - 富文本编辑器里的 Word ,功能想不到的丰富

TinyMCE

TinyMCE 是富文本编辑器领域的头部玩家之一,主流富文本编辑器,功能非常全,你需要的大多数功能它都支持。排出复杂又美观文章样式,代码高亮等都是基础功能。它甚至有点像在线版的 Word,可以在顶部的各种菜单中找到你要的功能。但它的优势也恰恰是它的劣势,如此之多的功能都放上来导致整个编辑器非常重,如果只是需要简单功能,上这么复杂的编辑器,大材小用。

TinyMCE 对 Vue.js 的集成和安装非常友好,支持 Vue3 和 TypeScript,文档写的也非常好。

2. tiptap - 多人在线实时协同编辑

tiptip

tiptap 最初是为 Vue2 开发的,现在已发展成为独立框架工具,对 Vue3、React、Svelte 集成友好。 它基于 Prosemirror 进行扩展开发,是一款无头(headerless)富文本编辑器,默认情况下,它没有任何 UI 样式,你完全可以自己来配置想要的 UI,不需要重写 class,也不需要 important 代码。

tiptap 功能非常强大,功能插件丰富。但它比其他编辑器更棒的地方在于多人在线实时编辑。类似于谷歌文档那种效果,所有使用者在同一个页面彼此能看到对方的光标位置和名字,大家同时在线协同编辑。整个协同体验流畅,如果你的应用场景需要多人实时协同编辑,选 tiptap 就对了。

3. 卡拉云 - 新一代低代码开发工具,无需任何前端技术,拖拽生成「富文本编辑器」等前端组件

kalacloud-rich

新一代低代码开发工具卡拉云 可以快速搭建后台管理系统,开箱即用、高灵活性、一键分享等特性备受开发者欢迎。卡拉云内置包括「富文本编辑器」在内的常用的前端组件,包括写起来极其复杂见真功夫的表格(table)、表单(form)、图表(charts)「富文本编辑器」等组件,你只需要在卡拉云里简单拖拽,即可直接生成使用。

卡拉云后台管理系统 拖拽生成前端组件,一行代码连接数据库及 API 快速生成后台管理系统。

更有丰富的细节优化都为大家考虑到了,比如表格排序、搜索/过滤、翻页;表单自动生成;图表折线、柱状、饼图生成;「富文本编辑器」上传图片、markdown 等谁用谁快乐的功能,卡拉云已经帮大家集成并测试好,无需再造轮子。

卡拉云可接数据库

卡拉云不仅支持市面上常见的数据库,而且还支持常用的 API 接入。直接调用数据库 CRUD,不用再写后端。

这是用卡拉云 10 分钟搭建的 SQL Admin 后台管理系统

卡拉云 SQL admin 后台管理系统

开发好的后台管理系统还可以分权限分享给同事使用: https://my.kalacloud.com/apps/28xquhhqw7/published

强烈推荐你试试卡拉云,帮你打开新世界的大门。1 周的工作量,现在最多 30 分钟就能完成。不用担心自己不会前端,点这里注册卡拉云,来试试 5 分钟搭一套属于你的后台管理系统吧。

4. CKEditor 5 - 开源免费可商用,行内编辑

CKEditor-5

CKEditor 5 是基于 Vue 的富文本编辑器组件,开源,可免费用于商业用途,官方下载量已经过千万。CKEditor 是编辑器前辈 FCkEditor 的基础上开发的全新版本。它的 UI 设计现代,支持行内编辑模式。免费付费功能分布合理,付费主要是小部件、实时协同和历史记录。CKEditor 5 有详细的文档,从入门到自定义编辑器,再到如何与不同框架集成,写的非常详细。

扩展阅读:《订单管理系统(OMS)搭建实战 - 低代码拖拽定制订单管理系统

5. Quill - 易扩展、轻量级二开、代码高亮好用

Quill

Quill 也是众多富文本编辑器中的佼佼者,它相对于其他编辑器更容易设置,有丰富便捷的 API,非常好的扩展性,轻量级可二开的编辑框,很适合特殊场景的定制开发。

Quill 的优缺点都非常突出,它的代码高亮功能突出好用,但却没有一些常规编辑器都有的标配功能,比如表格,如果你想找一款轻巧,不需要太多复杂功能,对代码编辑友好的编辑器,Quill 是不错的选择。

作为老牌富文本编辑器,Quill 还有一个比较大的开发者社区以及围绕 Quill 开发的插件和集成的生态系统。

富文本编辑器调试起来太费劲?

试试卡拉云,无需处理任何前端问题,仅需拖拽,即可生成后台系统,数天工作量降至 1 小时。

6. Froala - 插件丰富,UI友好,编辑器里的苹果

Froala

Froala 被喜欢它的用户称之为史上最牛富文本编辑器,干净的 UI 和简洁的设计,极其丰富的插件,可自定义配置,功能非常强大,API 和文档非常全面,开发者上手友好,支持非常多的前端框架 VueJS、ReactJS、Angular、Meteor、Ember。

7. summernote - 恰到好处的轻,可直接粘贴图片

summernote

summernote 是一款轻量级富文本编辑器,它的所有功能都在界面上了,如果这些功能你需要的场景恰巧够用,那么恭喜你了,你找到了轻便趁手的富文本编辑器。summernote 非常容易上手,体验轻快,甚至还支持快捷键操作。

值得一提的是它对图片的处理,summernote 直接把图片 base64 到内容字段,所有你不用处理图片。另外它支持直接复制粘贴图片到编辑器里,这一点非常趁手。

summernote 基于 jQuery 和 Bootstrap 构建,支持各类主流浏览器,有大量可定制开发的选项,

扩展阅读:《使用和风天气 API 10分钟搭建天气预报数据看板

8. Trumbowyg - 超轻量,体积小巧,仅 8KB

Trumbowyg

Trumbowyg 是一个超级轻量级可定制的 jQuery 富文本编辑器,可生成语义化代码,针对 HTML5 优化,对主流浏览器友好支持, API 功能强大。

Trumbowyg 功能非常简单,你看我上面实际安装后的测试截图就知道,没有太多复杂的功能。但它有个突出特点,就是小,压缩后仅有 8kb 大。对于某些应用场景需要网页加载速度快或针对网络状态不好的使用场景,这个特点非常非常重要。

9. 富文本编辑器总结

本文介绍了我自己用过的 7 款 Vue.js 富文本编辑器的特点,大家可以根据自己工作中的实际场景来对编辑器进行挑选。

如果你想搭建自己的后台工具,但你对前端并没有那么熟悉,可以考虑使用卡拉云卡拉云内置了富文本编辑器,你完全不用操心前端,只需要简单拖拽即可立即在页面上生成富文本编辑器。

kalacloud-rich

卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。数月的开发工作量,使用卡拉云后可缩减至数天,欢迎免费试用卡拉云

扩展阅读: