WYSIWYG Javascript HTML Editors - TinyMCE

I have been in search of a functional and cross browser compatible WYSIWYG (For beginners: 'W'hat 'Y'ou 'S'ee 'I's 'W'hat 'Y'ou 'G'et) javascript editor for some time. My search ended with TinyMCE, available under open source GPL license. One of the great features of TinyMCE are the easily writable plugins. That means that with a basic understanding of CSS, JS and HTML, you can add custom buttons. I needed a plugin yesterday to implement blockquote, rightbox and leftbox buttons and after figuring out the basics it took me less than 30 minutes to write the plugin.

The implementation of Tiny MCE is really easy. Just drop two small scripts on any page with textfields and voila! All textfields will automatically become resizable with the WYSIWYG editor.



TinyMCE Wiki
Full featured example of TinyMCE
TinyMCE on MoxieCode


Some of the CMS (content management system) for which Tiny is available:

A lot of CMS have been 'tiny´ied' - some using it as their default editor, others have implemented in a module/plugin.

• Drupal
• Mambo, plugin
• PHP-Nuke
• Plone
• Puzzle Apps CMS
• Wordpress - plugin
• Xaraya

Problems with TinyMCE
Javascript Functions API documenting a variety of TinyMCE functions
Building a PHP Sample with TinyMCE
Buttons reference TinyMCE
FAQs about TinyMCE

Can I use TinyMCE in my commercial application?

Yes you can, the LGPL license is a Free Software License. You can read the whole license here or visit Free Software Foundation web site here

donadoni provides a great tip on how to toggle between enabling / disabling TinyMCE

var tinyMCEmode = true;
function toogleEditorMode(sEditorID) {
try {
if(tinyMCEmode) {
tinyMCE.removeMCEControl(tinyMCE.getEditorId(sEditorID));
tinyMCEmode = false;
} else {
tinyMCE.addMCEControl(document.getElementById('pagecontent'), sEditorID);
tinyMCEmode = true;
}
} catch(e) {
//error handling
}
}

TinyMCE
Javascript
HTML
AJAX

  post to Del.icio.us