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,
// ...
],
});
更多关于自定义扩展的信息请参阅我们的 指南。
抠丁客
