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,
});
这将完成以下操作:
- 将 Tiptap 绑定到
.element
, - 加载
Document
、Paragraph
和Text
扩展, - 设置初始内容,
- 初始化后将光标放置在编辑器中,
- 使文本可编辑(但这通常是默认的),并且
- 禁用加载 默认 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
扩展。