Question

I want to add some HTML as users type things into a contenteditable. For example,

$('body')
  .delegate('div[contenteditable=true]', 'blur keyup paste',
    function(){
      var html = this.innerHTML;
      html.replace( "a", "b" );
      this.innerHTML = html;
    });

Well for one, this doesn’t appear to replace anything. Two, I get a weird issue that I can no longer type into the contenteditable div. I checked events fired on the div, there is no ‘blur’ event going off. I seem to have the div highlighted, but I have to click on the div again to type anything. What am I missing here?

Answer 1

If you want to allow the user to select things and make them bold/italic (or insert a block of HTML where the user’s insertion point marker is), you want to use document.execCommand. The Mozilla website has documentation on this.