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

 本文首发：[最好用的 7 款 Vue 3 富文本编辑器 - 卡拉云](https://kalacloud.com/blog/vue-richtext-editor/) 富文本编辑器作为直接与用户交互的内容输入生产工具，对大家的项目来说非常重要。选不好，配置不好，直接影响产品质感和用户体验，所以说在选择编辑器方面花点时间是值得的。 我试用了市面上所有主流富文本编辑器，筛掉长期不更新，bug 明显，社区活跃度低，功能单一的编辑器，把最好、最有特点的 7 款编辑器挑出来，分享给大家。这些编辑器各有各的特点，有些功能多样，但整体很重，有些功能虽然少，但某一项功能优化的特别好。希望我的测评可以帮助你选到合适你需求的编辑器。 另外，如果你不太懂前度或觉得前端写起来太麻烦，推荐你试试[卡拉云](https://kalacloud.com/)，卡拉云仅需简单拖拽，即可生成「富文本编辑器」，更棒的是卡拉云可以帮你快速搭建内置编辑器的 Web 应用程序，详见本文文末。 **本文测评的 7 款 Vue 富文本编辑器** - TinyMCE - 富文本编辑器里的 Word ，功能想不到的丰富 - tiptap - 多人在线实时协同编辑 - CKEditor 5 - 开源免费可商用，行内编辑 - Quill - 易扩展、轻量级二开、代码高亮好用 - Froala - 插件丰富，UI友好，编辑器里的苹果 - summernote - 恰到好处的轻，可直接粘贴图片 - Trumbowyg - 超轻量，体积小巧，仅 8KB - 卡拉云 -内置富文本编辑器的低代码开发工具，无需部署，开箱即用 ## 一. TinyMCE - 富文本编辑器里的 Word ，功能想不到的丰富  [TinyMCE](https://www.tiny.cloud/) 是富文本编辑器领域的头部玩家之一，主流富文本编辑器，功能非常全，你需要的大多数功能它都支持。排出复杂又美观文章样式，代码高亮等都是基础功能。它甚至有点像在线版的 Word，可以在顶部的各种菜单中找到你要的功能。但它的优势也恰恰是它的劣势，如此之多的功能都放上来导致整个编辑器非常重，如果只是需要简单功能，上这么复杂的编辑器，大材小用。 TinyMCE 对 Vue.js 的集成和安装非常友好，支持 Vue3 和 TypeScript，文档写的也非常好。 ## 二. tiptap - 多人在线实时协同编辑  [tiptap](https://tiptap.dev/) 最初是为 Vue2 开发的，现在已发展成为独立框架工具，对 Vue3、React、Svelte 集成友好。 它基于 Prosemirror 进行扩展开发，是一款无头(headerless)富文本编辑器，默认情况下，它没有任何 UI 样式，你完全可以自己来配置想要的 UI，不需要重写 class，也不需要 important 代码。 tiptap 功能非常强大，功能插件丰富。但它比其他编辑器更棒的地方在于多人在线实时编辑。类似于谷歌文档那种效果，所有使用者在同一个页面彼此能看到对方的光标位置和名字，大家同时在线协同编辑。整个协同体验流畅，如果你的应用场景需要多人实时协同编辑，选 tiptap 就对了。 ## 三. CKEditor 5 - 开源免费可商用，行内编辑  [CKEditor 5](https://ckeditor.com/) 是基于 Vue 的富文本编辑器组件，开源，可免费用于商业用途，官方下载量已经过千万。CKEditor 是编辑器前辈 FCkEditor 的基础上开发的全新版本。它的 UI 设计现代，支持行内编辑模式。免费付费功能分布合理，付费主要是小部件、实时协同和历史记录。CKEditor 5 有详细的文档，从入门到自定义编辑器，再到如何与不同框架集成，写的非常详细。 扩展阅读：《[Axios 教程：Vue + Axios 安装及实战教程 - 手把手教你搭建加密币实时价格看板](https://kalacloud.com/blog/vue-axios-tutorial/)》 ## 四. Quill - 易扩展、轻量级二开、代码高亮好用  [Quill](https://quilljs.com/) 也是众多富文本编辑器中的佼佼者，它相对于其他编辑器更容易设置，有丰富便捷的 API，非常好的扩展性，轻量级可二开的编辑框，很适合特殊场景的定制开发。 Quill 的优缺点都非常突出，它的代码高亮功能突出好用，但却没有一些常规编辑器都有的标配功能，比如表格，如果你想找一款轻巧，不需要太多复杂功能，对代码编辑友好的编辑器，Quill 是不错的选择。 作为老牌富文本编辑器，Quill 还有一个比较大的开发者社区以及围绕 Quill 开发的插件和集成的生态系统。 ## 五. Froala - 插件丰富，UI友好，编辑器里的苹果  [Froala](https://froala.com/) 被喜欢它的用户称之为史上最牛富文本编辑器，干净的 UI 和简洁的设计，极其丰富的插件，可自定义配置，功能非常强大，API 和文档非常全面，开发者上手友好，支持非常多的前端框架 VueJS、ReactJS、Angular、Meteor、Ember。 ## 六. summernote - 恰到好处的轻，可直接粘贴图片  [summernote](https://summernote.org/) 是一款轻量级富文本编辑器，它的所有功能都在界面上了，如果这些功能你需要的场景恰巧够用，那么恭喜你了，你找到了轻便趁手的富文本编辑器。summernote 非常容易上手，体验轻快，甚至还支持快捷键操作。 值得一提的是它对图片的处理，summernote 直接把图片 base64 到内容字段，所有你不用处理图片。另外它支持直接复制粘贴图片到编辑器里，这一点非常趁手。 summernote 基于 jQuery 和 Bootstrap 构建，支持各类主流浏览器，有大量可定制开发的选项， 扩展阅读：《[Vue3 + Node.js 环境搭建，手把手教你搭建前后端分离的 Web APP](https://kalacloud.com/blog/vue-js-node-js-express-mysql-crud-example/)》 ## [](https://kalacloud.com/blog/vue-richtext-editor/#%E4%B8%83-trumbowyg---%E8%B6%85%E8%BD%BB%E9%87%8F%E4%BD%93%E7%A7%AF%E5%B0%8F%E5%B7%A7%E4%BB%85-8kb)七. Trumbowyg - 超轻量，体积小巧，仅 8KB  [Trumbowyg](https://alex-d.github.io/Trumbowyg/) 是一个超级轻量级可定制的 jQuery 富文本编辑器，可生成语义化代码，针对 HTML5 优化，对主流浏览器友好支持， API 功能强大。 Trumbowyg 功能非常简单，你看我上面实际安装后的测试截图就知道，没有太多复杂的功能。但它有个突出特点，就是小，压缩后仅有 8kb 大。对于某些应用场景需要网页加载速度快或针对网络状态不好的使用场景，这个特点非常非常重要。 ## 八. 富文本编辑器总结 本文介绍了我自己用过的 7 款 Vue.js 富文本编辑器的特点，大家可以根据自己工作中的实际场景来对编辑器进行挑选。 如果你想搭建自己的后台工具，但你对前端并没有那么熟悉，可以考虑使用[卡拉云](https://kalacloud.com/)，**卡拉云内置了富文本编辑器，你完全不用操心前端，只需要简单拖拽即可立即在页面上生成富文本编辑器。**  卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。**数月的开发工作量，使用卡拉云后可缩减至数天，欢迎免费[试用卡拉云](https://kalacloud.com/)。** ## 九. 本文作者 蒋川，卡拉云联合创始人，B 端数据开发。 如果你有任何问题，欢迎一起交流。我的微 HiJiangChuan 扩展阅读： - [最好的 5 款翻译 API 接口对比测评](https://kalacloud.com/blog/best-translation-api/) - [最好用的七大顶级 API 接口测试工具](https://kalacloud.com/blog/api-testing-tools/) - [最好用的 5 款 React 富文本编辑器](https://kalacloud.com/blog/top-5-rich-text-editors-for-react/) - [Postman 使用教程 - 手把手教你 API 接口测试](https://kalacloud.com/blog/postman-tutorial/) - [最好的 6 个免费天气 API 接口对比测评](https://kalacloud.com/blog/free-weather-api/) - [PAW 使用教程 - 手把手教你 API 接口测试](https://kalacloud.com/blog/paw-tutorial/)