JavaScript中可通过BOM的window.getSelection()与Range API精准控制contenteditable元素光标位置并插入内容：先获取选区判断是否为空，再创建Range定位到光标处，最后插入文本或HTML节点并重置选区聚焦。
在JavaScript中，通过BOM的window.getSelection()配合Range API，可以精准控制富文本编辑框（如contenteditable元素）中光标位置，并实现文本、HTML片段或自定义节点的插入。关键在于获取当前选区、判断是否为空、创建并插入新内容，同时保持光标位于插入点之后。
获取并判断当前光标位置
getSelection()返回一个Selection对象，代表用户当前选中的内容；若无选中（即纯光标），则其rangeCount === 0或toString()为空字符串。需注意：即使光标停在空白处，也可能存在长度为0的Range。
- 调用
const sel = window.getSelection()获取选区 - 检查
sel.rangeCount > 0，再用sel.getRangeAt(0)取得首个Range - 避免直接操作
sel.anchorNode等属性——它们可能指向深层文本节点，不易安全插入
创建新Range并定位到光标处
若选区为空（即用户只点击未选中），应基于当前焦点位置构造一个“折叠”Range（collapsed === true），确保插入点准确。
- 用
const range = document.createRange()新建Range - 调用
range.selectNodeContents(node)或range.setStart(node, offset)精确定位 - 更稳妥方式：
range.collapse(true)使光标落在起点，collapse(false)落在终点 - 对
contenteditable元素，推荐先聚焦再获取选区，避免浏览器兼容性问题
插入文本或HTML节点
Range提供insertNode()和deleteContents()等方法，但插入文本建议用insertNode()包裹Text节点，插入HTML片段则先用DOMParser或innerHTML转为节点再插入。
立即学习“Java免费学习笔记（深入）”；
- 插入纯文本：
range.insertNode(document.createTextNode('hello')) - 插入HTML：
const div = document.createElement('div'); div.innerHTML = '<b>bold</b>'; range.insertNode(div) - 插入后光标默认停留在插入内容末尾，如需回到开头，可重新创建Range并
collapse(true) - 避免直接修改
innerHTML——会破坏已有Range引用，导致后续操作失效
恢复选区并聚焦编辑区域
插入完成后，需手动将选区重置到新位置，否则光标可能丢失或停留在错误节点。
- 清除旧选区：
sel.removeAllRanges() - 将新Range加入选区：
sel.addRange(range) - 确保编辑容器已
focus()，尤其在事件回调（如按钮点击）中，否则部分浏览器不触发光标渲染 - 对移动端或iframe场景，注意
document.activeElement是否为目标元素
整个流程不依赖第三方库，核心就是“取选区→建Range→插内容→设光标”。只要注意节点归属（避免跨文档操作）、Range生命周期（插入后及时更新）、以及contenteditable的样式继承问题，就能稳定实现精准插入。
