项目

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

更多关于自定义扩展的信息请参阅我们的 指南

在本文档中