---
title: "配置编辑器"
description: "配置您的 Tiptap 编辑器的元素、扩展和内容设置。更多信息请查阅我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/getting-started/configure"
---

# 配置编辑器

配置您的 Tiptap 编辑器的元素、扩展和内容设置。更多信息请查阅我们的文档！

要配置 Tiptap，请指定三个关键元素：

- 应该渲染到哪里 (`element`)
  - **注意**：如果您使用 React 或 Vue 集成，则无需指定此项。
- 需要启用哪些功能 (`extensions`)
- 初始文档应该包含什么 (`content`)

虽然此设置适用于大多数情况，但您可以配置其他选项。

## 添加您的配置

要配置编辑器，请将 [带有设置的对象](https://tiptap.zhcndoc.com/editor/api/editor.md) 传递给 `Editor` 类，如下所示：

```js
import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

new Editor({
  // 将 Tiptap 绑定到 `.element`
  element: document.querySelector('.element'),
  // 注册扩展
  extensions: [Document, Paragraph, Text],
  // 设置初始内容
  content: '<p>示例文本</p>',
  // 初始化后将光标放置在编辑器中
  autofocus: true,
  // 使文本可编辑（默认是 true）
  editable: true,
  // 防止加载 Tiptap 自带的默认 ProseMirror CSS
  // 大多数情况下应保持为 true，因为这些样式对 Tiptap 正确运行非常重要
  injectCSS: false,
})
```

## 节点、标记和扩展

大多数编辑功能都打包为 [节点](https://tiptap.zhcndoc.com/editor/extensions/nodes.md)、[标记](https://tiptap.zhcndoc.com/editor/extensions/marks.md) 或 [功能](https://tiptap.zhcndoc.com/editor/extensions/functionality.md)。导入您所需的内容，并将其作为数组传递给编辑器。

以下是仅使用三个扩展的最小设置：

```js
import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

new Editor({
  element: document.querySelector('.element'),
  extensions: [Document, Paragraph, Text],
})
```

### 配置扩展

许多扩展可以使用 `.configure()` 方法进行配置。您可以传递一个包含特定设置的对象。

例如，要将标题级别限制为 1、2 和 3，请按如下方式配置 [`Heading`](https://tiptap.zhcndoc.com/editor/extensions/nodes/heading.md) 扩展：

```js
import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Heading from '@tiptap/extension-heading'

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    Document,
    Paragraph,
    Text,
    Heading.configure({
      levels: [1, 2, 3],
    }),
  ],
})
```

有关可用设置的信息，请参考扩展的文档。

### 包含最常用扩展的捆绑包

我们将一些最常用的扩展捆绑成了 [`StarterKit`](https://tiptap.zhcndoc.com/editor/extensions/functionality/starterkit.md)。以下是如何使用它：

```js
import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [StarterKit],
})
```

您可以通过传递一个对象来配置 [StarterKit](https://tiptap.zhcndoc.com/editor/extensions/functionality/starterkit.md) 中包含的所有扩展。要针对特定扩展，配置时请在其前面加上扩展的名称。例如，要将标题级别限制为 1、2 和 3：

```js
import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [
    StarterKit.configure({
      heading: {
        levels: [1, 2, 3],
      },
    }),
  ],
})
```

### 禁用特定的 StarterKit 扩展

要排除某些扩展 [StarterKit](https://tiptap.zhcndoc.com/editor/extensions/functionality/starterkit.md)，可以在配置中将它们设置为 `false`。例如，要禁用 [`Undo/Redo History`](https://tiptap.zhcndoc.com/editor/extensions/functionality/undo-redo.md) 扩展：

```js
import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [
    StarterKit.configure({
      undoRedo: false,
    }),
  ],
})
```

在使用 Tiptap 的 [`Collaboration`](https://tiptap.zhcndoc.com/editor/extensions/functionality/collaboration.md) 时，它带有自己的历史扩展，必须禁用 [StarterKit](https://tiptap.zhcndoc.com/editor/extensions/functionality/starterkit.md) 中包含的 `Undo/Redo History` 扩展以避免冲突。

### 额外扩展

[StarterKit](https://tiptap.zhcndoc.com/editor/extensions/functionality/starterkit.md) 不包括所有可用的扩展。要为您的编辑器添加更多功能，请在 `extensions` 数组中列出它们。例如，要添加 [`Strike`](https://tiptap.zhcndoc.com/editor/extensions/marks/strike.md) 扩展：

```js
import StarterKit from '@tiptap/starter-kit'
import Strike from '@tiptap/extension-strike'

new Editor({
  extensions: [StarterKit, Strike],
})
```

## 下一步

- [为您的编辑器添加样式](https://tiptap.zhcndoc.com/editor/getting-started/style-editor.md)
- [了解更多关于 Tiptap 的概念](https://tiptap.zhcndoc.com/editor/core-concepts/introduction.md)
- [学习如何持久化编辑器状态](https://tiptap.zhcndoc.com/editor/core-concepts/persistence.md)
- [开始构建您自己的扩展](https://tiptap.zhcndoc.com/editor/extensions/custom-extensions.md)