使用contentEditable添加DOM元素

Question

我创建了一个可编辑的div，我想用笑脸图像替换笑脸标志。

但每当我用dom元素替换一个字符串（＆lt; img＆gt;或＆lt; span＆gt;或者其他......）时，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一起使用，但我现在无法让他们自己工作。