---
title: "Tiptap 中的扩展"
description: "学习如何创建、定制和集成扩展到 Tiptap 中，以提升你的文本编辑器的功能。"
canonical_url: "https://tiptap.zhcndoc.com/editor/core-concepts/extensions"
---

# Tiptap 中的扩展

学习如何创建、定制和集成扩展到 Tiptap 中，以提升你的文本编辑器的功能。

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

要在编辑器中添加新类型的内容，可以使用 [节点](https://tiptap.zhcndoc.com/editor/api/nodes.md) 和 [标记](https://tiptap.zhcndoc.com/editor/extensions/marks.md)，它们可以在编辑器中呈现内容。

可选的 `@tiptap/starter-kit` 包含最常用的扩展，简化了设置过程。阅读更多关于 [`StarterKit`](https://tiptap.zhcndoc.com/editor/getting-started/configure.md#default-extensions) 的内容。

通过 Tiptap 社区创建的扩展来扩展编辑器的功能。在 [Awesome Tiptap Repository](https://github.com/ueberdosis/awesome-tiptap#community-extensions) 中发现各种自定义功能和工具。有关协作和支持，请在社区构建扩展的 [讨论线程](https://github.com/ueberdosis/tiptap/discussions/2973) 中与其他开发者交流。

## 关键功能

扩展不仅仅可以添加新的内容类型。你还可以：

- **为节点和标记添加属性**，以存储额外数据
- **一次性应用全局属性** 到多个扩展（对于文本对齐、行高和其他属性非常有用）
- **添加命令** 来执行自定义编辑器行为
- **监听事件**，如焦点、失焦、更新等
- **添加快捷键**，快速访问功能

## 什么是扩展？

尽管 Tiptap 尝试隐藏 ProseMirror 的大部分复杂性，但它是建立在其 API 之上的，我们建议您阅读 [ProseMirror 指南](https://ProseMirror.net/docs/guide/) 以获取更高级的用法。您将更好地理解后台的工作原理，并更加熟悉 Tiptap 中使用的许多术语和行话。

现有的 [节点](https://tiptap.zhcndoc.com/editor/extensions/nodes.md)、[标记](https://tiptap.zhcndoc.com/editor/extensions/marks.md) 和 [功能](https://tiptap.zhcndoc.com/editor/extensions/functionality.md) 可以让您对如何着手自己的扩展有一个良好的印象。为了方便在文档和源代码之间切换，我们在每个扩展文档页面上都链接到了 GitHub 的文件。

我们建议首先从定制现有扩展开始，然后再用获得的知识创建自己的扩展。这就是为什么下面的所有示例都扩展现有扩展，但所有示例也都可以在新创建的扩展上运行的原因。

## 创建新扩展

您可以自由地为 Tiptap 创建自己的扩展。以下是创建和注册您自己扩展所需的样板代码：

```js
import { Extension } from '@tiptap/core'

const CustomExtension = Extension.create({
  // 在此处编写您的代码
})

const editor = new Editor({
  extensions: [
    // 将您的自定义扩展与编辑器注册。
    CustomExtension,
    // … 并且不要忘记所有其他扩展。
    Document,
    Paragraph,
    Text,
    // …
  ],
})
```

您可以通过我们的 CLI 轻松引导创建一个新扩展。

```bash
npm init tiptap-extension
```

在我们的 [指南](https://tiptap.zhcndoc.com/editor/extensions/custom-extensions.md) 中了解更多关于自定义扩展的信息。