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

7,541 阅读4分钟

本文首发于公众号「小李的前端小屋」,欢迎关注~

Tiptap —— The headless editor framework for web artisans.

tiptap

什么是 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 链接

WX20211205-224331@2x.png

Tiptap2

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

相比之前,有了更多亮眼的特性:

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

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

为什么推荐使用 Tiptap

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

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

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

最后

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

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

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


❤️支持

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

欢迎关注公众号「小李的前端小屋」,我目前在一线大厂拼搏中,会不定期对前端的工作思考与心得进行深度分享和总结,助你成为更好的前端。