특정 위치에서 contenteditable div 안에 텍스트를 추가/삽입/업데이트하는 방법은 무엇입니까?

Question

HTML 코드는 내가 위의 DIV의 특정 위치에 어떤 이벤트를 기반으로 새로운 텍스트를 삽입해야이

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

것 같습니다. 이벤트는 say updateDiv (txt, positon) 함수를 호출합니다. 예를 들어이 updateDiv("more ",5);

그래서 사업부가

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

내가 자바 스크립트를 많이 시도하고 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이 '행동'을 표시.

편집 : this post으로 위의 설명에 나와있는 방법으로 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); 

그렇지 않으면, 당신은 (그들은 IE < 9에서 지원되지 않습니다)에 대한 DOM Ranges를 읽고 내용에서 문자 인덱스에 해당하는 범위를 만들 this answer 같은 것을 사용하고 insertNode()를 사용해야합니다.

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

Answer 3

이 function :

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