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

的HTML代码看起来像这样如何在特定位置添加/插入/更新contenteditable div中的文本？

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

我在上面的DIV的特定位置插入基于某些事件的一些新的文本。事件调用函数say updateDiv（txt，positon）。比如它说
updateDiv("more ",5);

所以DIV应该成为是

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

我尝试了大量的JavaScript和jQuery但没有什么似乎工作。

来源

2012-04-25 MeetM

http://stackoverflow.com/questions/1882890/jquery-insert-text-to- textarea – 2012-04-25 12:28:18

@ RokoC.Buljan：不，这个问题涉及到textareas，而不是'contenteditable'。 – 2012-04-25 12:38:41

**在另一个字符串的位置x插入字符串**：http://stackoverflow.com/questions/4364881/inserting-string-at-position-x-of-another-string – RASG 2012-04-25 13:20:56

我是这样做的：

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至this post。很漂亮！

来源

2012-04-25 12:31:01 veeTrain

但这会移动光标位置。它的'contenteditable' div – MeetM 2012-04-25 15:19:51

@MeetM;是的，清除div的'html（）'将移动光标位置。你从来没有提到什么事件正在产生需要插入文本。推测你必须尝试绑定到键盘事件。但是，如果您在某人打字时将文本插入某些内容，他们可能不会喜欢它。 – veeTrain 2012-04-25 15:38:28

如果可编辑的<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 "));

来源

2012-04-25 12:31:57

带换行符的contentEditable div总是会有更多节点，形式为
？怎么可能有一个单一的文本节点？ – 2014-06-03 02:45:08

@RafaelDiaz：问题中的代码有一个具有单个文本节点的可以理解的元素。一般来说，如果仅允许用户编辑没有格式的单个文本节点，那么使用contenteditable的应用程序就不太可能用得上。 – 2014-06-03 09:05:30

使用此功能：

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);

来源

2012-04-25 13:51:31

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

回答

相关问题