insertAdjacentText无法在光标处插入文本，因其仅支持元素边界四个固定位置；应在编辑器中使用Selection+Range API，通过getSelection获取范围并用insertNode/insertData精确插入。
Element.insertAdjacentText 不能在光标处插入文本——它只按元素边界定位，和光标位置无关。想在编辑器光标处插文本，得用 document.execCommand（已废弃但仍有兼容需求）、Selection + Range API，或现代 contenteditable 配合 insertNode / insertData。
为什么 insertAdjacentText 不适用于光标插入
它操作的是整个 DOM 元素的四个固定锚点：beforebegin、afterbegin、beforeend、afterend。这些位置和用户当前光标在哪毫无关系。哪怕你选中了某段文字，insertAdjacentText 仍只会把文本塞到元素外侧或首尾，不会“粘”在光标点上。
常见误判现象：
- 调用
el.insertAdjacentText('beforeend', 'x')后文本总出现在元素最末，而非光标所在行/词中间 - 对
contenteditable="true"的div使用该方法，结果破坏了选区、清空了光标状态 - 试图用
getSelection().anchorNode.parentElement找到父元素再调用，依然无法精确定位到光标字符级偏移
光标处插入文本的可靠路径：Selection + Range
核心思路是获取当前选区（Selection），拿到光标所在的 Range，再用 range.insertNode() 或 range.insertData() 插入内容。注意：insertData 只适用于文本节点，insertNode 更通用。
实操要点：
- 必须先检查
getSelection()是否有效且有焦点，否则range可能为null - 若光标落在非文本节点（如
div、p）上，需用range.surroundContents(document.createTextNode(''))强制创建一个空文本节点，再插入 - 插入后建议调用
range.collapse(false)把光标移到新文本末尾，避免重复触发 - 不要直接修改
innerHTML或用insertAdjacentText，会丢失当前选区并重置光标
简例（插入纯文本）：
function insertAtCaret(text) {
const sel = window.getSelection();
if (!sel.rangeCount) return;
const range = sel.getRangeAt(0);
const textNode = document.createTextNode(text);
range.deleteContents();
range.insertNode(textNode);
range.collapse(false);
}
contenteditable 编辑器中的边界情况处理
真实编辑器里光标可能处于各种边缘状态，容易出错：
- 光标在空
<p></p>中：此时anchorNode是p元素，不是文本节点，需先appendChild(document.createTextNode(''))再取firstChild构造 range - 跨元素选区（如选中部分
span+ 部分div）：range.toString()可读但不可安全插入；应优先降级为光标位置（collapseToStart()）再操作 - 输入法 IME 活跃时（如中文拼音输入中），
selectionchange事件可能被抑制，需监听compositionstart/compositionend做缓冲 - 移动端 Safari 对
Range的setStart支持不稳定，建议 fallback 到execCommand('insertText', false, text)（仅限简单场景）
要不要用 execCommand？谨慎对待
document.execCommand('insertText', false, text) 看似简单，但它已被标准弃用，Chrome 已移除部分支持，Firefox 仅保留基础能力。它的行为不透明：
- 不保证插入位置精确到字符偏移，尤其在嵌套内联元素中会“跳格”
- 无法控制插入后的光标位置（比如希望光标停在插入文本中间）
- 在 Shadow DOM 或 iframe 中可能完全失效
- 若编辑器用了自定义格式（如 Slate、Draft.js），它会绕过 editor state，导致视图与数据不一致
结论：仅用于原型验证或遗留系统兜底，生产环境应坚持 Selection + Range 路线，并封装好空节点、IME、跨浏览器差异等细节。
真正难的不是“怎么插”，而是“插完光标还在原位、选区没丢、格式不崩、输入法不卡”。这些细节藏在 Range 的边界判断和节点类型检查里，漏掉任意一环，用户就会感觉编辑器“抽风”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
