contenteditable 无法直接 dom diff，因其无虚拟树、不存快照、无 patch 接口；htmldiff.js 需先标准化输入，否则未转义字符易导致崩溃。
contentEditable 里没法直接做 DOM diff
浏览器原生的 contentEditable 没有虚拟节点树、不保存快照、也不提供 patch 接口。你每次读 el.innerHTML，浏览器都可能自动补 <tbody>、重排属性顺序、折叠空白文本节点——导致两次字符串比对永远不等。所谓“差量更新”，其实是 JS 库在 DOM 外部做的字符串或 AST 级比对，不是编辑器本身的能力。
<h3>
<a style="color:#f60; text-decoration:underline;" title="html" href="https://m.php.cn/zt/15763.html" target="_blank">html</a>diff.js 的输入必须先标准化</h3>
<p>直接把用户输入的 textarea 值喂给 <code>htmldiff() 很容易崩：未转义的 & 或 会被浏览器误解析；<code><script>alert(1)</script> 这种片段会执行或破坏结构。正确做法是：
- 用
DOMParser解析原始 HTML 字符串，再用new XMLSerializer().serializeToString()序列化成标准格式 - 过滤掉
<script></script>和<style></style>标签内容（它们只被当整体 token 处理，内部逻辑不会 diff） - 限制输入长度 ≤50KB，或加
Diff_Timeout = 1000防卡死
diffHTML 不适合接管 contentEditable
diffHTML 是渲染库，不是编辑器插件。它需要你定义组件函数、管理状态、显式调用 createRoot().render()。它能做的事是：
- 把预览 iframe 或 div 当作一个独立渲染根节点，做视图级局部更新
- 维持滚动位置、焦点、表单值等 UI 状态
但它不能监听光标移动、处理选区、拦截 paste 事件——这些都得靠 contentEditable 自身机制，diffHTML 插不上手。
真协作场景下 DOM 差量更新几乎不可行
多人同时编辑同一段 HTML，靠前端 diff 几乎必然冲突。实际可行路径只有两条：
- 后端托管 Git 仓库，前端只发两个版本字符串过去，由服务端跑
git diff --no-index+ patch，返回带<ins></ins>/<del></del>的 HTML 片段 - 用 OT（Operational Transformation）或 CRDT 算法同步操作指令（比如 “在第 12 行插入
<p>hi</p>”），而不是 diff DOM 结构
DOM 节点本身没有稳定 identity，id 可能重复、data-key 可能被删，连“哪个节点是原来的”都难判定——这才是最常被忽略的底层约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
