使用contentEditable添加DOM元素

Question

我創建了一個可編輯的div，我想用笑臉圖像替換笑臉標誌。

但每當我替換字符串與DOM元素（<IMG>或<跨度>或任何..），股利不再是可編輯的（即我可以看到插入符當我點擊的文本，但是可以添加無字符）。

發生了什麼事？ （我在Safari這樣做）

這裏是我的代碼：

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

，我認爲你應該使用execCommand與inserthtml或insertimage，但我不能讓任何一方的在工作自己時刻。