Vue 3 富文本编辑器

富文本编辑器是前端开发中常见的一个功能，通常会集成一些编辑器组件，如 TinyMCE、CKEditor、Quill 等，但是这些组件都是基于 jQuery 的，而 Vue3 的组件都是基于 Vue3 的，所以本文将介绍 7 款基于 Vue3 的富文本编辑器。

TinyMCE

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

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

资源地址

• TinyMCE 官网
• TinyMCE Vue
• Vue3项目中集成最强的tinymce富文本编辑器 - 水车 - 博客园 (cnblogs.com)
• TinyMce富文本处理器 在Vue3 vue-vite中使用（小白避坑 必看）_vite tinymce-CSDN博客

CKEditor 5

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

资源地址

• CKEditor 5
• CKEditor 5 Vue
• VUE3 引入富文本插件 CKEditor5_ckeditor5 vue3-CSDN博客

Tiptap

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

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

资源地址

• Tiptap 官方文档
• tiptap 中文文档 - itxst.com
• Vue封装tiptap富文本组件，增加表格、图片、选中高亮 - 掘金 (juejin.cn)

wangEditor 5

wangEditor 内置了所有常见的富文本操作功能，能满足绝大部分使用需求。直接配置使用即可，无需再二次开发。

快速接入，配置简单，几行代码即可生成。集成了所有常见功能，无需二次开发。在 Vue React 也可以快速接入。

不依赖任何第三方框架，可用于 jQuery Vue React 等。wangEditor 提供了官方的 Vue React 组件。

资源地址

• wangEditor官网
• 50 行代码 Vue3 中使用 wangEditor 富文本编辑器 - 掘金 (juejin.cn)