Webdistortion has a review of 9 HTML rich text editors (via the YUI Blog).We’re happy with the new TinyMCE so far, but there may be something here thatstrikes your fancy if you’re looking for something smaller. Here’s the 9 plusmy brief notes:

• NiceEdit (http://nicedit.com/)– small; it would be really nice if they provided a way to cancel model dialog
• Kupu (http://kupu.oscom.org/download/) – CSS; no demo
• TinyMCE (http://tinymce.moxiecode.com/) – our notes
• Kevin Roth RTE (http://www.kevinroth.com/rte/)– old
• FCKEditor (http://www.fckeditor.net/) – “awesome” says the reviewer
• YUIEditor (http://developer.yahoo.com/yui/editor/) – our notes
• WebWiz RTE (http://www.webwizguide.com/webwizrichtexteditor/) – pay-for; doesn’twork on Safari!
• CodePlex RTE (http://www.codeplex.com/rte)– for .NET people
• XStandard (http://xstandard.com/) – no demo? looks like a Stalinist inspired  look & feel…

I completed the upgrade to TinyMCE (http://tinymce.moxiecode.com/download.php) this afternoon, tossing away 95% of my old code. I’m very very happy – they’ve very much modernized the code to what we’d expect in a modern JS framework.

For example, this is how we create an editor now:

editor = new tinymce.Editor('id_editor', initd);
editor.render();

And here’s how we listen for events:

editor.onKeyPress.add(function(e) {
            … do stuff …
});

I haven’t tried to do stuff with the Toolbar yet, but given the apparent serious thought they’ve put into making a nice interface, I can’t imagine it’s going to be very difficult.

Well, I couldn’t believe how easy it was to make our new editor use TinyMCE – I just downloaded the new version (3.0.4.1 – http://tinymce.moxiecode.com/download.php), hooked it up to our code and it ran out of the box.

Since you may not have done this yourself, I’ll just run you through how we use TinyMCE:

• make a TEXTAREA that you plan to work with; there are some complications if you want or have multiple TEXTAREAs but this is not an issue for us
• include TinyMCE: <script type="text/javascript" src="=/jscripts/tiny_mce/tiny_mce.js"></script>
• call the initalizer function: tinyMCE.init(initd)

That’s it, you have an editor. “initd” is a dictionary that describes how to set up TinyMCE. This is our setup:

initd = {
    onchange_callback : "tinymce_onchange_callback",
    theme_advanced_buttons1 : "bullist,numlist,outdent,indent,separator,justifyleft,justifycenter,separator,link,unlink,image,separator,bold,italic,strikethrough,separator,sub,sup,forecolor,backcolor,separator,code",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    dialog_type : "modal",
    theme_advanced_resize_horizontal : false,
    entity_encoding : "numeric",
    force_p_newlines : true,
    force_br_newlines : false,
    convert_newlines_to_brs : false,
    relative_urls : false,
    remove_script_host : false,
    verify_html : false,
    auto_reset_designmode : true,
    remove_linebreaks : false,
    theme_advanced_resizing : true,
    mode : "textareas",
    theme : "advanced",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_path_location : "bottom",
    plugins : "inlinepopups",
    content_css : "/:root/include/common/tinymce.css"
};

You’ll have to modify the location of the CSS file and the callback (so we know whether the document has been edited!) to something you prefer to use, but you get the idea.

Also note that you may have to do some magic to move the data between the TinyMCE window and the TEXTAREA:

• To move the data into the TEXTAREA, do: tinyMCE.triggerSave()
• To go the other way: tinyMCE.updateContent(idName), where idName is the DOM ID of the TEXTAREA; whoops -- in version 3.x use tinyMCE.activeEditor.load();

Version 2 of TinyMCE misbehaved if you tried to create an editor in a hidden DIV (i.e. with display: none); I’m not sure if this issue is gone or not but try to avoid doing it.

I spent a fair fraction of yesterday playing with Yahoo’s Rich Text Editor (http://developer.yahoo.com/yui/editor/), trying to integrate it into what we’re calling “V12” of the BlogMatrix Platform – the look and feel you’re seeing on Onaswarm (http://www.onaswarm.com) right now.

Currently, we’re using TinyMCE as a text editor. On the plus side, TinyMCE is standard and reliable; on the minus side, it’s difficult to work with, very difficult to extend, and fairly hefty. So as a background task I’ve been looking at various technologies and seeing what can be done. TinyMCE has recently revved from 2.x to 3.x (http://tinymce.moxiecode.com/punbb/viewtopic.php?id=9942), so we’ll be revisiting that soon.

One of problems with all browser based editors is that that they, well, make weird looking HTML. Especially on Safari (AKA webkit). We’ve partially solved this problem at BlogMatrix by running a number of “scrubbers” that look for well-known weirdnesses and transform them into something better. Generally this works as a pipeline from TIDY (http://tidy.sourceforge.net/), to a bunch of regular expressions, to TIDY again. The goal is to be able to process normal hand-entered input into good-looking HTML, but still preserve the formatting pasted in from another webpage or document. Believe it or not, we’ve had a lot of luck with this.

You’d think that all this could be done with a Flash component – this would nicely solve multiple browser problem, but alas I haven’t found a Flash editor that accepts pasted text and does something sane with it. If you’d like to look at this, I’ve posted notes here on del.icio.us (http://del.icio.us/dpjanes/text_editor).

So, back to the YUI RTE – here’s my positives and negatives in no particular order. I’m aware that this is not a finished product, so expect to see the negatives to disappear.

• it’s super easy to configure, especially the toolbar
• there’s no HTML view; like WTF, I have to write this myself?
• block indent/undent is broken beyond repair
• I had no problems mixing and matching with MochiKit (http://www.mochikit.com/), our JS weapon of choice.
• The dialogs that pop up for editing links and images are worth a whole section to themselves:
• here we see the limitations of CSS styling – even the slightest change to text (from my CSS) breaks the dialogs. In this particular case boys and girls, perhaps even go back to table layout; it’s an app, not a webpage
• in fact, just isolate this altogether out of RTE. By the looks of it, this seems to be the plan.
• for proper styling, YUI components need to be descended from an element with CSS class “yui-skin-sam”. Unfortunately, dialogs attach themselves to the BODY element and we can’t mark that as “yui-skin-sam” because that, well, breaks all our stuff. So we ended up having to copy out all the CSS, remove “.yui-skin-sam”, adjust all the background images and so on and so forth.

I may experiment next with Ext’s editor (http://extjs.com/deploy/ext/examples/form/dynamic.html) but I’m thinking the best bang for our buck is still TinyMCE. If only I could figure out how to add my own buttons and functions….

For what it’s worth, I’m composing this using MS Word 2008 on a Mac, which doesn't play nicely with anything. Sigh