Range 的 offset 是相对于 startContainer 的子节点索引或文本偏移，而非编辑器根节点的全局字符位置；需递归遍历 DOM 计算从根到光标的 Unicode 字符数，并统一处理 <br>、空白符和不可编辑节点。
selection.getRangeAt(0) 返回的 range 为什么 offset 不等于光标位置？
直接调用 selection.getRangeAt(0) 获取 range 后读取 range.startOffset，常得到意外值——比如在 <p>abc</p> 中光标停在 b 后，startOffset 却是 2（正确），但若段落含 <strong> 或换行符，它就指向父节点（如 <p>）的子节点索引，而非整个文本内容的字符偏移。本质是：Range 的 offset 是相对于其 startContainer 的，不是相对于整段可编辑文本。
真正需要的是「从编辑器根节点开头到光标位置的 Unicode 字符数」，得自己递归计算。
- 先用
selection.anchorNode和selection.anchorOffset定位光标所在 DOM 节点和局部偏移 - 向上遍历所有前序兄弟节点（包括文本节点、
<br>、空格等），累加它们的「可视化长度」 - 对非文本节点（如
<img>、<span contenteditable="false">），按实际渲染占位计为 1 个“逻辑位置”（常见策略） - 注意
white-space: pre-line下的换行符是否应计入——通常要，因为用户按 Enter 会产生<br>或块级换行
contenteditable 元素内 getSelection() 为空的常见原因
光标明明在编辑器里，getSelection() 却返回空或 rangeCount === 0，大概率是以下之一：
- 编辑器容器未设置
contenteditable="true"，或被父级pointer-events: none阻断 - 触发时机太早：在
input或keydown事件中立即调用，此时浏览器尚未更新 selection（尤其 Safari）；应改用setTimeout(..., 0)或监听selectionchange - 用户拖选时松开鼠标前触发了其他 focus/blur，导致 selection 被清空（如弹出 tooltip）
- Chrome 下 iframe 内的 contenteditable 若未显式 focus 过，首次 selection 可能延迟一帧
处理 <br> 和连续空白符时的字符计数陷阱
HTML 编辑器里，<br> 渲染为换行，但 DOM 中它是独立节点；而多个空格、制表符在渲染时可能被折叠（white-space: normal）。这时「光标偏移量」该按 DOM 结构算，还是按渲染后文本算？取决于用途：
立即学习“前端免费学习笔记（深入）”；
- 做语法高亮或分词定位 → 用渲染后纯文本（
element.innerText+ 逐字符映射），但需同步维护 DOM 到文本的偏移映射表（开销大） - 做光标恢复、插入位置计算 → 用 DOM 结构偏移更稳定，把
<br>当作 1 字符，把textContent中保留） - 特别注意：
innerText会忽略display: none和visibility: hidden节点，但textContent不会——若编辑器有隐藏 toolbar 按钮，别误用innerText
用 Range.prototype.getBoundingClientRect() 辅助验证光标坐标
仅靠字符偏移无法知道光标在屏幕上的真实位置。当需要将偏移量转为浮层（如 suggestion dropdown）的 top/left 时，range.getBoundingClientRect() 是最可靠依据：
- 必须确保 range 已 attach 到文档（不能是 detached node）；否则返回空 rect
- 对 collapsed range（即光标），Chrome/Firefox 返回的 rect 高度可能为 0，建议 fallback 到
range.getClientRects()[0]（返回第一个 clientRect） - 如果编辑器用了
transform: scale()或滚动容器，需手动叠加getBoundingClientRect()相对于 viewport 的偏移 - 示例：获取光标底部中间点作为浮层锚点 ——
const rect = range.getBoundingClientRect(); const x = rect.left + rect.width / 2; const y = rect.bottom;
DOM 偏移量本身不难算，难的是在各种编辑行为（粘贴 HTML、undo/redo、协作光标）下保持一致性。每次修改结构后，最好用 range.cloneContents() 对比前后文本快照，避免因节点重排导致偏移错位。
