javascript - 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をinserthtmlorと共に使用する必要があると思いますがinsertimage、現時点ではどちらも自分で機能させることはできません。