tiptap 扩展

引言

扩展为 Tiptap 添加新功能，您会在本文档中多次看到 “扩展” 这个词。实际上，有真正的扩展插件。它们不能添加到 schema（文档结构），但可以提供功能或改变编辑器的行为。

还有一些扩展具有更多能力，我们称它们为 节点 和 标记 ，可以在编辑器中渲染内容。

提供的扩展列表

虽然不是必须使用，但我们为您准备了一个名为 @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

了解更多关于自定义扩展的信息，请参阅 我们的指南。