如何在HTML的contenteditable div中动态将图片插入当前光标位置？

你当前的实现存在三个核心问题导致插入位置异常：

1. 图片设置了position: absolute，脱离正常文档流，无法推动周围文本自动移位
2. 直接调用editor.appendChild(image)会固定把元素追加到编辑器末尾，和光标位置无关
3. getCaretPosition返回的是相对于浏览器视口的坐标，没有考虑编辑器自身的定位偏移、滚动偏移，计算结果本身就存在误差

完全不需要手动计算光标坐标，直接使用浏览器原生的RangeAPI即可实现和普通文本插入完全一致的效果，图片会自动插入到光标位置，周围文本自动后移腾出空间。

代码修改 #

1. 可选CSS调整（非必须，仅为后续扩展性考虑） #

给编辑器添加相对定位，避免后续如果有浮动定位需求时坐标计算异常：

#editor {
    height: 88vh;
    font-size: 0.8em;
    position: relative; /* 新增 */
}

2. JavaScript逻辑重写 #

不需要保留原来的getCaretPosition函数，直接替换事件监听逻辑即可：

const editor = document.getElementById('editor');

editor.addEventListener(
  'keydown',
  (event) => {
    // 匹配Ctrl+Q组合键，不区分大小写
    if (event.ctrlKey && event.key.toLowerCase() === 'q') {
      // 阻止默认行为，避免触发浏览器自带快捷键
      event.preventDefault();

      // 创建图片元素
      const image = document.createElement('img');
      image.src = 'img/bird.jpg';
      image.style.width = '200px';
      // 保证图片左上角和光标顶部对齐，可根据需求调整为middle/bottom等
      image.style.verticalAlign = 'top';

      // 获取当前选区
      const selection = window.getSelection();
      if (selection.rangeCount === 0) return;

      // 获取光标所在的范围对象
      const range = selection.getRangeAt(0);
      // 将图片插入到光标位置
      range.insertNode(image);
      // 把光标移动到图片后方，方便后续继续输入
      range.setStartAfter(image);
      range.collapse(true);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  },
  false
);

该方案完全依赖浏览器原生排版能力，适配所有场景：

• 空行、任意段落、行首/行中/行尾都可以正确插入
• 图片作为正常文档流元素，会自动推开周围文本，和普通粘贴内容的表现完全一致
• 自动适配编辑器滚动、页面缩放等场景，不会出现位置偏移

内容的提问来源于stack exchange，提问作者Taslim A. Khan