Adding DOM elements using contentEditable

Posted by zorglub76 on Stack Overflow See other posts from Stack Overflow or by zorglub76
Published on 2010-05-18T12:58:39Z Indexed on 2010/05/18 13:00 UTC
Read the original article Hit count: 295

Filed under:
|

Hi all,

I've created an editable div, and I want to replace smiley signs with smiley images.

But whenever I replace a string with a dom element (<img> or <span> or whatever..), the div stops being editable (i.e. I can see the caret when I click on text, but can add no characters to it).

What's going on? (I'm doing this in Safari)

Here's my 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);

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about contenteditable