Grow your CSS skills. Land your dream job.

What Do You Think is the Best Online WYSIWYG Editor?

Published by Chris Coyier

This question was sent in by Edwin.

To clarify, I believe Edwin is asking about these JavaScript scripts you can use on website which turn regular <textarea>s into more robust editing environments. You'll recognize one in use right here on CSS-Tricks:

I like editors like this, especially in WordPress comment forms. WordPress allows commentors to use HTML tags in their comments, like <strong>, <em>, and <a href=""> tags. That's nice, but not all commentors may feel comfortable using tags like that. Instead users may just select text and press buttons just like they are accustomed to doing in something like Microsoft Word.

I'm using the wmd editor in my comment area on CSS-Tricks, which isn't exactly a WYSIWYG (What You See Is What You Get) editor, but as they put it, a WYSISYM (What You See Is What You Mean) editor. The difference is that wmd uses the "markdown" language inside the actual text area. Markdown is simple conventions like surrounding a word with asterisks (*) to emphasis it. Behind the scenes, those asterisks are converted into actual <em> tags. There are similar conventions for bold text, links, code samples and quotes. That's about all I need on CSS-Tricks!

So the reason I chose the wmd-editor is:

  • Very easy to install. One line of code to link to self-hosted script and that's it.
  • Very easy to customize. Get rid of those buttons I didn't need.
  • Provides live comment preview, so people can see what their comment will look like before posting.

The wmd-editor isn't the most popular editor on the block. There are far more robust systems out there you may want to look into if you need more power. Check out tinyMCE and FCKeditor.

Comments

  1. Permalink to comment#

    No WYSIWYG editor fits my needs. The wmd-editor, while simple and clean, is not a true WYSIWYG. I’ve had tons of problems with FCKeditor (and it’s really bloated). tinyMCE, while nicer than both above, still has its problems.

    I’d like a WYSIWYG editor (preferably based off of jQuery, but not required) that has support for both HTML and BBcode outputs, with easy-to-customize settings and feel just like MS Word but without the clutter.

    I look forward in hearing suggestions from others about recommendations.

  2. Permalink to comment#

    Personally use the wymeditor which does pretty much the same thing but being jQuery based fits in well with any other javascript I implement.

  3. I think anything that can parse and display content ‘copy’ and ‘pasted’ from a word doc will be rated highly.

    clients are constantly calling and complaining that their content doesn’t look the same, or there are errors showing etc.

    But until I find this perfect wysiwyg editor I think FCK editor and TinyMCE are well established ones.

  4. Permalink to comment#

    I like markitup. It is jQuery based, able to show preview, works with BBCode, HTML, Markup and so on :)

  5. Permalink to comment#

    @Dmitry – thanks for the link – I’m going to try it out now. This may be my new favorite WYSIWYG editor.

  6. I use FCKEditor for my customers’ content management systems.

  7. Permalink to comment#

    Nicedit is a nice one and very customizable. (I have helped redesign the site. Hehehe).

  8. Permalink to comment#

    I perfer xihna. I actually prefer people learn a little markup… There are no great solutions, as none of them fix not understanding proper markup.

  9. Permalink to comment#

    Sorry, I forgot to give the link: http://nicedit.com

  10. Permalink to comment#

    Oh, by the way, Ray Cheung posted an article about a Word-like WYSIWYG Editor on WebAppers yesterday. It is called FreeRichTextEditor (not very original this name).

  11. Tom
    Permalink to comment#

    TinyMCE for me at the moment, for client CMS use. I hate using them personally. But that one seems to produce screwy markup less than others I’ve tried before.

    Think I’ll be trying markitup as per Dmitry’s suggestion above–there’s enough jQuery going on in my stuff already. Might as well be consistent.

  12. I’ll have to try markitup. I love that it’s jQuery and it looks like it works great.

  13. Permalink to comment#

    I have used MarkItUp on all my projects and it is very simple to use. I like the look of nicedit though!

  14. Juan Gotti
    Permalink to comment#

    Honestly Im impressed with the perfect timing of this posts, always come at the right time. I have tried MarItUp, FCK, TinyMCE and so on, but for some CMS y just need a WYSIWYG editor that only output the for the paragraphs and nothing else… I know is a little bbiizzaarree thing to do, but that’s what I need =S

  15. Permalink to comment#

    I have used MarkItUp on all my projects,i like

  16. Permalink to comment#

    for asp.net, you can’t beat FreeTextBox (http://freetextbox.com/) you use it just like any other asp.net control, it is great, free and open source!

  17. If all you want to do is spice up the comment form on your blog with some basic text formatting tools, then sure, FCKEditor is probably overkill (even though it can be stripped down to do that job efficiently as well), but if you need something more powerful and extensible, FCKEditor really stands in a class by itself. I have yet to see a competing tool with anything close to its depth of features and support for customization.

    For instance, FCKEditor has a true server-side API which allows you to create a “connector” in your middleware language of choice for integrating its media manager, allowing users to upload and manage files which they can insert into the content they’re editing. It ships with connectors for 9 languages.

    There is also a plugin system which provides complete control over the markup the editor produces. Don’t want your content saved as XHTML? Switch to BBCode, markdown, or something of your own design. It also supports templates, paste from Word, and other features that just don’t exist in most other packages.

  18. Permalink to comment#

    I used FCKeditor for personal and client sites (Drupal). I find it the best for pretty much the same reasons as Nick Lewis recently blogged about. I do strip out a lot of the stuff though… a lot of it is completely unnecessary, especially for clients.

  19. Beejay
    Permalink to comment#

    I’ve actually been using the YUI text editor lately. It’s fairly easy to implement, and seems to get the job done. Of course, if you’re not already using YUI in your project, I expect loading up all the js files may not be worth just the editor.

  20. Permalink to comment#

    I believe WYSIWYG is the best.

  21. Edwin
    Permalink to comment#

    Thanks for all the interesting reactions. I am currently using FCKeditor and thinking about TinyMCE. I will take a look at the other editors mentioned here too.

  22. They all do a bit too much for our needs. What iwould really like is a simpole RTE form which doesnt allow people to pase in images. Any ideas?

  23. Permalink to comment#

    I’ve used tinymce so far but found it way too bloated and unfriendly. I’ve been searching for an easier one for ages, this thread really should help out!

  24. Edwin
    Permalink to comment#

    I think maybe it would be the best idea to create one myself with jQuery for example. But that would cost a lot of time…

  25. I like this editor. Now, I just need to figure out how to add it to my wordpress comments here

  26. John
    Permalink to comment#

    I would suggest everyone to look into using YUI Editor from Yahoo … It is simply amazing! It works great and looks neat too.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".