FCKeditor? TinyMCE? NicEdit!

The so-called “Rich Text Editors” are used extensively over the web nowadays, especially in content publishing systems. Of course rich text editor mentioned here won’t mean the desktop software. They’re invented to solve the problem that standard HTML lacks a rich text editor component. JavaScript and basic XHTML technologies are used to create more powerful text edit controls with styling and formatting functions.

I started to pay attention to rich text editor implementations since I discovered WordPress. It bundles TinyMCE with it. However many people including me were not satisfied with the default customization of WordPress, so I got a plugin called EditorMonkey. I don’t quite remember what it was like because I haven’t used it for a long time and the author’s site is down for the time being. But I do remember that it provided two editors, FCKeditor and TinyMCE, as choices for users. That was the first time I knew FCKeditor and it gave me a good impression.

Generally speaking, the two take up most of the market. But after using them for a while, I realized some issues with them I can’t tolerate. Although they did great contribution to the Internet, they’re just not for me.

They Produce Uncontrollable Codes

Firstly I say that such editors are not for Internet novices. Why? Just open an image insertion dialog box in FCKeditor to see the options (see the FCKeditor demo). Will my mother understand what is “alternative text”? Or what is HSpace/VSpace? No. Not to say options in the “Advanced” tab. She just wants to insert an image! What the hell are these new concepts?

As a developer, I always want to be clear of what HTML code is underlying the rendered output. Both of the two editors can’t produce clean code for me. There are cases when we want to edit the source code by hand, though this doesn’t happen quite often. What do you think when you see the code in a mess but not like what you expected?

So I quickly discarded them and enjoyed the quick tag editor in WordPress. I really like it. It just converts a single line break into a “<br />” and a series of line breaks into a paragraph. Other characters remain the same.

They’re Much More than too Heavy

What do you use an Rich Text Editor for? Will you use it to create a complex website? Of course not. We mostly write simply styled articles, and they can be done easily (of course not easy for my mother) with a plain text editor.

I myself lived a good life with the quick tag editor. But at last I couldn’t get by the doom when our users needed a rich editor. So I picked up FCKeditor.

The size and speed of the editors are intolerable for doing such simple works, especially when you want to make a rich text box on the fly which needs quick response to make the user experience smooth. I heard enough complaints about the speed. No one would like to open Microsoft Word frequently, right?

Compatibility Problems

Recently FCKeditor released the 2.5 version and added Safari and Opera to their compatibility list. TinyMCE is beta testing its 3.0 version and it support all the main browsers.

However there are other compatibility related problems. I saw on several machines that the modal dialogs are squeezed to a very slim window, about 30 pixels wide, without scroll bars, making it completely unusable. Sure it may be problems of browsers, but there will be no problems if they use JavaScript and XHTML to fake a dialog. TinyMCE now uses such technique a lot, but there are still traditional modal dialogs.

They’re both too heavy to catch up the pace of technology innovations. Especially FCKeditor.

NicEdit, a New Hope?

I’ve been searching for an alternative to FCKeditor for weeks, since our users complained a lot about the text editor. I discovered NicEdit all of a sudden.

It is light weight – only 30K of a single JavaScript file. And it never uses popup dialogs except alerts. The auto-fit-height feature is really cool. An ideal solution for web sites. So I’m seriously considering switching to it, and my colleagues are also looking forward to it.

I’m pretty satisfied with the current feature set of NicEdit, But the author is considering some proposed features for the next version. This makes me wonder how FCKeditor/TinyMCE were like in the beginning. Were they as simple and light weight as today’s NicEdit? Maybe it’s the never ending feature requests which created today’s bit monsters. I really hope NicEdit will keep the feature set small and make them robust. There are still problems. For example, when the editor is not active, clicking the “insert image” button will generate a JavaScript error.

20 Replies to “FCKeditor? TinyMCE? NicEdit!”

  1. Hey,

    Good thing i read your article. Thank you thank you thank you very much for making my life less complicated :)

    In just a few minutes my text boxes are all set up.

    Great Job.

  2. It’s nice, and seems to respond faster than TinyMCE (a big plus!) but it doesn’t seem to handle special characters at all, which was my main reason for using this kind of editor in the first place.

  3. yeah its good, easy n light wight , but what if i need upload a file like pdf or doc….??

  4. I couldn’t agree more. We’ve used TinyMCE in production for quite some time, and it just got too complex (and had some nasty bugs). I think it’s a great editor for applications that need its complexity, but in our case, it became overkill since our users actually want the ability to do nothing but: edit, add pics, add links, and that’s it.

    So, we made the switch to NicEdit, and it’s been the best decision ever. Our pages load much faster, the editor’s realestate footprint is very small, and we can attach it to all kinds of controls. Definitely looking forward to it staying small and light

  5. TinyMCE is incredibly heavy. Even when I disable everything but the most basic stuff (bold, italics, hyperlinks), it is still very heavy. It is also incredibly buggy when trying to use it in any AJAX-enabled tools. The code it generates is ugly and I’m constantly wrestling with it to get it to do what I want. NicEdit seems like a decent alternative but it too has its problems. Simply making something “bold” drops in a “span” tag with a “style” attribute. Why? Who knows. It is also quite buggy – several features are completely broken in Firefox and the authors seem to be uninterested in updating/fixing this WYSIWYG editor. The forums for NicEdit also seem to be mostly dead. Looks like a dead project.

    I’ve come to the singular, inescapable conclusion that there are NO good WYSIWYG browser-based editors. Either the programmers of WYSIWYG editors suck at programming OR the web browser isn’t up to the task (Reality: probably a combination of the two). Even the “2-ton gorilla” TinyMCE editor (WHEN it works) is incredibly difficult to work with from a user perspective. I’m constantly wrestling with it and eventually give up and edit the HTML directly. I’m sure most users don’t care how the final content looks as long as it displays, but I’m picky about such things as “consistent whitespace”. (Seriously, how hard is it to get three different paragraphs to have the same spacing between paragraphs when you click ‘save’?) Micromanaging whitespace with all of the WYSIWYG editors out there is very annoying. It looks like I’m going to have to roll my own. I shudder at the very thought.

  6. Maybe I spoke too soon: WYMeditor just showed up on my radar. And…I like it. Mostly. It does have a few minor quirks but it is light, generates correct XHTML code that isn’t perfect but good enough, and handles my most basic editing test cases flawlessly. While the default WYMeditor setup isn’t really ideal, I figure I can cobble together something that is reasonable to work with.

  7. An update/quick review for anyone who comes across this post and is wondering how WYMEditor is working out for me: It took almost three months to integrate WYMEditor into my environment. WYMEditor is NOT for the developer who wants to implement a quick-n-dirty solution such as TinyMCE but is doing something rather advanced where tight control over the code is an absolute necessity. My only complaints about WYMEditor are an insufficient API to accomplish relatively simple tasks, a bizarre method of defining default actions (compared to other editors), its dependency on jQuery and jQuery UI (which isn’t a problem for me in my case – already leveraging both), the external popup windows it uses (e.g. hyperlinks), and the lack of useful plugins.

    Then again, I have to keep in mind that WYMEditor is pre-1.0 (0.5 RC1 at the time of this writing). My complaints are offset by the fact that WYMEditor is really fast and feels lightweight and outputs correct XHTML (although, in my particular case, I’m doing a lot of server-side filtering too in case hackers are bypassing the editor). For comparison, TinyMCE takes forever to load and is painfully slow to work with.

    Caveats: There are very few default options in WYMEditor and it looks ugly out-of-the-box, which is super great if you want complete control over every aspect (including every pixel) of the editor (which is something I really wanted) – not so great if you want a solution that you can simply throw onto a page and call it done. The community around WYMEditor is also rather small and development of the core editor is slow, so you are pretty much on your own when implementing any sort of custom solution – that is, you need to know jQuery really, really well (which I do) and be willing to stumble around the dark for a while. But you wouldn’t be reading this if you weren’t aware of these issues already.

    The reason it took so long to integrate was Christmas and New Years followed by a tight work schedule at my regular day job (this is a project being done in my spare time at home). That, combined with the attention to detail I gave WYMEditor, totals three months.

  8. And one final update for those who want to know how my adventure with WYMEditor went. It took quite a bit more effort to make it look nice and play nice since my last post, but it was well worth the trouble. I’ve implemented it into Barebones CMS – an open source product (MIT, LGPL) – and you can see screenshots and screencasts involving the Content Editor at the main Barebones CMS website (First-Time Users documentation).

    The Content Editor is a wrapper around WYMEditor that adds an optional tabbed interface, makes it have a great look-and-feel, automatically sizes it to the content, and allows the toolbar to travel with the browser’s scroll bar when content gets too long to fit on a single screen. It works in all major browsers and is about as flawless a content editor as I’ve seen in a web browser to date.

    I tried to make the component reusable. It is very easy to add a Content Editor to just about anything – as long as it makes sense in the context in which it is used.

    So, this concludes my adventure with a browser-based content editor. I’m happy with WYMEditor for the moment but the authors are probably working on ways to destroy it – making it into yet another WYSIWYG editor. However, I’m hoping that down the road we will have finally nailed browser-based editing and we can look on these series of posts and just laugh at how silly this all is.

  9. Thank you for brief explanation. Directly answered my question. Just installed nicedit in my drupal site now. Doing fine for now. Hope it suits my need.

    Thank you again for your article.
    Admin,
    GulaMelaka.com.my

  10. I have been using TINYMCE for a couple of applications but I find it so heavy and laden with bugs.

    On my latest app I am working with both tinyMCE and Nicedit and during beta I will decide on the winner.

    Nicedit is so much lighter and easy to customize – honestly I am having a great time with it.

    I hope the users market for my new product prefer nicedit as it would be great to move away from the bloated tinyMCE.

  11. If you are looking for a free WYSIWYG editor that is not as heavy as TinyMCE or CKEditor, yet is as simple to implement as NicEditor, then Whizzywig is a good compromise.

    Whizzywig generates neatly laid out xhtml, is really easy to integrate, does not depend on other libraries and has some features, like tables, that are genearrly only found in the big boys. Your mother can insert images without getting confused and you can extend it with your own buttons if you are feeling ambitious. It’s less than 30k of javascript.

    Find it at:
    http://www.unverse.net/whizzywig-cross-browser-html-editor.html

  12. I had the same problem as MPC had. I thought TINYMCE was way too buggy. But I haven’t had any problem with Nicedit.

  13. We have been using nicEdit for a couple of years now after switching from fckEditor and while yes, it is super lightweight and quick to implement and easy to use as a developer, some of the code it produces sometimes is just shocking, e.g. <font face=, <span color=

    And for some reason it sometimes likes shoving in hundreds of characters of javascript into a construct attribute for whatever reason.

  14. Something I ALWAYS need when adding text-editing tools for my clients:

    1) being able to upload and position images
    2) being able to upload pdf documents
    3) being able to link documents/files

    Lightweight solutions are nice but they always give no upload options :-|

  15. Nice one but I’m missing “past from word” control.
    Using it with customers, they ALWAYS paste tons of unpredictable code from Word.

Leave a Reply

Your email address will not be published. Required fields are marked *

Prove your intelligence before hitting * Time limit is exhausted. Please reload CAPTCHA.