Javascript 如何设置包含文本和元素节点组合的contenteditable div的插入符号位置

我的HTML：

<div id="text" contenteditable="true">abcd<img src="icon.gif"/>efgh</div>

但我得到了这个错误：

未捕获的DomeException:未能对“范围”执行“setStart”：偏移量5大于或等于节点的长度（4）

---

请建议我如何做到这一点？在插入符号位置之前，我可能有几个图像，每个图像将被视为一个字符。

您的

textNode

有3个子项（1个文本、1个元素、1个文本），因此您不能只使用

第一个子项

您需要迭代
的
子节点
，并跟踪
子节点
的
节点类型
等于
节点的字符计数。TEXT\u节点
（请参见MDN上的）。如果字符计数小于插入符号的值，则可以从插入符号中扣除该值，然后移动到下一个文本节点

根据您的情况：

我的愿望和每个图像将被视为一个字符

代码将从插入符号中扣除1，其中
nodeType==1
即
Node.ELEMENT\u Node

下面是一个带有多个图标的代码示例：


var节点=document.querySelector（“div”）；
node.focus（）；
var插入符号=24；
var-child；
var childNodeIndex=0；
对于（var i=0；i
var node = document.querySelector("div");
node.focus();
var textNode = node.firstChild;
var caret = 5; 
var range = document.createRange();
range.setStart(textNode, caret);
range.setEnd(textNode, caret);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);