大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

今天给大家带来的主题是富文本编辑器中的Tiptap Editor。话不多说，直接进入正题！

1.什么是 Tiptap Editor

Tiptap 编辑器是一个无头、与框架无关的富文本编辑器，可以通过扩展程序进行自定义和扩展。 无头性质意味着 Tiptap 没有固定的用户界面，提供完全的设计自由，同时 Tiptap 基于高度可靠的 ProseMirror 库。

ProseMirror 是一个基于 contentEditable 的功能良好的富语义内容编辑器，支持协作编辑和自定义文档模式。ProseMirror 库由许多独立的模块组成，该存储库仅充当中央问题跟踪器，并包含一个脚本以帮助轻松检查所有核心模块以进行开发。

Tiptap Editor 得到协作开源后端 Hocuspocus 的补充， Editor 和 Hocuspocus 构成了 Tiptap Suite 的基础。

Tiptap 编辑器的工作原理可以概括为：

• 无头框架：Tippap 不依赖于用户界面， 因此不需要类覆盖或代码修改。 如果确实需要示例 UI，可以轻松集成相应的 UI 模板。
• 与框架无关：Tiptap 编辑器旨在跨不同的前端框架工作。 这意味着无论开发者使用的是 Vue、React 还是纯 JavaScript，Tippap 都可以集成而不会出现兼容性问题。
• 基于扩展：Tippap 中的扩展允许定制编辑体验，从简单的文本样式到拖放块编辑等高级功能。 开发者可以从文档和社区中提供的 100 多个扩展中进行选择，以增强编辑器的功能。
• 自定义用户体验：编辑器的构建是为了让开发者能够控制定义自己的扩展和节点。

当然，Tiptap 编辑器还提供了专业版的扩展（Editor Pro Extensions），可增强 Tiptap 编辑器的功能，其是可以集成到基本编辑器中以提供更复杂的编辑选项的附加功能。

Editor Pro Extensions 主要功能包括：协作编辑（允许多个用户同时编辑文档）、拖放文件管理（以便更轻松地处理文档和媒体）以及唯一的节点 ID 分配。但是，缺点就是申请 Tiptap 帐户。

目前 Tiptap Editor 在 Github 通过 MIT 协议开源，有超过 22.8k 的 star、1.9k 的 fork、项目依赖量 4.5k、代码贡献者 300+、妥妥的前端优质开源项目。

2.如何使用 Tiptap Editor

安装 Tiptap Editor

Tiptap Editor 可以借助 Yarn 或者 NPM 来安装：

npm install --save tiptap
yarn add tiptap

安装了 tiptap 后就可以直接开始使用，但是还可以预先安装特定的扩展，而 Tiptap（或者说 Prosemirror）的强大之处就在于扩展，即想要的任何功能都可以编写为扩展并插入 Tiptap 的运行实例中，从而拥有一个具有自定义功能的编辑器。

Tiptap 团队在 NPM 包 Tiptap-extensions 中有一组很好的扩展，并且积极维护，这使得其可以始终和 Tiptap 一起工作，包括： Blockquote、CodeBlock、HardBreak、标题、OrderedList、BulletList、ListItem、TodoItem、TodoList、粗体、代码、斜体、链接、删除线、下划线、历史记录。

可以通过下面方式安装扩展：

npm install --save tiptap-extensions
yarn add tiptap-extensions

初始化 Tiptap Editor

接下来将仅使用基本扩展，例如：粗体、斜体、下划线、标题、历史扩展。 在项目中，可以创建一个新的特定文件夹来保存为编辑器编写的所有 JS 文件和 VueJS 组件。接下来使用 Babel 和 ESLint 创建了一个 VueJS 2 项目，并在 src 文件夹中创建了一个名为 editor 的目录，如下所示。

然后安装 tiptap 和 tiptap-extensions。在这里，使用 NPM 一次性安装两个包。

npm install --save tiptap tiptap-extensions

安装后，可以继续查看上面屏幕截图中显示的 tiptap.js 文件并开始使用 Tiptap。

import {Editor} from "tiptap";
import {Bold, Italic, Underline, Heading, History} from "tiptap-extensions";

export const ourEditor = new Editor({
    // 导入相应的插件
  extensions: [
    new Bold(),
    new Italic(),
    new Underline(),
    new Heading({levels: [1, 2, 3] }),
    new History()
  ]
});

在此文件中，使用想要使用的扩展来初始化 Tiptap Editor 的实例，接下来是在 Vue 中使用 Tiptap Editor：

以上所写的只是 Tiptap 提供的很小部分功能，其在 GitHub 存储库上提供了对该技术的更深入的说明。同时，不仅是维护者，社区也提供了很好的扩展，非常多的扩展，例如：

• KaTex 集成
• ：表情符号：支持
• 带有手动语言选择的代码块
• 文本颜色、文本对齐、文本突出显示
• 使用 Y.js 进行实时多用户编辑

如果使用 VueJS 组件框架（例如 ElementUI 或 VuetifyJS），甚至还有像 element-tiptap 和 Tiptap-vuetify 这样的包，提供了大量的抽象，并允许开发者非常快速地将 Tiptap 与项目集成。

3.本文总结

本文主要和大家介绍 Tiptap 编辑器，其是一个无头、与框架无关的富文本编辑器，可以通过扩展程序进行自定义和扩展。 无头性质意味着 Tiptap 没有固定的用户界面，提供完全的设计自由。因为篇幅问题，关于 Tiptap 主题只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

参考资料

https://github.com/ueberdosis/tiptap

https://github.com/ProseMirror/prosemirror

https://dev.to/sereneinserenade/next-gen-text-editing-in-browser-with-tiptap-2943

https://www.youtube.com/watch?v=VcnROkRhJ34