Javascript 如何将插入符号定位到内容编辑器中的img之后

我试图将光标定位到contenteditable中给定元素的后面。 我可以看到如何对标记的节点执行此操作，但对标记不起作用

我的密码是：

function setCaretAtStartEnd( elem, atEnd ){
   const sel = document.getSelection();
   var  node = elem.firstChild;

   if( sel.rangeCount ){
       if (atEnd) sel.getRangeAt(0).setEnd(node, node.length);
       else sel.getRangeAt(0).setEnd(node, 0);
   }
}

可以在其上找到一个运行版本，适用于1和3，但不适用于2（可能是因为2是一个标记）

那么，如何调整代码以使“两个”按钮正常工作呢

谢谢

---

Abe

我已经修改了小提琴，告诉我它是否适合你想要做的，我已经用id

two

qd将图像包装在一个div中，并将其从

img

元素中删除。因此，第一个按钮起作用，我还添加了一个函数，将光标定位在图像之后

  function doEndImg(id){
     var imgElement = document.getElementById(id)
     var s = window.getSelection();
     if(s.rangeCount > 0) s.removeAllRanges();
     var range = document.createRange();
     range.selectNode(imgElement);
     s.addRange(range)
  } 

函数doStart（elemId）{
const elem=document.getElementById（elemId）；
setCareTaStartEnd（elem，false）；
}
函数doEnd（elemId）{
const elem=document.getElementById（elemId）；
SetCareTaStartEnd（元素，真）；
}
函数setCareTaStartEnd（节点，atEnd）{
const sel=document.getSelection（）；
var node=node.firstChild；
如果（选择范围计数）{
if（atEnd）sel.getRangeAt（0）.setEnd（node，node.length）；
else sel.getRangeAt（0）.setEnd（节点，0）；
}
}
函数doEndImg（id）{
var imgElement=document.getElementById（id）
var s=window.getSelection（）；
如果（s.rangeCount>0）s.removeAllRanges（）；
var range=document.createRange（）；
range.selectNode（imgElement）；
s、 添加范围（范围）
}

[contenteditable]{填充：5px；边框：1px纯灰；边框半径：9px；；}
div{margin:10px；}
img{宽度：10%；高度：自动}

一个
三个

一个
移动插入符号以开始
将插入符号移到末尾
两个
移动插入符号以开始
将插入符号移到末尾
三
移动插入符号以开始
将插入符号移到末尾

JsFiddle链接死了对不起-我有一个错误；在stack确定的链接的末尾是URL。我已经调整了职位-（我没有看到提琴的变化-它有新的URL吗？检查提琴。谢谢Lyes，但当我点击“移动插入符号到结尾”两次时，我看到的是选中的图像，而不是图像右侧的插入符号。（我在Chrome上）。另外，我仍然没有看到JSFIDLE中的变化，因此我发布了一个新的链接，介绍了新的变化：