Tiptap 概念
探索 Tiptap API 的基础元素,旨在实现基于 ProseMirror 架构的复杂丰富文本编辑。
结构
ProseMirror 使用一个严格的 Schema,它定义了文档允许的结构。一个文档是由标题、段落和其他元素(称为节点)组成的树状结构。标记(Marks)可以附加到节点上,例如用以强调其中的部分。 命令 通过编程方式改变该文档。
内容
文档存储在一个状态中。所有的更改都是作为事务应用到这个状态上的。状态详细描述了当前的内容、光标位置和选择。你可以挂钩到几个不同的 事件,例如在事务应用之前对其进行修改。
文档在内部被存储为一个 ProseMirror 节点,并且可以通过调用 editor.getJSON() 以 Tiptap JSON 对象的形式获取。
Tiptap JSON 是存储文档和操作文档的推荐格式。下面是一个示例的 Tiptap JSON 文档:
{
"type": "doc",
"content": [
{
"type": "paragraph",
"attrs": {
"textAlign": "center"
},
"content": [
{ "type": "text", "text": "Hello, " },
{
"type": "text",
"text": "world",
"marks": [{ "type": "bold" }, { "type": "italic" }]
},
{ "type": "text", "text": "!" }
]
}
]
}Tiptap JSON 文档是一个节点树。有些节点可以有子节点,但只有文本节点(type: 'text')能包含文本内容。文本节点和其他内联节点可以附加标记。部分节点和标记可以具有属性。
用于有效 Tiptap JSON 内容的 JSON Schema 可在 /assets/schemas/tiptap-json-schema.json 中获取。你可以在存储或处理 Tiptap JSON 之前使用它来验证它。
Extensions
扩展为编辑器增加 节点、标记 和/或 功能。许多扩展将它们的命令绑定到常用的 键盘快捷键。
术语表
ProseMirror 有自己的术语表,你会偶尔遇到这些词。以下是我们在文档中常用词汇的简要介绍。
| 词汇 | 描述 |
|---|---|
| Schema | 配置内容可能具有的结构。 |
| Document | 编辑器中的实际内容。 |
| State | 描述编辑器当前内容和选择的全部信息。 |
| Transaction | 对状态的更改(更新选择、内容等)。 |
| Extension | 注册新的功能。 |
| Node | 一种内容类型,比如标题或段落。 |
| Mark | 可应用于节点的标记,例如行内格式。 |
| Command | 在编辑器内执行某个操作,某种程度上会改变状态。 |
| Decoration | 文档上的样式,例如用来突出显示错误。 |