配置编辑器

要配置 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>Example Text</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({
      history: 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],
})