概述
实际项目中，业务涉及到一些复杂的业务场景，往往会借助三方的开源工具或者使用商业成熟的解决方案，这个功能实现过程就涉及到了技术调研，然后写调用报告文档，正规的开发流程，其实这一环也是必不可少的，也会计算到个人的工时之中，当然如果公司没有形成规范，估计这一环都直接略过了，以下我用真实案例来给大家介绍下这个流程。
需求
某些业务场景，我们需要执行某个表达式后，然后再执行后面的逻辑，比如某个条件成立，需要改数据、发通知等等（比如：流程引擎），而这个表达式需要我们在线编写，根据计算操作符+字段这些组合而成，而字段是动态的，因此我们就需要用到富文本编辑器，并且能够定义扩展。
具体调研报告示例
规则编辑器调研
1.背景
开发应用的时候，通过设计器，仅仅搭建静态的界面和数据存储远远不能满足实际业务要求。应用需要能够响应用户的操作、根据特定条件动态变化、自动执行计算 、并确保数据的准确性和业务流程的顺畅。另一方面，这些动态行为和业务判断通常需要编写大量的代码来实现。面向业务人员，为简化这一过程，让不具备编程背景的用户也能定义和管理应用的动态行为。规则及逻辑处理 功能正是为了满足这些场景，前端需要提供规则表达式富文本编辑器， 以支撑应用的使用。 
2.富文本编辑器的地位
可以说富文本编辑器让 Web 数据录入充满了无限的想象空间，如果只有文本框 、下拉框 这些纯文本的数据录入组件，那么Web的数据录入能力将极大地受限。我们将无法在网页上插入图片 、视频 这些富文本内容，更无法插入自定义的内容。
富文本编辑器让 Web 内容编辑变得更轻松、更高效，我们几乎可以在富文本编辑器中插入任何你想插入的内容，图片 、视频 、超链接 、公式 、代码块 ，都不在话下，甚至还可以插入表格 、PPT 、思维导图 ，甚至3D模型这种超复杂的自定义内容。
富文本编辑器的场景在 Web 上也是随处可见，写文章 写评论 意见反馈 录需求单，都需要使用到富文本。
3.规则表达式编辑器核心能力分析
规则表达式编辑器的应具备如下核心能力：
- 基础能力：富文本基础能力，如文本插入、图片、视频等等资源
- 自定义节点支持：在基本上所有富文本都提供的文本、图片、视频、表格等能力之外，要能够进行富文本内容节点的扩展
- 交互的组件：对于自定义的富文本内容，要能够有交互，比如，我自定义了一个select组件丢到富文本里面，我是能够进行交互操作的
- 结构化数据输出：需要将编辑内容转换为可解析的AST（抽象语法树）或JSON，而不仅仅是HTML/Markdown
- 扩展性要求： 支持开发者自定义插件（或者类似插件机制），方便开发者更加容易扩展需求
4.调研范围
| 富文本名称 | 最新版本 | github地址 | 文档地址 |
|---|---|---|---|
| Quill | 2.0.3 | github.com/slab/quill | quilljs.com/docs/why-qu... |
| WangEditor | 5.1.23 | github.com/wangeditor-... | www.wangeditor.com/ |
| Tiptap | 2.24.1 | github.com/ueberdosis/... | tiptap.dev/ |
5. 富文本编辑器关键指标
| 指标 | 说明 |
|---|---|
| 功能完整性 | 是否支持表格、代码块、图片上传等 |
| 扩展性 | 是否支持自定义插件或模块化开发 |
| 性能 | 包体积、渲染速度、大文档优化 |
| 维护性 | 社区活跃度、文档质量、迁移成本、长期维护可能性 |
| 国际化 | 多语言支持 |
| 主题 | 是否提供主题或者能够方便定制 |
| 兼容性 | 基于主流浏览器兼容性排查 |
6.分项对比维度
6.1 GitHub Star 数量 & 社区活跃度
| 编辑器 | GitHub Stars | 最近更新时间 | Issues/PRs 活跃度 | 维护团队/公司 |
|---|---|---|---|---|
| Quill | ~45.6k | 8月前 | 较高（499k+ issues） | 开源社区 |
| WangEditor | ~18k | 3年前 | 断更（wangEditor-next团队续接） | 国内个人 |
| Tiptap | ~31.2k | 近期更新 | 活跃（官方维护） | Tiptap 团队 |
分析：
- Tiptap社区活跃，且持续迭代，适合长期项目
- Quill 优秀的start数表现突出，证明在其使用上得到了很多开发者的认可
- WangEditor 在国内生态中表现突出，文档和反馈更贴近中文用户，国产之光，但是最近几年没有更新过了（可能作者个人原因），现在已由wangEditor-next团队fork原仓库在原基础上继续维护
6.2. 开源协议 & 商用限制&文档
| 编辑器 | 开源协议 | 商用限制 | 付费功能 | 中文文档 |
|---|---|---|---|---|
| Quill | BSD-3 | 无 | 无 | 英文 |
| WangEditor | MIT | 无 | 无 | 优秀 |
| Tiptap | MIT | 无 | 有付费版本 | 英文 |
分析：
- WangEditor 、Tiptap 的 MIT 协议更宽松，Quill的BSD协议也能用（基本都能"为所欲为"）
- 总的来说WangEditor 的文档对于国内开发者来阅读起来很轻松，简单易懂
6.3. 包体积
| 编辑器 | 压缩后体积 (min+gzip) | 加载速度 | 模块化支持 | |
|---|---|---|---|---|
| Quill | ~120KB | 块 | ✅ | ⭐️⭐️⭐️⭐️⭐️ |
| WangEditor | ~260KB | 中等 | ✅ | ⭐️⭐️⭐️⭐️ |
| Tiptap | ~100KB | 快 | ✅ | ⭐️⭐️⭐️⭐️⭐️ |
分析：
- Quill 和 WangEditor 核心功能内置到了编辑器中，能够开箱即用
- Tiptap 基于 ProseMirror，核心轻量，核心扩展通过包的形式下载后引用注册使用，但扩展性强
6.4 . 功能 & 扩展性
| 编辑器 | 核心功能 | 插件生态 | 自定义难度 | |
|---|---|---|---|---|
| Quill | 基础 | 中等 | 中等 | ⭐️⭐️⭐️⭐️ |
| WangEditor | 常用 | 有限 | 低 | ⭐️⭐️⭐️⭐️ |
| Tiptap | 模块化 | 丰富 | 中等 | ⭐️⭐️⭐️⭐️ |
分析：
- WangEditor 开箱即用，好上手
- Tiptap 和Quill适合深度定制，但需额外开发（不局限使用者，更加高可定制化开发）
6.5 . 框架支持&typescript支持
| 编辑器 | Vue/React 支持 | typescript支持 | |
|---|---|---|---|
| Quill | ❌ | ✅ | ⭐️⭐️⭐️ |
| wangEditor | ✅ | ✅ | ⭐️⭐️⭐️⭐️⭐️ |
| Tiptap | ✅ | ✅ | ⭐️⭐️⭐️⭐️⭐️ |
分析：
- Tiptap 和Tiptap对现代主流框架支持最好，都提供了对应框架的封装组件可以直接使用
- Quill并没有提供相关框架组件的封装，需要自行处理
6.6. 浏览器情况
| 编辑器 | Chrome | Firefox | Safari | Edge | IE11及以下 | 核心兼容策略 |
|---|---|---|---|---|---|---|
| Quill | ✅ | ✅ | ✅ | ✅ | ❌ | 基于标准 API，IE11 需 Polyfill |
| WangEditor | ✅ | ✅ | ✅ | ✅ | ❌ | 官方明确放弃 IE11 支持 |
| Tiptap | ✅ | ✅ | ✅ | ✅ | ❌ | 基于 ProseMirror，需 ES2015+ |
基本上主流浏览器都是没问题的，对于退出市场的IE,基本上都不支持。
6.7. 国际化（i18n）支持
| 编辑器 | 内置语言包 | 多语言切换 |
|---|---|---|
| Quill | ❌ | 手动配置 |
| WangEditor | ✅ 中文/英文 | 需手动切换 |
| Tiptap | ❌自定义 |
关键结论：
- WangEditor 仅适合中文场景，Quil 需完全自主实现（如自定义菜单映射或者修改dom方式）
6.8. 主题
| 编辑器 | 官方主题数量 | CSS 变量支持 |
|---|---|---|
| Quill | 2种 | ❌ |
| CKEditor 5 | 5+ 种 | ✅ |
| WangEditor | 2 种 | ✅ |
| Tiptap | ❌无头编辑器，控制权在用户手里 |
关键结论：
- CKEditor 5 提供最完整的主题系统，支持动态切换。
- WangEditor 主和Quill 仅内置主题，其他主题类型需要自己定义
- Tiptap 高度灵活自主定义
6.9、性能指标
以加载一个相同富文本字符串1M的文本测试为例，如下为加载到最后渲染页面显示出来的时长对比：
ps:测试电脑配置（内存：24G,cpu:i5-8265u）
以下为自己开发电脑测试的指标，不同配置电脑，会有差距
| 编辑器 | 渲染1M数据时长 | 指标具体值 | 表现 |
|---|---|---|---|
| Quill | 普通富文本100KB:8squill专属Delta 格式1M:1分钟左右 |  |
⭐️⭐️⭐️ |
| WangEditor | 100KB左右: 耗时10S200KB: 耗时40S1M: 10分钟没渲染出来 |  |
⭐️ |
| Tiptap | 1M: 200ms50M: 2分钟极限预测能到几百MB |  |
⭐️⭐️⭐️⭐️⭐️ |
关键结论：
从渲染大量数据性能表现来看，tiptap表现最佳，面对大量数据，依然能够很快相应，quill性能稍逊色一抽，wangEditor表现最差，1M数据直接崩溃。。。
6.10 功能及其扩展能力
站在需求角度来说，其实普通富文本的功能都有，主要看的是自定义的扩展能力，规则编辑器最重要的就是能够扩展内容元素到编辑器中。
6.10.1 基础能力
编辑器默认只有基本的标题、列表、文字、图片、表格等元素，如果你想让编辑器渲染一个新元素，如附件、音频、视频，你就需要根据本节内容来定义。
- 加粗
- 段落
- 列表
- 图片
- 字体
- 字号
- ......
以下都以扩展一个自定义元素节点为例
示例：在文本中插入自定义的一段dom元素，包含文本，列表，element-plus组件等
6.10.2 扩展能力
Quill自定义扩展
扩展配置概念：
扩展流程：
WangEditor自定义扩展
官网扩展方式文档示例：tiptap.dev/docs/editor...
编辑器的输入和输出通常都是 HTML ，但其内部却有复杂的渲染机制，主要过程是：model -> 生成 vdom -> 渲染 DOM，如下图。
扩展配置概念：
扩展流程（摘自官网）：
Tiptap自定义扩展
tiptap内置渲染vue组件的能力，通过vue对应扩展插件可以更加方便实现扩展
官网扩展方式示例：tiptap.dev/docs/editor...
扩展配置概念：
扩展流程：
关键结论：
从上面实现同样的扩展到页面上的操作来说，wangEditor的操作更加繁琐，编写自定义的插件相比来说，更加复杂麻烦一些，并且插入的自定义元素，使用起来也有bug(自测)，问题估计只有看源码才能定位，官网的只有比较笼统的介绍，估计有坑。。。，
扩展定义上手难度：WangEditor>Quill>TipTap
6.11 支持数据格式
| 特性 | WangEditor | Quill | TipTap |
|---|---|---|---|
| 默认数据格式 | HTML字符串 | Delta对象 | JSON (ProseMirror文档结构) |
| HTML支持 | ✅原生支持，直接输出HTML | ✅需要转换，有HTML解析器 | ✅ |
| JSON支持 | ❌需要额外处理 | ❌需要转换 | ✅ |
| Markdown支持 | ❌需要插件 | ❌需要插件 | ✅ |
| Delta格式 | ❌ | ✅原生支持 | ❌ |
6.11.1 WangEditor数据格式特点
核心特点
- 基于HTML字符串
- 简单直接，适合传统Web开发
- 数据体积相对较大
示例数据
json
<p>这是一段<strong>加粗</strong>文本</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>优缺点
- ✅ 优点：简单直观，与后端存储兼容性好
- ❌ 缺点：难以精确追踪变化，处理复杂内容时可能产生冗余HTML
6.11.2 Quill数据格式特点
核心特点
- 基于Delta操作序列
- 数据体积较小
示例数据
json
{
"ops": [
{ "insert": "这是一段" },
{ "insert": "加粗", "attributes": { "bold": true } },
{ "insert": "文本\n" },
{ "insert": "列表项1\n", "attributes": { "list": "bullet" } },
{ "insert": "列表项2\n", "attributes": { "list": "bullet" } }
]
}优缺点
- ✅ 优点：精确记录所有操作, 数据体积较小
- ❌ 缺点：需要转换才能得到HTML
6.11.3 TipTap数据格式特点
核心特点
- 基于ProseMirror的JSON文档结构
- 结构化程度高，扩展性强
- 数据体积中等
示例数据
json
{
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{ "type": "text", "text": "这是一段" },
{ "type": "text", "text": "加粗", "marks": [{ "type": "bold" }] },
{ "type": "text", "text": "文本" }
]
},
{
"type": "bulletList",
"content": [
{ "type": "listItem", "content": [{ "type": "paragraph", "content": [{ "type": "text", "text": "列表项1" }] }] },
{ "type": "listItem", "content": [{ "type": "paragraph", "content": [{ "type": "text", "text": "列表项2" }] }] }
]
}
]
}优缺点
- ✅ 优点：结构清晰，扩展性强，支持复杂文档结构
- ❌ 缺点：数据结构复杂，需要学习ProseMirror模型
关键结论：
数据格式来说，TipTap支持的数据格式比较多，对于需要结构化的数据处理来说，操作起来更加遍历，Quill的Delta对象也不错，默认的数据结构，wangeditor仅支持html字符串，如果要转化数据结构需要自行处理，比较麻烦
7.总结
通过对比上述五款常见的富文本编辑器，其实各有各的适用场景和优缺点吧，核心其实都提供了扩展 和插件 口子，运行开发者基于对应的规范定制化开发，对于要做的规则表达式来说，数据量并不会很大，上面对比的三款开源插件，都能胜任，不存在超大数据量的性能问题，但是便于后续基于扩展后的编辑器内容做二次转化，显然WangEditor 能力还是不够，quil 和tiptap都提供了对应序列化数据能力，结构化程度高，扩展性更强，便于后期数据处理。
故：最终采用的候选编辑器插件Quill 或 tiptap