Monday, October 13th, 2008

The bane and choice of Rich Text Editors

Category: RichTextWidget

<>p>

Whenever Abe Fettig is in town I think about how painful his live has been working with rich text editors :)

Stuart Atkinson has kindly done a roundup of the state of rich text editors, and it covers:

  • TinyMCE: There’s a modified version of this included in WordPress these days, and it’s extremely well supported by its developers. You get all the formatting options you’d expect, plus the ability to easily remove excess formatting tools with just a little code. As an added bonus, there’s a collection of plugins which enable even more advanced formatting options.
  • YUI Editor: Sadly, this one is quite often ignored, perhaps due to that fact it’s the product of a large corporation. Nonetheless, I know a kick-ass set of tools and utilities when I see one, and this editor is fit for any such best-of list!

    You have 2 main configurations for this – Editor and simpleEditor. You’re not limited to these however, as once you get to grips with the API you can bespoke it with relative ease.

  • FCKEditor: FCKEditor is one of the longest standing web-based editors out there, and used in a great many open-source apps. It’s also available in a number of server-side languages
  • FreeRichTextEditor: FreeRichTextEditor is gaining more momentum these days, and comes available with 2 modes available straight out the box: design, code and preview.
  • WidgEditor: This is the work of client-side coding guru Cameron Adams, whose personal project has become an extremely viable, standards-based rich text editor for web applications. The JavaScript behind is also lean yet easy to read (should you want or need to understand it further), and the code output is smooth.

Then, people in the comments linked to WYMEditor, OpenWYSIWYG, NicEdit, and Dojo’s editor (Abe Fettig in part).

Are there others out there that you like? Any experiences that you would like to share? A friend recently jumped from a paid widget to TinyMCE saying that it was finally ready for prime time.

Related Content:

Posted by Dion Almaer at 6:49 am
16 Comments

+++--
3.1 rating from 66 votes

16 Comments »

Comments feed TrackBack URI

If you need a really small and lightweight editor then have a look at PunyMCE.
http://www.moxieforge.net/overview.php?project_id=9&category_id=5

Comment by Spocke — October 13, 2008

TinyMCE is one of the good ones, very usable & customisable.

Comment by indiehead — October 13, 2008

nice one Spocke, must try that one out,

Comment by indiehead — October 13, 2008

I’ve worked with nicEdit in the past which is very small (it even has all the icons in 1 jpg). Performance however really becomes a problem when you add more than one editor to a page (especially in IE), and the lack of plugin support is a pity.

PunyMCE looks worth checking out..

Comment by vitrus — October 13, 2008

Take a look at Xinha ( http://www.xinha.org ) It’s a mature option, that’s been around for awhile and is currently moving forward quickly.

Comment by dmayle — October 13, 2008

TinyMCE is buggy and… not tiny. I recommend against it, especially if you anticipate having to edit the source code at all.
.
FCK is generally the most-recommended choice from people with experience with these things, but it’s a little buggy too. For instance, its default configuration allows you to nest styles like bold by using the native browser cmd-b (Safari) then the toolbar bold, essentially making it impossible for FCK to know what native styling you’ve applied. It also does some weird stuff like shifting (visual) whitespace around unexpectedly.
.
Faced with what I consider to be a bunch of poor choices, I have rolled my own editor for an AIR app (it feels rock solid, but has the advantage of having to only target Webkit), and haven’t looked back.
.
For public-facing solutions, I’d still probably recommend FCK despite its flaws. It’s the best out there.

Comment by eyelidlessness — October 13, 2008

TinyMCE is the one I’m using these days, mostly because it’s the only one I’ve seen that can toggle from a simple textarea to the rich controls and back, whenever the user invokes it. Perfect for use with the ‘edit-in-place’ paradigm.

Comment by starkraving — October 13, 2008

Well that didn’t take long – account seems to be suspended already …

The problem that I always run into is cross-browser issues, and that that results in code getting re-written.

border:1px solid black; becomes border-top:1px solid black;border-right:1px solid black; …

Comment by James Skemp — October 13, 2008

I deployed WYSIWYGPRO v2 and liked it a lot, but maybe not for shiny features that make it show up on the top of a list. The big selling point is that we found it worked very consistently and reliably across browsers and operating systems which made it very easy to create documentation and train staff. I have not tried v3 much yet but it has a new system for creating plugins that looks very well thought out.

I recently deployed tinymce in a project and found that inconsistencies abound (for example, clicking in a blank editor and hitting the enter key causes different results in different browsers).

Comment by newz2000 — October 13, 2008

well.. I like simply design,functional editors.
anybody can show me?

Comment by PuryFury — October 14, 2008

I used TinyMCE in production code a couple of times, but I found it had major performance problems on pages with multiple editors (the last time I used it the deployment environment was a publishing house where everyone runs IE6 and nobody has a PC less than 3 or 4 years old. Lots of reports of non-responding browser from the users), so I switched to the YUI editor.

I felt bad about it as it seemed to me TinyMCE were the innovators here and I wanted to support them, but in the end the maintenance headaches were too much for me.

I find the YUI editor has better performance (anecdotally – I didn’t run benchmarks – this is just based on feedback from users) and has better support for image embedding (it’s pretty easy to build a drag/drop image embedding tool), which really matters when your users aren’t all that tech-savvy but still need to be able to put pictures in their documents.

With both editors, I found my biggest headache was getting correct XHTML markup out of them, in particular given that lots of the content ended up being cut and pasted from MS Word into the editor window. I ended up writing lots of fairly hacky server-side code to sanitize the input. You don’t want to know about how Word marks up tables…

I would recommend YUI over TinyMCE. Neither are perfect but both are better than writing your own rich text editor!

Comment by karlstanley — October 14, 2008

@PuryFury – textarea is good one. ;-)

Comment by kae — October 14, 2008

I’m curious why there aren’t any editors that, behind the scenes, translate HTML into something more restricted — like MarkDown. I’d love to have a WYSIWYM MarkDown editor instead of all this HTML stuff that just brings in Office Crud.

Comment by eargang — October 15, 2008

Hi Dion and Folks,

You or the others know any web editor which can be used as a source code editor (with syntax highlight and perhaps code complete), preferably with Java language support ???

Cheers.

Comment by TeacherBR — October 16, 2008

Is there a RTF Editor that outputs the source in Textile format? That would be really helpful for me.

Thanks.

Comment by Leech — October 17, 2008

We are using XStandard. Though the it’s implementation can cause some issues with CSS (can’t hide hide behind overlays) and it’s documentation is sparse at best, the output is always XHTML compliant.

Comment by domusvita — October 18, 2008

Leave a comment

You must be logged in to post a comment.