Rich HTML editing in the browser: part 1

In-browser WYSIWYG editing is becoming an integral part of the Web. This article looks at the basic concepts and challenges involved in utilizing the editing features in recent browsers. It will startle you to learn that each browser behaves slightly differently—but this two-part article will save your sanity.

( Read the article )

A great introductory article! I wish that this came out months ago when I was tasked to write my own editor.

Biggest problem I have found is that we wanted the editor to generate valid input when possible, so enable styleWithCSS for browsers that support it. This is all well and good, except we wanted the bold and italics feature to create strong and em tags specifically. Using surroundContents (or a work around for IE) works when the client only creates a selection that spans over inline content, but when the client selected blocks of paragraph and then tried to bold generated invalid output. Worse, if the selection spans multiple paragraphs but does not select the entire paragraph, a document fragment is generated and splits in two - first the unbolded part and then the bolded part that was highlighted. Trying to undo these effects becomes a pain in the neck! I truly wish there was a non-trivial way of selecting all non-empty text nodes within a given range to which you could then apply effects sensibly. Does anyone have a recommendation on a better solution for this problem?

Also annoying, trying to figure out when an image has been resized in a cross browser away. My co-worker tried to tackle this and he said the only thing he could get in a semi-consistent way was that the document element did respond to a click event, but he couldn't get it to tell him what element was changed or anything of the sort. Crazy.

Thank you for explaining how different browsers position the caret differently upon hitting enter. We've found that Firefox 3's contentEditable is significantly different from the way Firefox 2 handled in designMode. Does anyone have any suggestions on unifying this behavior WITHOUT resorting to browser detects?

Originally posted by POWRSURG:

A great introductory article! I wish that this came out months ago when I was tasked to write my own editor.

Biggest problem I have found is that we wanted the editor to generate valid input when possible, so enable styleWithCSS for browsers that support it. This is all well and good, except we wanted the bold and italics feature to create strong and em tags specifically. Using surroundContents (or a work around for IE) works when the client only creates a selection that spans over inline content, but when the client selected blocks of paragraph and then tried to bold generated invalid output. Worse, if the selection spans multiple paragraphs but does not select the entire paragraph, a document fragment is generated and splits in two - first the unbolded part and then the bolded part that was highlighted. Trying to undo these effects becomes a pain in the neck! I truly wish there was a non-trivial way of selecting all non-empty text nodes within a given range to which you could then apply effects sensibly. Does anyone have a recommendation on a better solution for this problem?

Also annoying, trying to figure out when an image has been resized in a cross browser away. My co-worker tried to tackle this and he said the only thing he could get in a semi-consistent way was that the document element did respond to a click event, but he couldn't get it to tell him what element was changed or anything of the sort. Crazy.

Thank you for explaining how different browsers position the caret differently upon hitting enter. We've found that Firefox 3's contentEditable is significantly different from the way Firefox 2 handled in designMode. Does anyone have any suggestions on unifying this behavior WITHOUT resorting to browser detects?

I agree!

Originally posted by chrismills:

Glad you liked it folks. We'll have part 2 published in the next couple of weeks.

Any word on when Part 2 will be available? I'd quite like to see it