Tiptap 中的扩展

扩展通过添加新功能或修改编辑器的行为来增强 Tiptap。无论是添加新的内容类型、定制编辑器的外观，还是扩展其功能，扩展都是 Tiptap 的基础构件。

要在编辑器中添加新类型的内容，可以使用 节点 和 标记，它们可以在编辑器中呈现内容。

可选的 @tiptap/starter-kit 包含最常用的扩展，简化了设置过程。阅读更多关于 StarterKit 的内容。

通过 Tiptap 社区创建的扩展来扩展编辑器的功能。在 Awesome Tiptap Repository 中发现各种自定义功能和工具。有关协作和支持，请在社区构建扩展的 讨论线程 中与其他开发者交流。

什么是扩展？

尽管 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

在我们的 指南 中了解更多关于自定义扩展的信息。