聊聊 Tiptap，一款为开发富文本编辑器为生的框架
Tiptap —— The headless editor framework for web artisans.
什么是 Tiptap
在介绍 Tiptap 前，首先要介绍一下 ProseMirror，它是一款可定制性及极强的「所见即所得」富文本编辑器框架，文档的可编辑性基于 contentEditable 属性，支持协同，作者是 @marijnh，他也是 CodeMirror 编辑器的开发者。
国外一些比较著名的大厂如 Atlassian 和 纽约时报 都在使用 ProseMirror。但它本身并不像其他编辑器一样开箱即用，需要一系列的模块进行配合搭建，而且涉及到一些内部抽象概念，API 复杂且多，官方文档全英文，所以上手成本比较高。 而 Tiptap 则是对 ProseMirror 的 headerless 包装，将必要的一些模块组装、MVVM 框架接入等部分黑盒在了框架内部，在不丧失其原有可定制扩展性的同时，暴露一些更简单更少的 API ，让开发者更容易上手。
什么是 headerless
Tiptap 是一款无头编辑器，它没有提供任何 UI 样式，你完全可以自由地构建任何你想要的 UI。不需要重写任何 class，不需要 !important 或其他 hack 代码。
Tiptap 的前世今生
Tiptap 在 2019 年被 @Philipp Kühn 创建，当时他在找一个 Vue2.js 的编辑器，但是找了很久都没有一个真正解决他需求的方案，当时 React 已经有了模块化支持不错的 Slate.js。这时他偶然发现了很多国外大厂都在使用的 ProseMirror，于是决定自己撸起袖子上，在它的基础上自建一个支持 Vue，易于扩展，且不依赖 jQuery 这类过时插件的编辑器轮子，Tiptap 应运而生。
到目前为止，Tiptap 经历了两个版本 v1 和 v2。
Tiptap1
Tiptap 诞生当初，因为其开箱即用，支持 Vue2，拥有丰富 API 的同时原本的 API 一个也没丢，不丧失原本的定制化能力，比 ProseMirror 香太多。在 Github 上短短几个月便收获了大量开发者不错的反馈，但同时也有一些缺点暴露出来：
只支持 vue2，不支持 vue3
没有提供 TypeScript 类型定义，在 TS 项目中开发体验会很差，可能因为 Vue2 本身也对 TS 不友好
虽然提供了许多开箱即用的扩展，但是它们的功能都相对简单，比如图片只能插入，不能修改尺寸和对齐，要用在真正的场景中，还需要做一定的开发，没有真正的开箱即用
某些扩展存在 bug
文档不太完善，很多属性需要深入源码
于是，作者在 19 年底有了 Tiptap2 的计划，issue 链接
Tiptap2
终于，经过一年的时间，Tiptap2 在今年亮相了，更改了大量 v1 版的 API，几乎都是 breaking change，想从 v1 迁移到 v2 可能需要多花点功夫。
相比之前，有了更多亮眼的特性：
支持 Vue2，Vue3，React，Svelte 等框架，受众更广
使用 TypeScript 重构，支持类型系统
代码多包发布，每个模块的功能更加独立，开发者能更好的按需使用
提供了更多开箱即用的扩展
完善了文档细节，有了文档站点
更高程度的支持了协同编辑
Tiptap2 目前在 beta 版本，但总体已经相对比较稳定。
为什么推荐使用 Tiptap
ProseMirror 是一个可靠且功能强大的编辑器。但是它并不是大多数人想要的那种开箱即用。但是使用 Tiptap，你只需要几分钟就能上手，而且也提供了大量的扩展供你选择和参考，同时在你需要的时候，仍然可以使用原生的 ProseMirror API。
我自己也是个 ProseMirror 和 Tiptap 的深度使用者
早期对 ProseMirror 做过相关分享：ProseMirror - 模块化的富文本编辑框架
也做过 Tiptap 相关的开源项目：element-tiptap ，里面有我自己实现的一些编辑器特性。目前我正在将其升级到 Tiptap2 和 Vue3。
目前，Tiptap 可能是社区中唯一一个支持 Vue2 和 3，能够自己写插件扩展，又支持协同的编辑器了。
最后
如果你正在尝试寻找开发编辑器的方案，有机会可以尝试下 ProseMirror。
如果你有意愿或正在使用 ProseMirror 进行开发，推荐使用 Tiptap。
今后我会继续分享一些自己使用 Tiptap 开发 ProseMirror 的相关实践。
作者：Leecason
链接：https://juejin.cn/post/7038379264470695949
伪原创工具 SEO网站优化 https://www.237it.com/