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.