---
title: "创建一个新的扩展"
description: "为您的 Tiptap 编辑器创建一个新的扩展，从头开始创建独特的编辑器体验。在文档中了解更多信息！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/custom-extensions/create-new"
---

# 创建一个新的扩展

为您的 Tiptap 编辑器创建一个新的扩展，从头开始创建独特的编辑器体验。在文档中了解更多信息！

您知道吗？您可以从零开始构建自己的扩展！其语法与上述其他扩展或现有扩展是相同的。

### 创建一个扩展

扩展为 Tiptap 添加新的功能，您会经常看到“扩展”这个词，即使是用于节点和标记。但也存在字面意义上的扩展。这些不能像标记和节点那样添加到 schema 中，但可以添加功能或改变编辑器的行为。

一个很好的学习示例可能是 [`TextAlign`](https://tiptap.zhcndoc.com/editor/extensions/functionality/textalign.md)。

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

const CustomExtension = Extension.create({
  name: 'customExtension',

  // 您的代码写在这里。
})
```

您也可以使用回调函数来创建扩展。当您想封装扩展的逻辑时非常有用，例如定义事件处理器或其他自定义逻辑。

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

const CustomExtension = Extension.create(() => {
  // 定义在扩展中使用的变量或函数
  const customVariable = 'foo'

  function onCreate() {}
  function onUpdate() {}

  return {
    name: 'customExtension',
    onCreate,
    onUpdate,

    // 您的代码写在这里。
  }
})
```

了解更多关于 [扩展 API](https://tiptap.zhcndoc.com/editor/extensions/custom-extensions/create-new/extension.md)。

### 创建一个节点

如果将文档视为一棵树，那么 [节点](https://tiptap.zhcndoc.com/editor/extensions/nodes.md) 就是这棵树中的一种内容类型。好的学习示例包括 [`Paragraph`](https://tiptap.zhcndoc.com/editor/extensions/nodes/paragraph.md)、[`Heading`](https://tiptap.zhcndoc.com/editor/extensions/nodes/heading.md) 或 [`CodeBlock`](https://tiptap.zhcndoc.com/editor/extensions/nodes/code-block.md)。

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

const CustomNode = Node.create({
  name: 'customNode',

  // 您的代码写在这里。
})
```

您也可以使用回调函数来创建节点。当您想封装扩展的逻辑时非常有用，例如定义事件处理器或其他自定义逻辑。

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

const CustomNode = Node.create(() => {
  // 定义在扩展中使用的变量或函数
  const customVariable = 'foo'

  function onCreate() {}
  function onUpdate() {}

  return {
    name: 'customNode',
    onCreate,
    onUpdate,

    // 您的代码写在这里。
  }
})
```

节点不必是块级的。它们也可以以内联方式渲染文本，例如用于 [@mentions](https://tiptap.zhcndoc.com/editor/extensions/nodes/mention.md)。

了解更多关于 [节点 API](https://tiptap.zhcndoc.com/editor/extensions/custom-extensions/create-new/node.md)。

### 创建一个标记

一个或多个标记可以应用于 [节点](https://tiptap.zhcndoc.com/editor/extensions/nodes.md)，例如用于添加内联格式。好的学习示例包括 [`Bold`](https://tiptap.zhcndoc.com/editor/extensions/marks/bold.md)、[`Italic`](https://tiptap.zhcndoc.com/editor/extensions/marks/italic.md) 和 [`Highlight`](https://tiptap.zhcndoc.com/editor/extensions/marks/highlight.md)。

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

const CustomMark = Mark.create({
  name: 'customMark',

  // 您的代码写在这里。
})
```

您也可以使用回调函数来创建标记。当您想封装扩展的逻辑时非常有用，例如定义事件处理器或其他自定义逻辑。

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

const CustomMark = Mark.create(() => {
  // 定义在扩展中使用的变量或函数
  const customVariable = 'foo'

  function onCreate() {}
  function onUpdate() {}

  return {
    name: 'customMark',
    onCreate,
    onUpdate,

    // 您的代码写在这里。
  }
})
```

了解更多关于 [标记 API](https://tiptap.zhcndoc.com/editor/extensions/custom-extensions/create-new/mark.md)。

## 发布独立扩展

如果您想为 Tiptap 创建并发布您自己的扩展，可以使用我们的 CLI 工具来引导您的项目。只需运行 `npm init tiptap-extension` 并按照提示操作。CLI 会为您创建一个包含预配置项目的新文件夹，其中包含用于运行 Rollup 的构建脚本。

如果您想在本地测试您的扩展，可以在扩展项目文件夹中运行 `npm link`，然后在您的项目中（例如 Vite 应用）运行 `npm link YOUR_EXTENSION`。

## 分享

一切准备就绪后，别忘了 [与社区分享](https://github.com/ueberdosis/tiptap/issues/819) 或在我们的 [awesome-tiptap](https://github.com/ueberdosis/awesome-tiptap) 仓库里分享。