Buddy Toups: A Designer’s Blog May 21, 2007

For that past couple of weeks I’ve been research the inner-workings of HTML / Javascript WYSIWYG editors. I’ve found some really good resources and know the basics of how it is possible, but a little disappointed about what some browsers output. Most browsers output some dirty HTML code but looks like most developers cleanup the output for XHTML. The following are sites I used in my research:

Cross-browser resources:

1. execCommand compatibility - QuirksMode site
2. Caret position in Internet Explorer
3. Using JavaScript to Create a Powerful GUI O’Reilly Network

Microsoft Internet Explorer specific resources:

1. Microsoft Documentation on designMode

Mozilla/Firefox specific resources:

1. Midas Rich Text Editor
   
2. Rich-Text Editing in Mozilla 1.3

Apple Safari specific resources:

1. WYSIWYG comes to Safari 1.3 All Forces
2. Safari Content Editable Demo

Current Products:

(Both Commercial and Open Source)

1. TinyMCE Editor (LGPL licensed) by Moxiecode Systems AB: Browser support: Mozilla, MSIE, FireFox, Opera and Safari (experimental), and XHTML 1.0 output.
2. Cross-Browser Rich Text Editor (RTE) (Creative Commons License) - the online home of Kevin Roth Browser support: MSIE 5.5+/Mozilla 1.3+/Firefox 0.6.1+/Netscape 7.1+/Mac Safari 1.3+/Opera 9+
3. openWYSIWYG (LGPL licensed) - Open Source Cross-Browser WYSIWYG Editor Browser support: MSIE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ and Netscape 7+.
4. eArea (LGPL licensed) - a really simple web-based text editor Browser support: MSIE, Firefox/Mozila and Safari/Konqueror.
5. I will add more to these list later…