contentEditable을 사용하여 DOM 요소 추가

Question

편집 가능한 div를 만들었으며 스마일 기호를 스마일 이미지로 바꾸고 싶습니다.

하지만 DOM 요소 (<IMG> 또는 < 범위 > 또는 무엇이든 ..), 사업부가있는 중지와 문자열을 교체 할 때마다 편집 (I 텍스트를 클릭하면, 즉 내가 캐럿을 볼 수 있지만 추가 할 수 있습니다 문자).

무슨 일 이니? 나는 나 자신을 일을 그들 중 하나를 얻을 수 있지만, 당신이 inserthtml 또는 insertimage와 execCommand을 이용해야한다고 생각

var txtInput = document.getElementById("asdf"); 
txtInput.contentEditable = true; 
txtInput.addEventListener("textInput", function(event){ 
    var str = txtInput.innerHTML; 
    txtInput.innerHTML = str.replace("f", "<span>w<span>"); 
}, false); 

Answer 1

: 여기

내 코드입니다 (I 사파리에서이 일을하고 있습니다) 순간.