javascript - 如何在特定位置的 contenteditable div 中添加/插入/更新文本？

Question

HTML 代码如下所示

<div id="txtarea" contenteditable="true">Some text</div>

我必须在上述 div 的特定位置插入一些基于某些事件的新文本。该事件调用函数 say updateDiv(txt, positon)。例如它说
updateDiv("更多",5);

所以div应该变成

<div id="txtarea" contenteditable="true">Some more text</div>

我尝试了很多 javascript 和 jquery，但似乎没有任何效果。

Answer 1

如果您的内容可编辑<div>始终由单个文本节点组成，这相对简单，您可以使用下面的代码。

var div = document.getElementById("txtarea");
var textNode = div.firstChild;
textNode.data = textNode.data.slice(0, 5) + "more " + textNode.data.slice(5);

否则，您需要阅读 DOM Ranges (请注意，IE < 9 不支持它们)并使用类似 this answer 的东西创建与内容中的字符索引对应的范围，然后使用 insertNode() .

var div = document.getElementById("txtarea");
var range = createRangeFromCharacterIndices(div, 5, 5);
range.insertNode(document.createTextNode("more "));