因为浏览器将 innerhtml = ... 视为粗暴替换 dom 子树而非用户编辑操作，原有 selection 状态被清空，新节点无光标继承，导致光标跳至开头或末尾。
为什么直接赋值 innerHTML 会导致光标丢失
因为浏览器不会把 innerHTML = ... 视为一次“用户编辑操作”，它只是粗暴替换 DOM 子树，原有 selection 状态被清空，且新插入的节点没有继承光标位置。即使你刚点完某个字、光标还在那里，一执行这行代码，光标就掉到开头或末尾。
常见场景包括：防抖保存快照、粘贴清洗后重置内容、格式化回调里强行更新 HTML。这些操作都会让 getSelection() 返回空 range 或无效节点引用。
- 避免在
input事件里直接写el.innerHTML = el.innerHTML—— 这是典型陷阱 - 若必须更新结构，优先用
textContent+ 手动插入换行（<br>）或增量 patch，而非全量重写 - 所有涉及 DOM 替换的操作，必须配套调用
saveSelection()→ 修改 →restoreSelection()三步闭环
getSelection() 和 Range 怎么序列化才可靠
不能只存 startOffset 和 endOffset，因为 offset 是相对于父节点的文本长度，一旦 DOM 结构变动（比如加了个 <strong></strong>），相同 offset 可能指向完全不同的字符。
真正可复原的序列化方式是记录路径 + 偏移：把 range.startContainer 从 contenteditable 根节点开始，逐级向上找 parentIndex，最终得到类似 [0, 1, 2] 的数组，再配合 startOffset。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 使用
Node.compareDocumentPosition()判断节点是否在编辑器内，避免序列化外部节点 - 对
Text节点，直接用node.textContent截取前后文做 fallback 定位（防止路径失效） - 别忘了同时保存
range.collapsed—— 光标闪烁和选中状态行为完全不同
撤销栈该存 DOM 快照还是命令对象
存完整 innerHTML 看似简单，但会迅速吃光内存，且无法还原焦点、事件监听器、iframe 内容、shadow DOM 状态。更致命的是：不同浏览器对空格、换行、零宽字符的处理差异，导致快照不可比对。
命令模式才是生产环境首选：每个操作封装成可逆对象，例如 { type: 'insert', node: p, offset: 5, text: 'abc' }，undo() 方法负责反向删除。
- 对样式操作（加粗/列表），记录变更前后的 classList、style 属性差值，而不是 HTML 字符串
- 中文输入法下，
compositionend后必须立即 push 命令，否则用户按 Ctrl+Z 会撤掉整个输入过程而非单字 - 避免深拷贝整个 DOM 树；
structuredClone()在 Safari 16.4+ 才可用，旧版本需手写浅克隆逻辑
为什么必须拦截 Ctrl+Z 和 Ctrl+Y
不拦截就会出现 JS 撤销和浏览器原生撤销互相打架：你点一次 undo 按钮没反应，再按一次才生效；或者光标突然跳到段首，接着 Ctrl+Z 又回退到上一步——这是两个独立栈在争抢控制权。
拦截不是简单阻止，而是统一入口：所有撤销动作都走你的栈，包括快捷键、按钮、甚至右键菜单里的“撤销”项。
- 用
keydown监听，条件是(e.ctrlKey || e.metaKey) && ['z', 'y'].includes(e.key) - 注意
Ctrl+Shift+Z在 Windows/Linux 是重做，macOS 是Cmd+Shift+Z，都要覆盖 - 拦截后必须调用
e.preventDefault()，否则原生行为仍会触发，尤其在 Safari 中极易漏掉
<br> 都会让序列化坐标失效。别指望一次序列化一劳永逸，得配 fallback 文本匹配和容错重建逻辑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
