Ajout d'éléments DOM à l'aide de contentEditable

Question

J'ai créé une div modifiable et je souhaite remplacer les smileys par des smileys.

Mais chaque fois que je remplace une chaîne avec un élément dom (<img> ou < durée > ou quoi que ..), la div cesse d'être modifiable (par exemple, je peux voir le caret quand je clique sur le texte, mais ne pouvez pas ajouter caractères à lui).

Que se passe-t-il? (Je fais cela dans Safari)

Voici mon code:

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

Je pense que vous devriez utiliser execCommand avec inserthtml ou insertimage, bien que je ne peux pas l'un d'eux pour me travailler au moment.