tiptap 扩展
引言
扩展为 Tiptap 添加新功能,您会在本文档中多次看到 “扩展” 这个词。实际上,有真正的扩展插件。它们不能添加到 schema(文档结构),但可以提供功能或改变编辑器的行为。
还有一些扩展具有更多能力,我们称它们为 节点 和 标记 ,可以在编辑器中渲染内容。
提供的扩展列表
标题 | 起始套件 (查看) | 源代码 |
---|---|---|
泡泡菜单 | – | GitHub |
字符计数 | – | GitHub |
协作编辑 | – | GitHub |
协作光标 | – | GitHub |
颜色 | – | GitHub |
拖放光标 | 内置 | GitHub |
浮动菜单 | – | GitHub |
聚焦 | – | GitHub |
字体家族 | – | GitHub |
间隙光标 | 内置 | GitHub |
历史记录 | 内置 | GitHub |
不可见字符 | – | 需要 Tiptap Pro 订阅 |
数学公式 | – | 需要 Tiptap Pro 订阅 |
占位符 | – | GitHub |
起始套件 | – | GitHub |
文本对齐 | – | GitHub |
排版 | – | GitHub |
唯一 ID | – | 需要 Tiptap Pro 订阅 |
虽然不是必须使用,但我们为您准备了一个名为 @tiptap/starter-kit
的套件,它包含了最常见的扩展。更多关于默认扩展的信息请阅读 指南。
社区扩展的列表可以在 Awesome Tiptap 存储库 中找到,有关社区扩展的讨论可在 GitHub 问题 中查看。
扩展的工作原理
尽管 Tiptap 尽力隐藏 ProseMirror 的复杂性,但它建立在其 API 之上,我们建议您阅读 ProseMirror 指南 以深入了解高级用法。这样您就能更好地理解底层是如何工作的,并对 Tiptap 中使用的许多术语和行话更加熟悉。
现有的 节点、标记 和 扩展 能给您如何创建自定义扩展的启示。为了让您在文档和源代码之间切换更加方便,我们在每个扩展文档页面都链接到了对应的 GitHub 文件。
我们建议您先从定制现有扩展开始,然后在掌握了知识后创建自己的扩展。因此,下面的所有示例都是基于已存在的扩展,但所有示例同样适用于新创建的扩展。
创建新的扩展
您可以自由为 Tiptap 创建自己的扩展。以下是创建并注册扩展所需的模板代码:
import { Extension } from "@tiptap/core";
const CustomExtension = Extension.create({
// 这里是您的代码
});
const editor = new Editor({
extensions: [
// 在编辑器中注册您的自定义扩展。
CustomExtension,
// ...别忘了所有其他扩展。
Document,
Paragraph,
Text,
// ...
],
});
您可以使用我们的 CLI 快速创建一个新的扩展。
npm init tiptap-extension
了解更多关于自定义扩展的信息,请参阅 我们的指南。