Rich HTML editing in the browser: Part 2

This concluding article builds upon the theory and other groundwork laid in the first part of the article series (http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-1/), to show how to actually build a rich content editor that works across the major browsers.

( Read the article )

Might I ask why the source code contains "var self = this;"? in TogglCommandController and ValueSelectorController? It seems like they serve no purpose.

And for anyone interested in working with a contentEditable version, you just need to turn #editFrame from an iframe to a div, and then make the following changes in the middle of editor.js:

var editFrame = document.getElementById("editFrame");
editFrame.contentEditable = true;
var editWindow = window;
var editDoc = document;

Also, you should change "editWindow.focus();" to "editFrame.focus();" (at least for the contentEditable version).

I must say... this editor is very good. Easiest one to work with and extend/modify for contentEditable. EVERY major editor I can find just uses an iframe, which this article did too, but this one is the only one that it was simple to convert. Remarkably, it doesn't suffer from issues I've encountered with my own editor with contentEditable in Firefox 3 (execCommand occasionally does *nothing*). I don't know why, and I'm jealous. :-p

Post edited Tuesday, 6. January 2009, 15:35:33

Fantastic article. Really, the best I've seen. I look forward to part three.

Perhaps you should have links to the different parts of the article from each page?

I've created a Mootools powered editor based on this tutorial,
MooInline Editor. (RTE demo) (I'm open for comments from the master.)

@POWRSURG: probably because you are losing focus of the button.
In IE make sure you set unselectable to 'on'.