Question

我有一个像这样的内容可编辑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>

Answer 1

当div具有内容：“之后<img>之前”，则基本上有3个元素：0.text：“before”，1.img，2.text：“after”，和你想成为＃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>

有IMG元素时如何设置插入位置？

1 个答案: