双击启用后光标跳开头需手动构造Range：先确保渲染完成，再用getSelection和createRange精确定位，结合caretPositionFromPoint获取点击点；contenteditable切换前应清空冗余节点；末尾定位需selectNodeContents后collapse(false)，空内容时插入零宽空格；框架中innerHTML更新会导致光标丢失，应增量更新或缓存位置重置。
双击启用后光标总跳到开头？别直接调用 focus()
直接 el.focus() 只是让元素获得焦点，不控制光标落点。浏览器会按默认策略（比如首个文本节点起始、空 <p></p> 后崩溃、或上次 selection 缓存）决定位置，结果不可控。
必须在 contenteditable="true" 生效后，手动构造 Range 并注入 Selection：
- 先确保元素已渲染且可交互（建议加
setTimeout(..., 0)或监听transitionend） - 用
window.getSelection()获取当前 selection 对象 - 用
document.createRange()创建 range，再通过range.setStart(node, offset)精确锚定 - 对双击事件，可用
event.clientX/Y配合document.caretPositionFromPoint()（Chrome/Firefox）或document.caretRangeFromPoint()（旧 Safari）获取点击处的 node + offset
contenteditable="false" 切换为 true 后光标消失？检查 DOM 结构污染
常见原因是：切换前 DOM 已含空行、零宽字符、<br>、嵌套 <div> 或 <p>，导致 Range 无法合法 collapse。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 切换前清空冗余子节点：
el.innerHTML = el.textContent || ''（保留纯文本结构） - 避免用
innerHTML = ' '占位——它会创建不可编辑的文本节点，干扰 range 定位 - 若需保留格式，优先用
textContent提取内容，再用insertAdjacentHTML('beforeend', ...)重建干净结构 - 禁用状态时务必加
user-select: none和[contenteditable="false"]::selection { background: transparent }，否则双击前可能意外触发 selection
想把光标固定在末尾？别只靠 collapse(false)
range.collapse(false) 是必要步骤，但不是充分条件。如果目标元素内没有可折叠的文本节点（比如全是空 <span> 或 <img>），该操作会失败或静默忽略。
安全写法：
- 先调用
range.selectNodeContents(el)选中全部内容 - 再
range.collapse(false)折叠到末尾 - 但注意：若
el内容为空，selectNodeContents会返回空 range，需 fallback 到插入一个（零宽空格）后再操作 - 最后必须执行
sel.removeAllRanges(); sel.addRange(range)，漏掉removeAllRanges在 Safari 下极易失效
Vue/React 中 v-html 或 innerHTML 动态更新后光标乱跑？这是数据流劫持问题
框架重写 innerHTML 会销毁原有 DOM 节点，导致 selection 失效，光标强制回退到首字符——这不是浏览器 bug，而是 DOM 替换的必然行为。
绕过方式只有两个：
- 改用
textContent更新（牺牲 HTML 格式），再手动恢复光标（需提前缓存位置） - 若必须用 HTML，改用
el.firstChild?.replaceWith(...)或el.childNodes.forEach(...)增量更新，避免整段替换 - 在框架生命周期钩子（如 Vue 的
updated、React 的useEffect）里延迟恢复光标，且仅在用户未主动输入时执行（监听input事件并设防抖 flag）
最易被忽略的一点：所有基于 Range 的操作，都依赖当前 DOM 节点未被 GC 或移出文档流。任何异步更新、v-if 切换、或父级 innerHTML 重写，都会让之前保存的 node 引用失效——必须在每次操作前重新 querySelector 或绑定事件委托。
