如何在点击contenteditable元素内图片后获取并设置光标到图片右侧

我来帮你搞定这两个关于contenteditable元素里光标操作的问题，直接上实用的解决方案和代码：

1. 获取图片右侧的光标位置 #

当点击contenteditable区域内的图片时，我们可以借助Range API精准定位图片右侧的光标位置。核心思路是：找到被点击图片的父容器，创建Range对象后，将其起始/结束位置设置为父容器的相邻右侧节点位置，以此得到图片右侧的光标坐标。

2. 将插入符设置到图片右侧 #

同样依靠Selection和Range API实现：在图片点击事件触发后，创建Range并定位到图片的右侧位置，再通过Selection对象选中这个Range，就能把光标直接移到图片右边。

完整实现代码 #

HTML 代码

<div class="demo" contenteditable="true"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

CSS 代码

.demo { 
  height: 100px; 
  background: #dadadada; 
  padding: 10px;
}
img { 
  border: 1px solid red; 
  display: inline-block; 
  height: 30px; 
  width: 30px; 
  margin-right:3px; 
  cursor: pointer;
}

JavaScript + jQuery 代码

// 先往contenteditable区域插入几张示例图片
for (let i = 1; i <= 5; i++) {
  $('.demo').append('<span><img src="https://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg"/></span>')
}

// 给所有图片绑定点击事件
$('.demo img').on('click', function(e) {
  e.preventDefault();
  const imgElement = this;
  const parentSpan = imgElement.parentNode;
  const nextNode = parentSpan.nextSibling;
  
  // 创建Range对象用于定位光标
  const range = document.createRange();
  const selection = window.getSelection();
  
  // 处理两种场景：父容器有后续节点/父容器是最后一个元素
  if (nextNode) {
    range.setStartBefore(nextNode);
  } else {
    range.setStartAfter(parentSpan);
  }
  range.collapse(true);
  
  // 获取并打印图片右侧的光标位置
  const caretPosition = range.startOffset;
  console.log('图片右侧的光标位置:', caretPosition);
  
  // 将插入符设置到图片右侧
  selection.removeAllRanges();
  selection.addRange(range);
});

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