如何在contenteditable div的光标位置插入拖拽转换后的纯文本？

嘿，我来帮你搞定这个拖拽插入光标位置的问题！你现在的代码是直接把文本追加到目标div的末尾，而不是光标所在的位置，核心问题是拖拽过程中window.getSelection()确实容易拿不到正确的选区状态——毕竟浏览器在拖拽时会干扰选区的正常获取。

这里有个可靠的解决方案，既能把拖拽的HTML转成纯文本，又能精准插入到鼠标落下的光标位置：

修改后的完整代码 #

function drop(e) {
  e.preventDefault();
  
  // 1. 获取拖拽数据，优先处理HTML并转成纯文本
  let data = e.dataTransfer.getData("text/html");
  if (data) {
    // 把HTML解析成纯文本
    const parser = new DOMParser();
    const htmlDoc = parser.parseFromString(data, "text/html");
    data = htmlDoc.body.textContent.trim();
  } else {
    //  fallback到纯文本数据
    data = e.dataTransfer.getData("text").trim();
  }
  
  if (!data) return false; // 空数据直接返回
  
  // 2. 获取鼠标落点的光标范围（这是精准插入的关键）
  let range;
  try {
    // 根据鼠标位置创建选区范围
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
  } catch (err) {
    // 兼容旧浏览器或异常情况，默认插入到元素末尾
    range = document.createRange();
    range.selectNodeContents(e.target);
    range.collapse(false);
  }
  
  if (!range) return false;
  
  // 3. 清空选中内容（如果有的话），插入纯文本
  range.deleteContents();
  const textNode = document.createTextNode(data);
  range.insertNode(textNode);
  
  // 4. 调整光标到插入文本的后面，提升体验
  range.collapse(false);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  
  e.target.normalize();
  return false;
}

div {border: 1px solid #000;padding: 10px; margin: 10px 0;}

<h3>Source</h3>
<div contenteditable>
  <span style="color:#3366bb">Dummy <b>formatted</b> text</span>
</div>
<h3>Target div</h3>
<div contenteditable ondrop="drop(event)" ondragover="event.preventDefault()">
  Drag and drop any formatted text in the middle of <i>this</i> paragraph
</div>

关键改进点说明 #

• HTML转纯文本：用DOMParser把拖拽来的HTML内容解析成文档，再提取textContent，确保插入的是无格式的纯文本。
• 精准获取光标位置：用document.caretRangeFromPoint()根据鼠标落下的坐标创建选区范围，比直接用window.getSelection()更可靠，因为拖拽时选区状态可能被浏览器重置。
• 光标位置优化：插入文本后把光标移到文本末尾，和正常输入体验一致，不会让光标跳到奇怪的地方。
• 兼容性处理：加了异常捕获，万一caretRangeFromPoint不支持，就默认插入到元素末尾，避免报错。

试一下这个代码，不管你把文本拖拽到目标段落的哪个位置，纯文本都会精准插入到光标/鼠标落点处啦！

内容的提问来源于stack exchange，提问作者Lore