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
