序列化、反序列化与安全边界
1. 双向转换是核心能力,不是附属功能
Plate 在 core 中内建了 HTML parser 插件能力(HtmlPlugin),并通过插件 parsers 实现节点级反序列化规则扩展:
packages/core/src/lib/plugins/html/HtmlPlugin.ts- 各节点插件通过
parsers.html.deserializer.rules声明匹配规则
这意味着转换链路与插件生态是统一模型,而不是独立工具函数。
2. 反序列化机制要点
典型路径:
- 接收 HTML 字符串
parseHtmlDocument- 调用
api.html.deserialize({ element: document.body }) - 各插件按规则参与节点构建
这让插件作者可以定义自己节点的导入行为(如 table、link、mark)。
3. 安全边界:dangerouslyAllowAttributes
在 BasePlugin.node 里专门有 dangerouslyAllowAttributes,并带了非常明确的安全警告(XSS、隐私泄露风险)。
表格插件是一个实际示例:
BaseTableCellPlugin允许colspan/rowspan属性用于语义映射- 路径:
packages/table/src/lib/BaseTablePlugin.ts
这体现了 Plate 的态度:给能力,但把风险显式暴露,不做“默认全放开”。
4. 常见误区
误区 A:序列化就是把 JSON stringify
错。编辑器场景需要处理:
- 结构语义(节点类型/嵌套关系)
- 属性安全(allowlist)
- 插件扩展(不同节点可插拔)
误区 B:导出链路可直接复用编辑链路插件
Issue #2804 说明:编辑态插件可能依赖 React/hook 或 DOM 行为,不一定适合静态导出链路。
5. 推荐的工程实践
- 建立独立导出插件清单(无 UI 依赖)
- 严格控制允许透传的 HTML attributes
- 对外部 HTML 入口做 schema-level 检查(不仅靠浏览器 parser)
小结
Plate 的序列化体系本质是“插件驱动的数据转换引擎”,同时在源码层面把安全问题显式前置,这是它适合生产场景的重要原因。