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

Question

I have a content editable div like this:

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

Now, if I set the caret on position 5, I get this (the vertical line is the caret in the code below):

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

and if I set the caret on position 6, I get this:

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

How can I set the caret right next to the IMG element? I want to get something like this:

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

Answer 1

When the div has the content: "before <img> after", then basically there are 3 elements in it: 0.text:"before ", 1.img, 2.text: " after", and you want to be at the beginning of the #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>