使用contentEditable添加DOM元素

Question

我已經創建了一個可編輯的div，並且我想用笑臉圖像代替笑臉標志。

但是，每當我用dom元素（<img>或<span>或其他任何內容..）替換字符串時，div都將不再可編輯（即，當我單擊文本時可以看到插入符號，但不能向其中添加任何字符） 。

這是怎么回事？ （我正在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一起使用，盡管目前我無法讓它們中的任何一個自己工作。