配置编辑器

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

应该渲染到哪里 (element)
需要启用哪些功能 (extensions)
初始文档应该包含什么 (content)

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

添加您的配置

要配置编辑器，请将带有设置的对象传递给 Editor 类，如下所示：

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,
  // 防止加载默认 CSS（实际上不多）
  injectCSS: false,
})

节点、标记和扩展

大多数编辑功能都打包为节点、标记或功能。导入您所需的内容，并将其作为数组传递给编辑器。

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

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 扩展：

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。以下是如何使用它：

import StarterKit from '@tiptap/starter-kit'

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

您可以通过传递一个对象来配置 StarterKit 中包含的所有扩展。要针对特定扩展，配置时请在其前面加上扩展的名称。例如，要将标题级别限制为 1、2 和 3：

import StarterKit from '@tiptap/starter-kit'

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

禁用特定的 StarterKit 扩展

要排除某些扩展 StarterKit，可以在配置中将它们设置为 false。例如，要禁用 Undo/Redo History 扩展：

import StarterKit from '@tiptap/starter-kit'

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

在使用 Tiptap 的 Collaboration 时，它带有自己的历史扩展，必须禁用 StarterKit 中包含的 Undo/Redo History 扩展以避免冲突。

额外扩展

StarterKit 不包括所有可用的扩展。要为您的编辑器添加更多功能，请在 extensions 数组中列出它们。例如，要添加 Strike 扩展：

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

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