直接调用 window.getSelection() 可获取当前选区，但 iframe 中需用 iframe.contentDocument.defaultView.getSelection()；监听事件后应使用 queueMicrotask 延迟读取以避免获取旧选区；定位光标需创建 Range 并操作文本节点；insertHTML 已废弃，应手动操作 Range 插入内容；跨标签选区的 startContainer 是起始字符所在最深文本节点，还原选区时节点引用易失效，宜用文本位置映射或 cloneContents。
getSelection() 和 window.getSelection() 怎么用才不丢焦点
直接调用 window.getSelection() 能拿到当前页面的选区对象，但要注意：如果编辑器是 contenteditable="true" 的 div 或 iframe 中的文档，必须确保调用时上下文正确——在 iframe 场景下得用 iframe.contentDocument.defaultView.getSelection()，否则返回空或主窗口选区。
常见错误是监听 input 或 keyup 后立刻读取，结果拿到的是「上一次」的选区。因为 DOM 更新和选区同步有微小延迟。稳妥做法是包裹在 setTimeout(..., 0) 或用 queueMicrotask：
element.addEventListener('input', () => {
queueMicrotask(() => {
const sel = window.getSelection();
if (sel.rangeCount > 0) {
const range = sel.getRangeAt(0);
console.log(range.startOffset, range.endOffset);
}
});
});
如何把光标定位到指定位置（比如第 n 个字符后）
不能直接设“字符偏移”，得先创建 Range，再用 Selection.removeAllRanges() + Selection.addRange()。关键点在于：目标节点必须是文本节点（Text），不是 div 或 p 这类元素节点。
- 若编辑器内容扁平（单个
div里全是纯文本），可用element.firstChild获取唯一文本节点 - 若含 HTML（如加粗、换行），需递归遍历所有文本节点，按字符累计找到对应节点和偏移
-
range.setStart(node, offset)的offset是从节点开头算的 Unicode 码点位置，不是字符串索引（遇到 emoji 或代理对要小心）
简单场景示例（假设只有单个文本子节点）：
立即学习“Java免费学习笔记（深入）”；
function setCursorAt(element, charIndex) {
const textNode = element.firstChild;
if (textNode && textNode.nodeType === Node.TEXT_NODE) {
const range = document.createRange();
range.setStart(textNode, Math.min(charIndex, textNode.length));
range.collapse(true);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}
insertHTML() 插入内容后光标位置怎么不乱
document.execCommand('insertHTML', false, htmlStr) 已废弃，且插入后光标常落在 HTML 末尾或不可预期位置。更可靠的是手动操作 Range：
- 先保存当前选区的
range - 用
range.deleteContents()清空选中内容（如有） - 用
range.insertNode()插入新节点，或range.insertNode(document.createTextNode(str))插入文本 - 插入后，光标默认在新内容末尾；若要落在开头，需重新创建 range 并
collapse(false)
注意：插入的节点若含块级元素（如 <div>），可能破坏行内编辑流，建议统一用 <span> 包裹样式化内容。
选区跨标签时 getRangeAt(0) 返回的 startContainer 是啥
当用户拖选跨越多个元素（例如从 <strong>abc</strong>def<em>ghi</em> 的 b 到 h），range.startContainer 不一定是最外层容器，而是实际起始字符所在的**最深文本节点**。比如选中 “cde”，起始在 <strong> 的文本子节点，结束在父 div 的文本子节点（如果有的话）或 <em> 内节点。
这意味着不能假设 startContainer === endContainer。处理选区文本时，应始终用 range.toString() 取值，而不是拼接不同节点的 nodeValue —— 后者会漏掉标签间空白或格式信息。
真正棘手的是还原选区：如果编辑器做了结构修改（如实时语法高亮重写 DOM），原有文本节点被替换，之前存的 startContainer 引用就失效了。此时必须结合文本位置映射或使用 range.cloneContents() 快照，而非依赖节点引用。
