知识点思维导图
13 个知识节点
参考资料
富文本编辑器（06） - 数据结构
读完后，你应能完成以下任务：
- 绘制“富文本编辑器（06） - 数据结构 / 插件对应的语义化标签”的关键对象与数据流，解释“更重要的是为屏幕阅读器和其他辅助技术提供了语义信息。”，并用源码位置、日志或 Trace 标注证据。
- 为“富文本编辑器（06） - 数据结构 / 渲染的数据”设计正常与异常输入，验证“HTML 字符串 -> JSON 格式 -> Markdown 格式”，输出首个偏差位置与回归测试结果。
- 实现“富文本编辑器（06） - 数据结构 / 持久化契约与往返验证”的最小代码或配置，检验“生产系统通常以 JSON 作为可编辑主数据，因为它能保留节点类型、Mark 和扩展属性；”，输出命令、结果与 Diff，并说明不适用边界。
L1的编辑器抽象了数据和模型，需要开发者清晰的了解数据层，由数据层驱动视图 schema
一、先建立全局：数据结构 是什么？
理解“数据结构”，先要把标题中的对象放进同一条处理链：它接收什么输入，经过哪些状态变化，最终用什么证据判断结果。下表不另造概念，只把作者正文已经解释的章节按依赖顺序连起来。
“数据结构”的第一个核心判断是：更重要的是为屏幕阅读器和其他辅助技术提供了语义信息。。先弄清这个判断中的对象和输入输出，后面的实现、故障和验收才有共同语境。
| 顺序 | 章节 | 读完本节应抓住的结论 |
|---|---|---|
| 1 | 插件对应的语义化标签 | 更重要的是为屏幕阅读器和其他辅助技术提供了语义信息。 |
| 2 | 渲染的数据 | HTML 字符串 -> JSON 格式 -> Markdown 格式 |
| 3 | 持久化契约与往返验证 | 生产系统通常以 JSON 作为可编辑主数据，因为它能保留节点类型、Mark 和扩展属性； |
| 4 | L1的编辑器抽象了数据和模型 | L1的编辑器抽象了数据和模型，需要开发者清晰的了解数据层，由数据层驱动视图 |
| 5 | 在 TipTap 编辑器中 | 在 TipTap 编辑器中， |
| 6 | 不同的功能组件对应着不同的语义化 HTML 标签 | 不同的功能组件对应着不同的语义化 HTML 标签， |
1.1 核心对象之间怎样衔接
flowchart LR
S1["插件对应的语义化标签"] --> S2
S2["渲染的数据"] --> S3
S3["持久化契约与往返验证"] --> S4
S4["L1的编辑器抽象了数据和模型"] --> S5
S5["在 TipTap 编辑器中"]
这张图只表达本文的讲解顺序，不替代正文机制。判断“数据结构”是否真正掌握，需要能从最后一个结果沿图回到前面每个章节的输入、状态变化和证据。
1.2 再看失败：问题最早会出现在哪一步？
在“数据结构”的对象和顺序已经明确后，再看可观察的失败：状态不同步、事件重复、事务丢失、IPC 越权或页面不可交互。定位时不从最后一条错误猜原因，而是沿上图找第一个偏离正文结论的节点。
二、插件对应的语义化标签
在 TipTap 编辑器中， 不同的功能组件对应着不同的语义化 HTML 标签， 这些标签不仅提供了视觉样式， 更重要的是为屏幕阅读器和其他辅助技术提供了语义信息。
根容器和工具栏
- 根容器使用
<div role="application" aria-label="富文本编辑器">， 其中 role 表示这个元素是什么， aria-label 虽然视觉不可见， 但文本阅读器会读出， 提高了可访问性 - 工具栏使用
<div role="toolbar" aria-label="文本格式化">来标识工具栏的语义
文本结构标签
- 标题使用
<h1>到<h6>标签，表示内容层级 - 正文段落使用
<p>标签 - 代码块使用
<pre>和<code>的组合 - 代码使用
<code>标签 - 引用块使用
<blockquote>明确表示引用自其他来源的内容
列表和交互元素
- 无序列表和有序列表分别使用
<ul>/<ol>和<li>标签 - 复选框使用
<div role="checkbox" aria-checked="true/false">或标准的<input type="checkbox"> - 表格使用完整的表格标签结构：
<table>,<thead>,<tbody>,<tr>,<th>,<td>
文本格式标签
- 粗体使用
<strong>而不是<b>，因为 strong 表示内容重要性，而 b 只是吸引注意，没有语义上的重要性 - 斜体使用
<em>而不是<i>，因为 em 是语义上的强调，i 表示不同语气或声音 - 下划线使用
<u>标签 - 删除线使用
<s>标签，表示不再准确或不再相关的内容（如商品原价），表示文档编辑的删除。 而<del>则用于表示从文档中删除的内容，通常与<ins>配合使用，具有更严格的语义
特殊格式标签
- 代码片段使用
<code>标签 - 标记/高亮使用
<mark>标签 - 上标使用
<sup>标签，表示上标（如x²） - 下标使用
<sub>标签，表示下标（如H₂O） - 链接使用
<a href="...">标签
这些语义化标签的使用不仅提高了内容的可访问性， 还确保了在不同设备和环境下的一致表现， 可以解决不同编辑器复制的时候兼容性问题。
三、渲染的数据
TipTap 编辑器支持多种数据格式的输入和输出，这为不同的使用场景提供了灵活性：
支持的数据格式
-
HTML 字符串
- 直接使用 HTML 标签
- 适合与现有 HTML 内容集成
- 示例：
<p>Hello <strong>world</strong></p>
-
JSON 格式
- TipTap 的原生数据格式，基于 ProseMirror 的文档结构
- 包含完整的节点信息和属性
- 适合程序化处理和存储
- 示例：
{ "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "text", "text": "Hello " }, { "type": "text",
"marks": [{ "type": "bold" }], "text": "world" } ] } ] }
3. **Markdown 格式**
- 使用 `@tiptap/extension-markdown` 扩展支持
- 轻量级标记语言，易于阅读和编辑
- 适合文档写作和版本控制
- 示例：`Hello **world**`
**数据转换方法**
TipTap 提供了丰富的数据转换 API，可以轻松在不同格式间转换：
**获取数据**
- `editor.getHTML()` - 获取 HTML 字符串格式
- `editor.getJSON()` - 获取 JSON 格式的文档结构
- `editor.getText()` - 获取纯文本内容
**设置数据**
- `editor.commands.setContent(htmlString)` - 设置 HTML 内容
- `editor.commands.setContent(jsonObject)` - 设置 JSON 内容
- `editor.commands.insertContent(content)` - 插入内容
**示例代码**
```javascript
// 获取不同格式的数据
const htmlContent = editor.getHTML()
const jsonContent = editor.getJSON()
const textContent = editor.getText()
// 设置内容
editor.commands.setContent("<p>Hello <strong>world</strong></p>")
editor.commands.setContent({
type: "doc",
content: [
{
type: "paragraph",
content: [
{ type: "text", text: "Hello " },
{ type: "text", marks: [{ type: "bold" }], text: "world" }
]
}
]
})
// 插入内容
editor.commands.insertContent("<p>New paragraph</p>")
自定义转换
- 支持自定义序列化器和解析器
- 可以扩展支持其他格式（如纯文本、富文本等）
- 可以创建自定义的导出/导入功能
注意事项
- JSON 格式提供了最完整的功能支持
- HTML 格式兼容性最好，适合与现有系统集成
- 高级 Markdown 功能（如表格、任务列表等）可能需要付费插件
四、持久化契约与往返验证
生产系统通常以 JSON 作为可编辑主数据，因为它能保留节点类型、Mark 和扩展属性； HTML 更适合作为渲染或跨系统交换格式， Markdown 适合人类审阅和版本比较， 但不保证覆盖所有富文本能力。 不要把三种格式视为无损等价物，选型前应先列出表格、任务列表、附件、评论等必须保留的节点。
写入数据库前必须使用与编辑器一致的 Schema 校验 JSON，拒绝未知节点和非法属性。 渲染外部 HTML 时还要经过 allowlist 清洗， Schema 校验负责文档结构， HTML 清洗负责脚本、危险 URL 和事件属性， 两者不能互相替代。
升级扩展或 Schema 时应保留一组真实文档做往返测试：加载旧 JSON， 序列化为目标格式， 再重新解析并比较关键节点、属性和纯文本。 测试通过标准不是字符串完全相同，而是业务语义、可编辑性和安全字段没有丢失。
五、动手验证：先跑通 数据结构，再改变一个变量
前面的章节已经建立问题、概念和机制。现在把“数据结构”放进同一套基线中运行；本节不再引入新术语，只验证前文结论能否被复现。
5.1 基线与候选只允许一个变量不同
验证“数据结构”时，先固定运行时版本、页面状态、用户操作、权限设置和持久化数据。候选方案只能改变本次要验证的变量；如果同时更换数据、依赖和配置，即使结果改善，也不能知道是哪一项产生作用。
执行“数据结构”时，动作是：从用户事件回放渲染、进程通信或编辑器事务，覆盖成功与拒绝路径。原始结果不能只保留截图或汇总分数，必须同步保存：DOM 断言、事件序列、事务步骤、IPC 记录、控制台和页面截图，使下一次复查可以在同一输入上重放。
| 实验要素 | 本文要求 |
|---|---|
| 固定条件 | 固定运行时版本、页面状态、用户操作、权限设置和持久化数据 |
| 唯一变量 | 本次候选方案与基线之间的一项明确差异 |
| 原始证据 | DOM 断言、事件序列、事务步骤、IPC 记录、控制台和页面截图 |
| 通过阈值 | 界面状态与数据状态一致，越权输入在产生副作用前被拒绝 |
| 立即停止 | 状态不同步、事件重复、事务丢失、IPC 越权或页面不可交互 |
5.2 执行前先排除不可比较条件
“数据结构”开始前先确认下面四项；任一项不成立，都应先修复实验条件，而不是解释结果。
- 基线能够在“数据结构”的当前环境重复运行。
- 候选只改变一个与“数据结构”结论直接相关的条件。
- “数据结构”的基线和候选使用同一批输入、同一版本依赖与同一通过阈值。
- “数据结构”的原始输出和失败现场不会被重试、格式化或汇总覆盖。
5.3 执行后先核对证据完整性
结果出来后先检查证据，再讨论“数据结构”是否通过。缺少中间状态时，最终输出只能说明现象，不能证明机制。
| 检查项 | 当前文章的判定 |
|---|---|
| 输入可追溯 | 固定运行时版本、页面状态、用户操作、权限设置和持久化数据 |
| 过程可回放 | 从用户事件回放渲染、进程通信或编辑器事务，覆盖成功与拒绝路径 |
| 结果可审计 | DOM 断言、事件序列、事务步骤、IPC 记录、控制台和页面截图 |
“数据结构”的一次合格基线对照按以下顺序执行：
- 保存“数据结构”基线版本及输入摘要，确认基线本身可以重复运行。
- 写下“数据结构”候选方案唯一变化的变量，以及它预期影响的指标。
- 在同一环境执行“数据结构”：从用户事件回放渲染、进程通信或编辑器事务，覆盖成功与拒绝路径。
- 为“数据结构”保存：DOM 断言、事件序列、事务步骤、IPC 记录、控制台和页面截图。
- 使用“数据结构”预登记条件判断：界面状态与数据状态一致，越权输入在产生副作用前被拒绝。
- 如果“数据结构”未通过，不修改第二个变量，先恢复基线并保留失败现场。
六、用一张矩阵验证 数据结构 的关键结论
矩阵按正文顺序列出“数据结构”的结论。一次实验只选择一行，只改变这一行对应的条件；不要把多行合并成一个无法归因的大实验。
| 正文章节 | 已解释的结论 | 本轮唯一变量 | 必须保存的证据 |
|---|---|---|---|
| 插件对应的语义化标签 | 更重要的是为屏幕阅读器和其他辅助技术提供了语义信息。 | 只改变与“插件对应的语义化标签”相关的条件 | DOM 断言、事件序列、事务步骤、IPC 记录、控制台和页面截图 |
| 渲染的数据 | HTML 字符串 -> JSON 格式 -> Markdown 格式 | 只改变与“渲染的数据”相关的条件 | DOM 断言、事件序列、事务步骤、IPC 记录、控制台和页面截图 |
| 持久化契约与往返验证 | 生产系统通常以 JSON 作为可编辑主数据，因为它能保留节点类型、Mark 和扩展属性； | 只改变与“持久化契约与往返验证”相关的条件 | DOM 断言、事件序列、事务步骤、IPC 记录、控制台和页面截图 |
| L1的编辑器抽象了数据和模型 | L1的编辑器抽象了数据和模型，需要开发者清晰的了解数据层，由数据层驱动视图 | 只改变与“L1的编辑器抽象了数据和模型”相关的条件 | DOM 断言、事件序列、事务步骤、IPC 记录、控制台和页面截图 |
| 在 TipTap 编辑器中 | 在 TipTap 编辑器中， | 只改变与“在 TipTap 编辑器中”相关的条件 | DOM 断言、事件序列、事务步骤、IPC 记录、控制台和页面截图 |
| 不同的功能组件对应着不同的语义化 HTML 标签 | 不同的功能组件对应着不同的语义化 HTML 标签， | 只改变与“不同的功能组件对应着不同的语义化 HTML 标签”相关的条件 | DOM 断言、事件序列、事务步骤、IPC 记录、控制台和页面截图 |
6.1 记录本次实际实验
下面的记录用于“数据结构”当前这一次实验，不是第二套知识目录。先从矩阵选择一个章节，再填写实际值；没有填写的字段表示尚未验证。
topic: "数据结构"
selected_chapter: required
claim_from_article: required
baseline_version: required
changed_condition: exactly_one
execution: "从用户事件回放渲染、进程通信或编辑器事务，覆盖成功与拒绝路径"
evidence: "DOM 断言、事件序列、事务步骤、IPC 记录、控制台和页面截图"
pass_when: "界面状态与数据状态一致，越权输入在产生副作用前被拒绝"
stop_when: "状态不同步、事件重复、事务丢失、IPC 越权或页面不可交互"
observed_result: required
first_deviation: null_or_evidence
recovery_replay: required_after_failure
6.2 边界实验必须证明能够停止和恢复
成功路径只能证明“数据结构”在当前样本上工作，不能证明它可以进入生产。边界实验需要主动制造：状态不同步、事件重复、事务丢失、IPC 越权或页面不可交互，并观察系统是否在产生不可逆副作用前停止。
| 场景 | 只改变什么 | 应保存什么 | 通过标准 |
|---|---|---|---|
| 正常路径 | 使用已知有效输入 | DOM 断言、事件序列、事务步骤、IPC 记录、控制台和页面截图 | 界面状态与数据状态一致，越权输入在产生副作用前被拒绝 |
| 边界路径 | 把一个输入推进到约束临界值 | 临界值前后的输出与指标 | 不静默降级，不把部分结果冒充成功 |
| 明确失败 | 注入：状态不同步、事件重复、事务丢失、IPC 越权或页面不可交互 | 原始错误、首个异常阶段和最终状态 | 失败被正确分类且没有扩大副作用 |
| 恢复重放 | 执行：按事件、状态、渲染或进程边界定位第一处偏差并重放 | 原失败样本的复测证据 | 原样本恢复，正常样本没有回归 |
恢复动作不是简单重启。对于“数据结构”，第一步是：按事件、状态、渲染或进程边界定位第一处偏差并重放。完成后使用原始失败样本复测；只验证一个新样本成功，不能证明触发条件已经消失。
“数据结构”边界实验结束后，应把正常、临界、失败和恢复四类记录放在同一个运行批次中。这样才能区分“候选方案真的修复问题”和“环境变化让问题暂时没有出现”。
七、数据结构 的结果解释
解释“数据结构”实验时先看首个偏差，而不是最后一条错误。最后的异常通常只是上游状态错误的结果；从末端反推容易误把症状当根因。
| 观察结果 | 可以支持的判断 | 下一步 |
|---|---|---|
| 主链路没有达到预期 | 状态不同步、事件重复、事务丢失、IPC 越权或页面不可交互 | 先执行：按事件、状态、渲染或进程边界定位第一处偏差并重放 |
| 异常链路无法恢复 | 状态不同步、事件重复、事务丢失、IPC 越权或页面不可交互 | 先执行：按事件、状态、渲染或进程边界定位第一处偏差并重放 |
| 新样本成功但原样本仍失败 | 修复没有覆盖原始触发条件 | 固定原失败输入，恢复基线后重新比较 |
| 指标改善但证据无法回链 | 数据、版本或中间状态没有固定 | 暂停发布，补齐可追溯记录后重跑 |
“数据结构”只有同时满足“界面状态与数据状态一致，越权输入在产生副作用前被拒绝”，并且没有出现“状态不同步、事件重复、事务丢失、IPC 越权或页面不可交互”，才可以认为主链路通过。这里的“通过”只对当前固定版本、样本和环境有效，不能外推到尚未测试的容量、权限或数据分布。
如果“数据结构”候选方案与基线差异很小，先检查证据分辨率是否足够；如果差异很大，先排除数据泄漏、环境漂移和版本不一致。两种情况都不能只看一个汇总均值，需要回到逐样本输出和中间状态。
“数据结构”故障定位完成后，记录“现象、首个偏差、根因、改动、原样本复测”五项。缺少原样本复测时，只能标记为待观察，不能标记为已解决。
八、数据结构 的发布判断
发布判断需要把“数据结构”的质量、失败边界和恢复能力放在同一份记录中。以下任一条件缺失，都应停止扩量，而不是用“基本正常”替代证据。
- “数据结构”的基线与候选只存在一个计划内变量。
- “数据结构”的输入、代码、依赖、配置和数据版本可以追溯。
- “数据结构”的正常、临界、失败和恢复样本使用同一套断言。
- “数据结构”的原始输出、中间状态和失败现场已经保留。
- “数据结构”的日志、Trace、截图和测试数据已经脱敏。
- “数据结构”的停止条件、负责人和回滚入口已经演练。
- “数据结构”尚未覆盖的输入、权限、容量和外部依赖已经登记。
最终记录至少包含基线版本、唯一变量、原始证据、首个偏差、恢复复测和发布责任人。没有参与本次修改的人如果不能据此重放“数据结构”的判断，就不能发布。
九、总结
- 插件对应的语义化标签：在 TipTap 编辑器中，不同的功能组件对应着不同的语义化 HTML 标签，这些标签不仅提供了视觉样式，更重要的是为屏幕阅读器和其他辅助技术提供了语义信息。
- 格式选型：JSON 适合作为可编辑主数据，HTML 适合渲染与系统交换，Markdown 适合审阅，但三者不能假定无损互转。
- 安全边界：Schema 校验负责节点结构，HTML allowlist 清洗负责脚本、危险 URL 和事件属性，两者必须同时存在。
- 升级验证：用真实旧文档执行解析、序列化和再次解析，确认关键节点、属性、纯文本与可编辑性没有退化。
学完自测
选择所有正确答案；提交后逐项核对判断依据。