Question

I am playing around with the jHTMLArea jQuery plugin (http://jhtmlarea.codeplex.com/). It creates a nice simple WYSIWYG editor using an embedded iframe. I want to get rid of the iframe and use a ContentEditable div instead.

The problem is i can get it to run the execcommand function so that formatting changes are applied to the editor.

Take a look at http://jsfiddle.net/mwillmott/neXkk/ to see my implementation.

Any help would be appreciated!

Answer 1

If you try your fiddle in Firefox with Firebug, one part of the answer is displayed in the console. The problem is that document.execCommand() requires three parameters:

document.execCommand("Bold", false, null);

The second is an old one specific to IE and can pretty much always be false. The last is a value associated with the command, which in the case of “Bold” can be null since the bold command takes no value.

Another, bigger problem is that the selection is being destroyed when pressing the toolbar buttons. You need to prevent that, either by using the mousedown event rather than click, or better by preventing the buttons from grabbing the focus. See this answer, for example.

Finally, I think there’s a property called editor missing that should be a reference to the document containing the editable content.

I’ve added fixes for these in your demo: http://jsfiddle.net/neXkk/2/. Tested only in Firefox, you may need more tweaks for IE in particular.