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…

One thing we don’t like about HTML online editors is that they make some pretty lousy looking HTML pages. To deal with this, we’ve created HTML “scrubbers” to rewrite HTML coming from these widgets.

The first thing we always do is call TIDY () to normalize the HTML. We then run a list of regular expressions to remove things we don’t like, such as class names, ids, etc. and also things such as trailing empty paragraphs at the end of documents.

We just added another scrubber to convert double BRs within P paragraphs into paragraph splits – this makes the HTML more semantic, that is, to make it say what it means, not what it looks like.

This can’t be done with just a regular expression, of course. Here’s our algorithm:

• find all <p>…</p> paragraph blocks, always looking for the shortest matches
• reverse this list, so that we can rewrite the document without having to worry about adjusting search indices
• look at each match: if contains anything non-simple, leave it alone. Theoretically, since we’re coming out of TIDY this should be well formed and only contain markup like B, STRONG, ABBR, etc. but I never take chances
• if the match is simple, convert all BR BR sequences to “</p><p>”

With the BlogMatrix Platform editor, every time you save a post it scrubs it and sends it back to the editor.

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

The Yahoo UI AJAX toolkit has introduced a rich text editor (still in beta) along with a number of other goodies outlined here on Ajaxian. Although we're very happy with TinyMCE and MochiKit, we could see the day when we transition fully to the Yahoo toolkit. But not soon, there's way to many things to test and way to much optimization done to this point ;-)

We're got a (very) basic integration of SIMILE and BlogMatrix going -- you can view it right here. A few notes:

• the "timeline-api.js" depends on being in the HEAD of the document, as it parses the SCRIPT elements in the HEAD to find the location of that file, so it can load dependent scripts. This doesn't really work for us, as we dynamically load scripts in the BODY as we find a need for them. It would be much better if they took an approach like TinyMCE, where an explicit load function is called with parameters (and if the parameters cannot be found, then you start trying to derive them)
• I'm very pleased to see that HTML works in the popups
• We obviously need a way of setting the beginning and end dates of the time, or the resolution, and the height
• You don't need to call a loader to external URI to get the data into the timeline (as the examples use). Just call eventSource.loadJSON(json-object, base-uri) and off you go.