直接调用 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 或代理对要小心）

简单场景示例（假设只有单个文本子节点）：

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)

注意：插入的节点若含块级元素（如 ），可能破坏行内编辑流，建议统一用 包裹样式化内容。

选区跨标签时 getRangeAt(0) 返回的 startContainer 是啥