What Do You Think is the Best Online WYSIWYG Editor?

* October 13th, 2008 *

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.

Responses

John
October 13, 2008
[ permalink ]

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.
cole
October 13, 2008
[ permalink ]

Personally use the wymeditor which does pretty much the same thing but being jQuery based fits in well with any other javascript I implement.
Darren McPherson
October 13, 2008
[ permalink ]

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.
Dmitry
October 13, 2008
[ permalink ]

I like markitup. It is jQuery based, able to show preview, works with BBCode, HTML, Markup and so on
John
October 13, 2008
[ permalink ]

@Dmitry - thanks for the link - I’m going to try it out now. This may be my new favorite WYSIWYG editor.
David Walsh
October 13, 2008
[ permalink ]

I use FCKEditor for my customers’ content management systems.
jeeremie
October 13, 2008
[ permalink ]

Nicedit is a nice one and very customizable. (I have helped redesign the site. Hehehe).
ammodump
October 13, 2008
[ permalink ]

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.
jeeremie
October 13, 2008
[ permalink ]

Sorry, I forgot to give the link: http://nicedit.com
jeeremie
October 13, 2008
[ permalink ]

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).
Tom
October 13, 2008
[ permalink ]

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.
Chris Coyier
October 13, 2008
[ permalink ]

I’ll have to try markitup. I love that it’s jQuery and it looks like it works great.
Colin
October 13, 2008
[ permalink ]

I have used MarkItUp on all my projects and it is very simple to use. I like the look of nicedit though!
Juan Gotti
October 13, 2008
[ permalink ]

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
gaijun
October 13, 2008
[ permalink ]

I have used MarkItUp on all my projects,i like
naspinski
October 13, 2008
[ permalink ]

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!
Jason Huck
October 14, 2008
[ permalink ]

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.
Amy
October 14, 2008
[ permalink ]

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.
Beejay
October 15, 2008
[ permalink ]

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.
Krishna
October 16, 2008
[ permalink ]

I believe WYSIWYG is the best.
Edwin
October 16, 2008
[ permalink ]

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.
Matthew 'Web Design' Adams
October 17, 2008
[ permalink ]

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?
Bramme
October 19, 2008
[ permalink ]

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!
Edwin
October 19, 2008
[ permalink ]

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…
Allan Bunt
November 1, 2008
[ permalink ]

I like this editor. Now, I just need to figure out how to add it to my wordpress comments here
John
November 11, 2008
[ permalink ]

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

John
October 13, 2008
[ permalink ]

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.

cole
October 13, 2008
[ permalink ]

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

Darren McPherson
October 13, 2008
[ permalink ]

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.

Dmitry
October 13, 2008
[ permalink ]

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

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

David Walsh
October 13, 2008
[ permalink ]

I use FCKEditor for my customers’ content management systems.

jeeremie
October 13, 2008
[ permalink ]

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

ammodump
October 13, 2008
[ permalink ]

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.

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

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).

Tom
October 13, 2008
[ permalink ]

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.

Chris Coyier
October 13, 2008
[ permalink ]

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

Colin
October 13, 2008
[ permalink ]

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

Juan Gotti
October 13, 2008
[ permalink ]

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

gaijun
October 13, 2008
[ permalink ]

I have used MarkItUp on all my projects,i like

naspinski
October 13, 2008
[ permalink ]

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!

Jason Huck
October 14, 2008
[ permalink ]

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.

Amy
October 14, 2008
[ permalink ]

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.

Beejay
October 15, 2008
[ permalink ]

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.

Krishna
October 16, 2008
[ permalink ]

I believe WYSIWYG is the best.

Edwin
October 16, 2008
[ permalink ]

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.

Matthew 'Web Design' Adams
October 17, 2008
[ permalink ]

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?

Bramme
October 19, 2008
[ permalink ]

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!

Edwin
October 19, 2008
[ permalink ]

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…