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

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

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

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

test1test2

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

test1 | test2

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

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

test1t|est2

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

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

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

test1 | test2

当div包含以下内容时：“在

test2

之前，您还应该显示javascript代码，

img

标记是一个自动关闭标记，因此它应该是