TurnKey Linux Virtual Appliance Library

TinyMCE vs CKEditor: battle of titans! (of WYSIWYG editing)

Or: a quick review of the reasons we chose CKEditor over TinyMCE.

By default, content management systems such as Drupal (which we're using for this web site) expect users to format their posts with HTML markup. This can be inconvenient and deter casual contribution from members of the community who aren't completely comfortable with HTML.

Javascript-based WYSIWYG (What-You-See-Is-What-You-Get) editors to the rescue!

A WYSIWYG editor uses clever Javascript to replace the textarea input field, on the fly, with an interactive editor interface that allows users to create and format their posts the same way you would in a typical word processor. No scary HTML required! Even HTML savvy types will find that good WYSIWYG editors offer a fast and convenient alternative to formatting HTML by hand.

When we surveyed which open source WYSIWYG editor to integrate into TurnKey Drupal and into this web site two options stood out.

TinyMCE

TinyMCE started life as a freemium commercial project. At the time it far surpassed its open source rivals. Add-ons such as the image and file uploaders were available for a fee.

Since then the main free alternatives have caught up and TinyMCE itself has been fully open sourced. Today TinyMCE still enjoys a strong following and ships as the default WYSIWYG editor of hugely popular software packages such as WordPress.

CKEditor

CKeditor is a complete rewrite of FCKeditor and its official successor. It's also TinyMCE's most prominent and worthy competitor. TinyMCE had a noticeable performance advantage over FCKeditor, but CKeditor was rewritten for performance so it's at least as snappy.

IMHO, if you are using Drupal, CKeditor is an easy choice. CKeditor's Drupal module provides superior integration compared to the more-generic WYSIWYG Drupal module which is the primary way to integrate TinyMCE with Drupal. The WYSIWYG module can integrate with a range of other editors, including CKeditor itself, but it seems to be pay for that, since it's not as tightly as integrated with any of them. As the old saying goes - jack of all trades, master of none.

Drupal integration aside, I found CKeditor itself to be more feature complete than TinyMCE:

  • better multi-lingual support
  • better support for source editing, blocks
  • better support for tables, image handling, media handling, etc.

I went into the guts of the beast to learn more and was pleased to find that CKeditor is easy to customize. You can add buttons, remove buttons, change their positions, all by changing a couple of lines of javascript. CKeditor was designed with modularity in mind so you can also go much deeper then that if you're a developer. In fact, CKeditor (in its previous incarnation as FCKeditor) is integrated with MindTouch Core which we're using for our development wiki and there it looks and behaves quite differently from the CKeditor on the main web site.

Bottom line: both editors are nice, but CKEditor has an edge, especially on Drupal.

Google Trends - tapping into the Internet hive mind

One of the tricks I use when I'm surveying software is to compare how alternatives are doing on Google Trends:

Blue is FCKeditor, red is CKeditor and orange is TinyMCE. As you can see they're pretty close, but if you add FCKeditor and CKeditor together, they eclipse TinyMCE. The hive mind of the collective has spoken!

BTW, see that sharp drop in search volume right before the end of each year? That's the holiday season, and we've noticed traffic/downloads drop at the same time at TurnKey as well.

Random tip: CKeditor keyboard shortcuts

If you use CKeditor as frequently as I do a few keyboard shortcuts go a long way:

  • Pressing <Shift><Enter> inserts a line break. Just <Enter> inserts a new element (e.g., paragraph, new list item, etc.)

    Often I see community members creating new paragraphs left and right when what they really want to do is just create a linebreak.

  • Switch into full-screen mode: <CTRL><ALT><Enter>

  • Standard text editor keyboard shortcuts work as expected:

    • <CTRL> A: select all
    • <CTRL> C: copy
    • <CTRL> V: paste
    • <CTRL> Z: undo
    • <CTRL> Y: redo (also <CTRL> < Shift> Z)
  • Simple formatting shortcuts:

    • <CTRL> L: insert link
    • <CTRL> B: bold
    • <CTRL> I: italics
    • <CTRL> U: underline
You can get future posts delivered by email or good old-fashioned RSS.
TurnKey also has a presence on Google+, Twitter and Facebook.

Comments

Jeremy's picture

Nice post Liraz

I especially found the reference to Google Trends. That is something that I've never considered and I thnk its a great thing!

I'm sure many users may find the shortcuts useful. Another thing I have found is that if you change the formatting to 'Normal (DIV)' (as opposed to 'Normal') it makes the default action of <Enter> to a single line break (rather than the default of two line breaks).

One thing though "Pressing SHIFT + inserts a line break." Actually Shift + does nothing, I think you missed the "Enter" ie Shift + Enter (or as  tend to write keys <Shift><Enter>).

Liraz Siri's picture

Thanks for catching that mistake!

I'm not sure how I missed it. I think I may have written a literal in the original text and it got (mis-)interpreted as a stray illegal HTML tag.

You forgot the most important reason...

Contributor stats

CKEditor generally has 4-6 different developers working on it in any given month. TinyMCE is a one-man-band, with the occasional additional employee moxiecode comitter here and there.

Despite trying to deter bug reports by way of using the horrible sf.net issue tracker, it has still managed to accumulate 1,044 unresolved tickets - so it's hard to get even a trivial one-line (no, one character!) fix noticed by someone, unless you use the Moxiecode forums which ironically clearly states they "DO NOT" want your bug/features to be discussed.

Certainly, at $work, TinyMCE has been one of a few examples of open-source products that has taught us when choosing software to consider carefully whether a project's employee-only commit policy is mitigated by a successful mechanism to accept patches from "outside": and it seems clear that if TinyMCE had a successful developer community around it then the issue tracker would not be so hopelessly overwhelmed.

Lastly, it's worth noting that TinyMCE's plugin API itself is reasonably powerful (but the dialogue system really needs TLC) and it's actually quite "easy" to customise TMCE in the ways that you mentioned for CKEditor, too.

But if you need to poke the source code, comparing the two projects makes it quite obvious: CKEditor is (more) consistently commented, with readable method/var names, whereas TMCE's history as a one-man development effort really shows - even if the work in the last 6 months (refactoring, mostly) is gradually improving readability.

Liraz Siri's picture

Transitioning from proprietary to true open source is hard

I believe the strength of the community around an open source project is strongly correlated with the project's success. Unfortunately, projects with proprietary backgrounds have more difficulty opening up their thinking and contribution process and that creates cascading effects. Slapping an open source license is not enough.

Since projects with more development resources tend to improve at a faster rate then eventually this is something you will see reflected in the popularity and momentum behind a project (e.g., Google Trends). At this point I think it's pretty easy to predict that whatever advantage TinyMCE started out with is going to continue to evaporate and that the future belongs to CKeditor.

Interesting post + slightly off-topic pondering

Thank you for the interesting comparison!

In my organization we have recently started deploying Trac for project management purposes, and I am looking for some time now for a Wysiwyg editing solution for the Trac wiki.

So far we could not find existing Trac plugins that offer good multi-lingual support, especially right-to-left handling of content (as most of our content is Hebrew).

This led me to look for other Wysiwyg solutions, and I find CKEditor to be a promising solution, but it seems to emit only HTML markup. I was wondering if you might be aware of ways to make CKEditor emit TracWiki syntax, or maybe convert the HTML to TracWiki in post-processing. If I knew of such a solution, I would gladly write up a Trac plugin that integrates CKEditor into Trac UI...

Sorry if this is *too* off topic.. :-)

CKeditor and Mediawiki

Hi Liraz sri,

Have you got any instructions or did you tried integrating CKeditor with Mediawiki 1.15.4 ? 

I thought it would be the same as fckeditor (i mean integration), but nothing happens, even when I edit the localsettings.php with require_once to load the ckeditor module from /extensions/ckeditor/ckeditor.php

Any thoughts on this would be highly helpful and appreciated - I am not a developer but can follow instructions :-)

 

Have a good day ahead and a great blog you have with some useful tips.

Rihatum

Liraz Siri's picture

Haven't tried integrating CKeditor with MediaWiki

We might try that for the next release of TurnKey MediaWiki but at the moment that's not something I have any experience with!

Ckeditor is better

i have used ckeditor for a long time, and i hardly had any problems, while tinymce not only has a crappy support system, it just lacks certain thing such as the modularity that ckeditor has...

Seriously any serious programmer should use ckeditor.. although to be truthfull i didnt try the premium support from tinymce..

Documentation

CKEditor is really amazing.I had to switch to it from tinyMce because the media support was more advanced and it was easy to use .Only Flash is the Video supported so i decided to create my own plugin for other video types.I managed to easily setup dialog boxes but from there i got stuck due to lack of documentation.The are are few good tutorials on how to use the ckeditor api but the documentation is still poor.However i still choose to stick with ckeditor over tinyMCE.

License

One of my concerns with the two projects is looking at licensing. The CKEditor says it is "open source", but the fact that they offer a closed source license means that I would not contribute to the project becuase in order for them to continue to offer such a license they will have something that says if I contribute to their project I must give them all my rights so that they can turn around and sell my imporvements in their closed source license. Why should I help them in this regard? Also I see that their "CKFinder" is only available for purchase and not under GPL or LGPL and so they are really just using the open source model to help them get buisness, but do not really understand or embrace it.

TinyMCE on the other hand is LGPL probably because they need to compete with CKEditor and because of the type of software that it (and CKEditor) is. I feel more confident that if I contribute code to TinyMCE, I would not be required to give away my code to them so they can turn around and sell it in a closed source liencse. So even if TinyMCE is a litte less polished (although by looking at things they look very comparable) it would be the choice to go with if you really believe in open source software in my opinion.

It's a away to give something back

Thanks for the opinion, but I have to disagree.

We didn't start commercial and them jumped into the OSS train later, just to take advantage of it. We've been doing OSS for 7 years. After such long time, you can still count in one hand the number of successful editor projects that stayed that long alive. That's because OSS is hard to maintain, especially caused by the lack of "resources" (call it money). So, I assume we understand OSS pretty well instead.

CKEditor is a big project. Our company has currently 12 payed employees, almost all of them directly involved in the editor development. We could have asked these guys to work for free, but I think they would not be happy with it, and, in any case, it would not be fair.

So yes, we're a bussiness, and we're doing well in that sense as well. But we're certainly "Open Source based", offering cutting edge software, result of 7 years of hard work and a team of professionals. And yes, you can still use it for free and we don't ask you to give us anything back. Contributing is really up to you, but screaming "don't do that", because of those reasons, simply doesn't look fair, IMHO.

Btw, for the records, Moxiecode, even if much smaller, has exactly the the same business model as we have, including commercial licenses, paid add-ons and support, etc. It's probably because of this that they're the only serious OSS here to compete with us.

The commercial side

Exactly as FredCK says, Moxiecode also has a commercial side of TinyMCE in order to fund the time and resources needed for such an Open Source project so there is really no difference in that part.

In regards to contributors as csirac2 wrote about, it is true that only me and Spocke has commit access to the public GitHub source repository. But that is a quite common setup, for example the Linux Kernel have the same setup. We want to ensure good quality code and that anything that gets commited meets our standards and is as bug-free as possible. I would guess the total number of developers working on different parts of TinyMCE is around 5 at the moment. We get more and more pull requests on GitHub every week.

In regards to the original article, really doesn't sound like there was much effort done to look into TinyMCE, there are several fact errors. TinyMCE has always been under the LGPL license and never been a commercial project, and the file and image managers have always been commercial. So just about everything in this sentance is wrong:

"TinyMCE started life as a freemium commercial project. At the time it far surpassed its open source rivals. Add-ons such as the image and file uploaders were available for a fee."

As for other points of evaluation such as customization, check out the examples on our website to find out more on how to easily add buttons and other things to the toolbar.

Mediacurrent and Drupal Camp Atlanta recently did a comparison between the editors and came a different result. http://www.mediacurrent.com/blogs/wysiwyg-shootout-and-winner

In general though, there isn't much difference between TinyMCE and CKEditor and a lot of ppl just go for personal preference, but there is a huge gap to the 3rd place.

Despite my harsh comments, we're still using TinyMCE

I just found this old post accidentally, and after all this time we still haven't switched to CKEditor yet.

The github pull request approach is definitely working out: the number of contributors I'm seeing is growing all the time.

My initial friction to going with CKEditor was dealing with IE quirks. I'm sure that's probably resolved by now, I've just lacked time or reason to invest the effort.

It's funny though, one of my criticisims still holds: the modal dialogues in TinyMCE are still lame :-)

TinyMCE has turned out to be a reliable workhorse, and I really like the direction the codebase is going.

Thanks for such a solid product.

It's easy to test the winner...

CKEditor is far superior in my opinion. Here is a simple test.

 

TinyMCE demo - http://tinymce.moxiecode.com/examples/full.php
CKEditor demo- http://ckeditor.com/demo
 
Step
 
1. Goto Facebook.com google.com or any of your favourite sites
2. Select all (Ctrl-a), Copy to clipboard (Ctrl -c)
3. Paste into the demo boxes above (Ctrl-v)
3. Compare results.
 
CK Editor renders perfectly! Now not a scientific result but gives you an indication of where things are. Cut and pasting is really a absolute key feature in a web CMS environment. TinyMCE just has way too many bugs.
 
I see now though that they have more support behind them via Ephox. Can they catchup though is the question? http://tinymce.ephox.com/about/enterprisetinymce

You've got a really good

You've got a really good test. I am currently using TinyMCE and have many issues pasting from Word.

Pasting the same formated text from Word worked great on CKEditor. I guess I am moving to CKEditor.

use KCFinder, not CKFinder

use KCFinder, not CKFinder

Very useful information

Hey Liraz, thank you a lot for the time you took to put this article together. Today I was looking for a WYSIWYG control for my next project (kbserv.com). Of course the two finalists were TinyMCE and CKeditor. I liked that you didn't limit yourself to list features that we can easily find on their respective websites, but that you added your personal analysis. And many comments were useful as well, especially csirac2's. So I'm going with CK too and I know why. :)

Ckeditor to TinyMCE and back again!

My only complaint with CKeditor is that some of the button icons are a big chunky on the edges. After using Ckeditor for some time I tried out TinyMCE. Big mistake! The html it outputs is horrible tag soup!

Lesson learned. CKeditor is awesome.

CKeditor and FCKeditor

CKeditor and FCK editor. What's the difference? I use FCKeditor and get the message to upgrade above the articlebox. I did, but I see no difference and the message is still there!

I can't find on the site what the difference is between the two. Can somebody help me out?

Ron from Holland

difference

Hoi Ron,

The CKeditor is FCKeditor newer version.
I've several websites running FCKeditor in Drupal and in Internet Explorer 9, using buttons from FCK Editor everything hangs. Then you've got to update to CKeditor to solve that problem.

Difference: FCKEditor is not working in IE9, CKeditor does for Drupal.

There's patches and fixes for

There's patches and fixes for the IE9 problem(s) either from FCK him/them-self or suggestions from Uncle Google.

Developing Plugins for CKeditor

We are using CKeditor and are happy with it so far. Unfortunately there is some functionality needed now, that is not available. So we looked into plugin development for CKeditor.

It was quite alarming to see, that

a) there is no documentation about plugin development (see here)
and
b) seems that since more than 2 years they didn't manage to create such a docmentation (!!!)  (see here)

 

How is a project supposed to grow if it is really hard for others to make changes and/or contribute?!

We're working hard on that

Thanks for your comments Karim... since December we have one person working full time on documetation. We understand that this is something we need to work more and we'll be doing our best to have more there soon.

Hebrew fonts?

Hi there,

I'm not sure where to go and what to do, I've spent hours trying to get a module or some advice that a non-programmer like me can understand and use to make ckeditor or tinymce have Hebrew fonts. Or anything that will work. 

Can somebody please help me? (I'll pray for you for a blessing :-))

regards

Gerhard

Thanx, man It was realy

Thanx, man

It was realy helpfull post. Will go to use Ckeditor.

is this what I need?

Hi quick question about the use of the CKeditor... I have a user form That users fill in, it has a few common fields line name, email etc. That get linked to an mysql database. On that form I have a large textarea Field that gets posted to my web page. Could this product capture that Text entry and convert it to html so I don't have to do it myself. Just Trying to understand the use of this application. Is it simple to incorporate Into my php form? I know some php and html. Thanks in advance for your remarks.

plugin ckeditor

unfortunately there is still no plugin documentation for the ckeditor...hope there will be one soon! (then my choice would definitively be ckeditor)

Yes, there is!

Font

Nice post, makes decision easier now on which RTE to use. I am pretty new to web based development. Can you tell me what font and/or styles you use for this blog? The text is sharp, easy to read, and well, looks better than what I'm using. Appreciate it, thanks.

Liraz Siri's picture

Try FireBug

That way you can get at the typography of any website you come across rather easily by selecting the text elements you wish to inspect. This blog's typography is pretty pedestrian. Here are a few of the properties we're using:

# for the text
font-size: Verdana, sans-serif;
font-size: 12px;
color: #272727;
line-height: 1.65em;

# for the titles
font-family: "Trebuchet MS", "trebuchet", "Nimbus Sans L", sans-serif;
font-size: 2.3em;
color: #5a3320;
font-weight: bold;
line-height: 1.25em;
text-shadow: 1px 1px 0 #ddd;

Thanks for the feedback.

ckeditor is better than

ckeditor is better than tinymce with no deny. 

1. api, 

2. ticket support ( a place to post bug )

3. forum, 

4. ease for tailor making. 

etc . 

What?

Jason seems confused.

1. tinymce api

http://www.tinymce.com/wiki.php/API3:tinymce.api.3.x

2. ticket support (a place to post bug)

http://www.tinymce.com/develop/bugtracker.php

3. forum

http://www.tinymce.com/forum/

4. ease for tailor making?

Not sure what you mean, but might want to check the TinyMCE documentation.

HOW TO MAKE CAPTION FOR ARTICLE IMAGE ITALIC AND DIFFERENCIATE

Hello.

How do I make a Italic for each caption of article image in order to differentiate image description from article.

How current, how old, how valid are the comments?

Posting the month, date of the month, day of the week and time of the day is all very well, but unless you include the year this date information is about as much use as a chocolate tea pot.

I mean, who knows how out-of-date all those valuable contributions are.

Tezza

December 2011

Clear sight

There is significant debate going on as to whether time exists on the Internet. 

All kidding aside, however, I couldn't agree more. 

ps- Chocolate tea pots do have an excellent use, just probably not for making tea. 

TinymceSupport.com

I agree with Afraithe, in terms of fucntionality, the differences between CKEditor and TinyMCE are few.

 

If you're looking for professional TinyMCE development or support, check us out at

http://TinymceSupport.com

 

Cheers,

Yonas

Found a flaw with Ckeditor

Once I get used to where this, and that is in all those buttons, the Ckeditor will be my new play toy!

Unlike the other editor, the appearance of the text in the editor screen, will look exactly as it appears in the browser screen.

The only flaw I've seen so far is nearly 30 buttons are hid from view when you click the "Maximize" button. They are underneath the WordPress tool bar, which can't be removed without logging out. 

Other than that, this is the kind of editor I've been wishing some one would come up with for a long time.  Love the skins and all those extra editing tools!

tinyMCE image scaling not supported on webkit- Chrome and Safari

TinyMCE  - Image scaling is not supported on Safari and Chrome. This was noticed some 3 years ago but still have not beed fixed/added.  

Multiple editors can be a problem with TinyMCE

Apart from other problems , I have noticed that when there are multiple editors , tinymce doesnt destroy them as well as CKEDITOR . This is because of lots of events generated and destroyed using some wrong Logic ? Anyway the developers of TinyMCE told me that they will be fixing it in major release .Otherwise Tinymce Vs CKEDITOR is fairly equal I think . Currently we are switching to CKEDITOR in our product but if TinyMCE becomes better some day than CKEDITOR we might switch back . We revised our code to make our Web App less dependent on these WYSIWYG editor and make them flexible . That is THE best way to go about it ... even google might come up with a product in thsi space ...

But I see that...

You're using ckeditor :P

Both are equally frustrating

We've flip-flopped between CKEditor and TinyMCE many times and both have their quirks and annoyances. I can't tell you how many times we've been frustrated and lost developer and support time due to both.

There's a promising new HTML5 WYSIWYG editor that looks really good though. Try out SnapEditor. It's definitely more restrictive but it seems pretty solid. It also does both in-place and form-based editing, which means you can use the same editor in different scenarios.

Oh, really!!!

Man... I tried that snapeditor and its really really weird... nothing works well with that.

Good luck on spamming around your editor!

Inline Editing in new CKEditor

On a related note, CKEditor 4 was recently launched with inline editing support and a new skin. Might be worth an update: http://ckeditor.com/demo#inline

I have searched a plugin for

I have searched a plugin for Google Maps for TinyMCE and failed :(

Currently I use CKEditor + Google Maps plugin and all is OK :)

Google Maps Plugin screenshot

Inline Editing gives CKeditor the edge

I've choosen CKEditor, does the job for my sites so far. As for image uploading, TinyMCE's MoxieManager is about 75 Euros but there is a free plugin that just uploads images at (justboil.me). As for CKEditor's CKFinder media manager, is $100, but there is a free alternative called kcfinder

http://www.hyipbox.com

ckeditor no good for newbies

I have recently tried using ckeditor as it looks like the best option for a solid cms. My problem is that I can't find a tutorial which explains in enough detail exactly how to set it up. I've managed to get it going but it won't let me insert images (just strips the img tag right out of there) and the same is true of tables. I can't even come close to making the uploader work. I am not a seasoned coder but I know a lot of java script, does anyone know of a decent tutorial?

CKEditor notes

CKEditor doesn't include a file manager, so out of the box you only have image linking. A tutorial on how to set up a file manager of your choice is here. CKEditor also has a feature called ACF which strips disallowed code. If you don't include the Image plugin ACF will strip image tags from the WYSIWYG area. It's used on sites that want to control content (I think this site uses it). You can turn off ACF by adding this code to your config.js file: CKEDITOR.config.allowedContent = true

 

TinyMCE is much better

As an average Drupal 7 end-user, I have tested CKEditor 4.4 (and older versions as well) and TinyMCE 3.5.11 extensively, especially using responsive images inside figure tags, and TinyMCE gave me much better results, it works more predictably, is easier to configure and gives more real WYSIWYG experience. It is uglier and the source html code is a mess (visually), but it works better.

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account, used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> <font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <strike> <caption>

More information about formatting options

Leave this field empty. It's part of a security mechanism.
(Dear spammers: moderators are notified of all new posts. Spam is deleted immediately)