tiptap 节点
引言
如果你将文档视为一棵树,那么节点就是这棵树中的内容类型。节点的例子包括段落、标题或代码块。但节点并不一定要是块级元素,它们也可以与文本一起内联显示,例如用于 @提及。
支持的节点列表
标题 | StarterKit(查看) | 源代码 |
---|---|---|
引用 | 包含 | GitHub |
无序列表 | 包含 | GitHub |
代码块 | 包含 | GitHub |
详细信息 | - | 需要 Tiptap Pro 订阅 |
详细信息摘要 | - | 需要 Tiptap Pro 订阅 |
详细信息内容 | - | 需要 Tiptap Pro 订阅 |
文档 | 包含 | GitHub |
表情 | - | 需要 Tiptap Pro 订阅 |
硬换行 | 包含 | GitHub |
标题 | 包含 | GitHub |
水平线 | 包含 | GitHub |
图片 | - | GitHub |
列表项 | 包含 | GitHub |
提及 | 包含 | GitHub |
有序列表 | 包含 | GitHub |
段落 | 包含 | GitHub |
表格 | - | GitHub |
表格行 | - | GitHub |
表格单元格 | - | GitHub |
任务列表 | - | GitHub |
任务项 | - | GitHub |
文本 | 包含 | GitHub |
YouTube | - | GitHub |
创建新节点
你可以自由为 Tiptap 创建自己的节点。以下是创建并注册自定义节点所需的模板代码:
import { Node } from "@tiptap/core";
const CustomNode = Node.create({
// 你的代码在这里
});
const editor = new Editor({
extensions: [
// 将你的自定义节点与编辑器一起注册。
CustomNode,
// ... 别忘了所有的其他扩展。
Document,
Paragraph,
Text,
// ...
],
});
更多关于自定义扩展的信息请参阅我们的 指南。