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

Question

HTML 代码如下所示

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

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

所以 div 应该变成

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

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

Answer 1

我是这样做的：

var position = 5,
    txt = "more ";
var current = $("#txtarea").html();
//alert(current.substring(0, position))
var endVal = current.substring(position);
var newValue = current.substring(0, position) + txt + endVal;
$("#txtarea").html(newValue);​

jsfiddle显示它'在行动'。

编辑：用上面评论中列出的方法更新了jsfiddle。相当光滑！

Answer 2

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

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

否则，您需要阅读有关DOM 范围的信息（请注意，IE < 9 不支持它们）并使用类似此答案的内容来创建与内容中的字符索引相对应的范围，然后使用insertNode().

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

Answer 3

使用这个功能：

String.prototype.splice = function( position, newstring ) {
    return (this.slice(0,position) + newstring + this.slice(position));
};

并将此功能用作：

var oldstr=$('#txtarea').html();
var newstr='more';
var position = 5;
$('#txtarea').html(oldstr.splice(position , newstr);