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](https://github.com/philippkuehn) 创建，当时他在找一个 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 链接](https://github.com/ueberdosis/Tiptap/issues/547)
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 的相关实践。
❤️支持
如果本文对你有帮助，点赞 支持下我吧，你的「赞」是我创作的动力。
欢迎关注公众号「小李的前端小屋」，我目前在一线大厂拼搏中，会不定期对前端的工作思考与心得进行深度分享和总结，助你成为更好的前端。
