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

  • 应该在哪里渲染（element）
  • 启用哪些功能（extensions）
  • 初始文档应该包含什么内容（content）

虽然这种设置适用于大多数情况，你还可以配置其他选项。

添加你的配置

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

  1. import { Editor } from '@tiptap/core'
  2. import Document from '@tiptap/extension-document'
  3. import Paragraph from '@tiptap/extension-paragraph'
  4. import Text from '@tiptap/extension-text'
  6. new Editor({
  7.   // 将 Tiptap 绑定到 `.element`
  8.   element: document.querySelector('.element'),
  9.   // 注册扩展
  10.   extensions: [Document, Paragraph, Text],
  11.   // 设置初始内容
  12.   content: '<p>Example Text</p>',
  13.   // 初始化后将光标放入编辑器
  14.   autofocus: true,
  15.   // 使文本可编辑（默认是 true）
  16.   editable: true,
  17.   // 防止加载默认的 CSS（反正也不多）
  18.   injectCSS: false,
  19. })

节点、标记和扩展

大多数编辑功能都打包成节点、标记或功能。导入你需要的功能，并将它们作为数组传递给编辑器。

这是一个最小的设置，只包含三个扩展：

  1. import { Editor } from '@tiptap/core'
  2. import Document from '@tiptap/extension-document'
  3. import Paragraph from '@tiptap/extension-paragraph'
  4. import Text from '@tiptap/extension-text'
  6. new Editor({
  7.   element: document.querySelector('.element'),
  8.   extensions: [Document, Paragraph, Text],
  9. })

配置扩展

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

例如，要将标题级别限制为 1、2 和 3，可以像下面这样配置 Heading 扩展：

  1. import { Editor } from '@tiptap/core'
  2. import Document from '@tiptap/extension-document'
  3. import Paragraph from '@tiptap/extension-paragraph'
  4. import Text from '@tiptap/extension-text'
  5. import Heading from '@tiptap/extension-heading'
  7. new Editor({
  8.   element: document.querySelector('.element'),
  9.   extensions: [
  10.     Document,
  11.     Paragraph,
  12.     Text,
  13.     Heading.configure({
  14.       levels: [1, 2, 3],
  15.     }),
  16.   ],
  17. })

请参阅扩展的文档以了解可用的设置。

包含常见扩展的捆绑包

我们已经将一些最常用的扩展捆绑到 StarterKit 中。以下是如何使用它：

  1. import StarterKit from '@tiptap/starter-kit'
  3. new Editor({
  4.   extensions: [StarterKit],
  5. })

你可以通过传递一个对象来配置 StarterKit 中的所有扩展。要针对特定的扩展，使用扩展的名称作为前缀进行配置。例如，要将标题级别限制为 1、2 和 3：

  1. import StarterKit from '@tiptap/starter-kit'
  3. new Editor({
  4.   extensions: [
  5.     StarterKit.configure({
  6.       heading: {
  7.         levels: [1, 2, 3],
  8.       },
  9.     }),
  10.   ],
  11. })

禁用特定的 StarterKit 扩展

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

  1. import StarterKit from '@tiptap/starter-kit'
  3. new Editor({
  4.   extensions: [
  5.     StarterKit.configure({
  6.       history: false,
  7.     }),
  8.   ],
  9. })

当使用 Tiptap 的 Collaboration，它自带历史记录扩展时，你必须禁用 StarterKit 中的 Undo/Redo History 扩展以避免冲突。

其他扩展

StarterKit 并没有包含所有可用的扩展。要向编辑器添加更多功能，只需在 extensions 数组中列出它们。例如，要添加 Strike 扩展：

  1. import StarterKit from '@tiptap/starter-kit'
  2. import Strike from '@tiptap/extension-strike'
  4. new Editor({
  5.   extensions: [StarterKit, Strike],
  6. })