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