当存在 IMG 元素时，如何设置插入符号位置

How to set the caret position when there is an IMG element?

本文关键字：设置 插入 位置 符号 何设置 IMG 存在 元素      更新时间：2023-09-26

我有一个内容可编辑的div，如下所示：

<div contenteditable="true">test1<img src="img.jpg"></img>test2</div>

现在，如果我在位置 5 上设置插入符号，我会得到这个（垂直线是下面代码中的插入符号）：

<div contenteditable="true">test1|<img src="img.jpg"></img>test2</div>

如果我将插入符号设置在位置 6 上，我会得到这个：

<div contenteditable="true">test1<img src="img.jpg"></img>t|est2</div>

如何在 IMG 元素旁边设置插入符号？我想得到这样的东西：

<div contenteditable="true">test1<img src="img.jpg"></img>|test2</div>

当div 有内容："之前<img>之后"时，那么基本上里面有 3 个元素：0.text："在 "， 1.img， 2.text： "之后"，你想在 #2 的开头：

function setCaretPositionAfter1stImg(elemId) {
    var el = document.getElementById(elemId);
    if(el != null) {
      el.focus();
      var range = document.createRange();
      var sel = window.getSelection();
      range.setStart(el, 2);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
     }
}
setCaretPositionAfter1stImg("ed");
<div contenteditable="true" id="ed">test1<img src="img.jpg"/>test2</div>

相关文章：