使用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一起使用，尽管目前我无法让它们中的任何一个自己工作。