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

作者：蒋川

2022 年 1 月 22 日
本文字数：2529 字
阅读完需：约 8 分钟

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

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

另外，如果你不太懂前度或觉得前端写起来太麻烦，推荐你试试卡拉云，卡拉云仅需简单拖拽，即可生成「富文本编辑器」，更棒的是卡拉云可以帮你快速搭建内置编辑器的 Web 应用程序，详见本文文末。

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

TinyMCE - 富文本编辑器里的 Word ，功能想不到的丰富
tiptap - 多人在线实时协同编辑
CKEditor 5 - 开源免费可商用，行内编辑
Quill - 易扩展、轻量级二开、代码高亮好用
Froala - 插件丰富，UI 友好，编辑器里的苹果
summernote - 恰到好处的轻，可直接粘贴图片
Trumbowyg - 超轻量，体积小巧，仅 8KB
卡拉云 -内置富文本编辑器的低代码开发工具，无需部署，开箱即用

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

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

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

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

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

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

三. CKEditor 5 - 开源免费可商用，行内编辑

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

扩展阅读：《Axios 教程：Vue + Axios 安装及实战教程 - 手把手教你搭建加密币实时价格看板》