聊聊 Tiptap，一款为开发富文本编辑器为生的框架

Tiptap —— The headless editor framework for web artisans.

什么是 Tiptap

在介绍 Tiptap[1] 前，首先要介绍一下 ProseMirror[2]，它是一款可定制性及极强的「所见即所得」富文本编辑器框架，文档的可编辑性基于 contentEditable 属性，支持协同，作者是 @marijnh[3]，他也是 CodeMirror 编辑器的开发者。

国外一些比较著名的大厂如 「Atlassian」 和 「纽约时报」 都在使用 ProseMirror。但它本身并不像其他编辑器一样开箱即用，需要一系列的模块进行配合搭建，而且涉及到一些内部抽象概念，API 复杂且多，官方文档全英文，所以上手成本比较高。而 Tiptap 则是对 ProseMirror 的 「headerless」 包装，将必要的一些模块组装、MVVM 框架接入等部分黑盒在了框架内部，在不丧失其原有可定制扩展性的同时，暴露一些更简单更少的 API ，让开发者更容易上手。

什么是 headerless

Tiptap 是一款无头编辑器，它没有提供任何 UI 样式，你完全可以自由地构建任何你想要的 UI。不需要重写任何 class，不需要 !important 或其他 hack 代码。

Tiptap 的前世今生

Tiptap 在 2019 年被 @Philipp Kühn[4] 创建，当时他在找一个 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 链接[5]

Tiptap2

终于，经过一年的时间，Tiptap2 在今年亮相了，更改了大量 v1 版的 API，几乎都是 「breaking change」，想从 v1 迁移到 v2 可能需要多花点功夫。

相比之前，有了更多亮眼的特性：

• 「支持 Vue2，Vue3，React，Svelte 等框架」
• 「使用 TypeScript 重构」，支持类型系统
• 代码「多包发布」，每个模块的功能更加独立，开发者能更好的按需使用
• 提供了更多「开箱即用的扩展」
• 完善了文档细节，有了「文档站点」
• 更高程度的支持了「协同编辑」

Tiptap2 目前在 beta 版本，但总体已经相对比较稳定。

为什么推荐使用 Tiptap

ProseMirror 是一个可靠且功能强大的编辑器。但是它并不是大多数人想要的那种开箱即用。但是使用 Tiptap，你只需要几分钟就能上手，而且也提供了大量的扩展供你选择和参考，同时在你需要的时候，「仍然可以使用原生的 ProseMirror API」。

我自己也是个 ProseMirror 和 Tiptap 的深度使用者

• 早期对 ProseMirror 做过相关分享：ProseMirror - 模块化的富文本编辑框架[6]
• 也做过 Tiptap 相关的开源项目：element-tiptap[7] ，里面有我自己实现的一些编辑器特性。目前我正在将其升级到 Tiptap2 和 Vue3。

目前，Tiptap 可能是社区中唯一一个支持 Vue2 和 3，能够自己写插件扩展，又支持协同的编辑器了。

最后

如果你正在尝试寻找开发编辑器的方案，有机会可以尝试下 ProseMirror。

如果你有意愿或正在使用 ProseMirror 进行开发，推荐使用 Tiptap。

今后我会继续分享一些自己使用 Tiptap 开发 ProseMirror 的相关实践。

❤️感谢

如果本文对你有帮助，点赞👍支持下我吧，你的「赞」是我创作的动力

参考资料

[1]

Tiptap: https://github.com/ueberdosis/tiptap

[2]

ProseMirror: https://prosemirror.net/

[3]

@marijnh: https://github.com/marijnh

[4]

@Philipp Kühn: https://github.com/philippkuehn

[5]

issue 链接: https://github.com/ueberdosis/Tiptap/issues/547

[6]

ProseMirror - 模块化的富文本编辑框架: https://juejin.cn/post/6844903640889720846

[7]

element-tiptap: https://github.com/Leecason/element-tiptap