tiptap 配置

引言

在大多数情况下，只需要指定 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({
  element: document.querySelector(".element"),
  extensions: [Document, Paragraph, Text],
  content: "<p>Example Text</p>",
  autofocus: true,
  editable: true,
  injectCSS: false,
});

这将完成以下操作：

1. 将 Tiptap 绑定到 .element，
2. 加载 Document、Paragraph 和 Text 扩展，
3. 设置初始内容，
4. 初始化后将光标放置在编辑器中，
5. 使文本可编辑（但这通常是默认的），并且
6. 禁用加载 默认 CSS（实际上并不多）。

节点、标记和扩展

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

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

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() 方法并传入一个对象。

以下例子将禁用默认的标题级别 4、5 和 6，只允许 1、2 和 3：

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],
});

甚至可以为所有包含的扩展传递一个配置对象。只需在配置前加上扩展名前缀：

import StarterKit from "@tiptap/starter-kit";

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

StarterKit 扩展加载了最常用的扩展，但并非所有可用扩展。如果您想加载其他扩展或添加自定义扩展，请将它们添加到 extensions 数组中：

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

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

不想从 StarterKit 中加载特定扩展？只需将配置设置为 false：

import StarterKit from "@tiptap/starter-kit";

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

在协作编辑示例中，您可能会看到类似这样的配置。Collaboration 扩展自带了自己的历史扩展。为了避免冲突，需要移除或禁用默认的 History 扩展。