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

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

Previously简介

Next up节点与标记