UPDATED: June 2017
There are different out of the box wysiwyg’s for the web. Prominent exponents of web-html-wysiwyg’s are the CKEditor or the TinyMCE. Paid (yet still extendable) solutions include Froala and Redactor. Which one’s right for you?
TL;DR: If you’re commercial, use the Froala Editor. If you’re not or need an open source editor use TinyMCE.
Here’s a more comprehensive breakdown of all editors.
The CKEditor is the most broadly adopted Wysiwyg editor nowadays. Google trends confirms this compared to it’s main competitor TinyMCE. Yet, I completely do not understand how it got there. It’s quickly installed, I’ll give it that much. But the developers seem not to have the slightest clue about design or usability. Here’s how it looks like:
It looks very heavy and old-fashioned. But the problem really starts when looking at the more complex features. Like inserting a table.
I think this interface speaks for itself.
The next atrocity follows once you have the table input inserted:
Yes, I know this is how browsers render tables historically, but couldn’t the editor somewhat ease the pain? Every other editor I found doesn’t display it like this.
Anyways, let’s move on and insert an image:
Again, we are confronted with a beautifully designed dialog. Not. I don’t want to waste anymore space, so I’ll not post more CKEditor popup dialogs. So what are the good parts about the CKEditors? Well, there are plugins, it’s customizable and it’s got broad adoption so you’ll find some help for your problems on the interwebz.
One other thing I noticed, is that CK is more aggressively converting your input than other editors. For example a tick (‘) is left alone by most editors, while CK converts it to '. Whether you find this good or bad depends on what you want. By the way, did you know that the CKEditor used to be the FCKEditor named after it’s creator Frederico Caldeira Knabben, but then they noticed fck is too close to f*ck?
Ah, away from the horrors that is the CKEditor and onwards to adventures with TinyMCE. The name means it was “Tiny Many Centuries Earlier”. Which is not that bad, computers get faster, but some people in the community don’t like it.
So at first sight TinyMCE looks nicer than the CKEditor.
I understand most of it’s elements as only the common ones are itemized and for the others they use dropdown menu’s and text-labels. If you haven’t given this too much thought, here’s why this is a good move. Let’s continue by inserting a table:
What I like about it, is the grid-selection of the table size. What I don’t like about it is, that it show’s 1 option which is clickable and 5 options which aren’t.
Why is it showing this to me? Well anyways, this is a detail. Afterwards, the inserted table looks nice and I get options to edit it:
So all-in-all the TinyMCE table experience is satisfactory but not overwhelming. Let’s perform an image upload next. Oh that’s right, I can’t. I can only link a URL where my image is. That’s really handy of course, since I always upload my images first to another server, before using them on the actual platform! Great!
Of course, for any image upload to a server, the editor can’t do it by itself, but I think it should at least provide the interface and explain how you can wire it to your server. I tried to Google for a workaround, but wasn’t finding anything fast, which is usually a bad sign. On the other hand, I’m sure there are things and even if there are not, adding a “Add Media” button yourself won’t be too hard. Actually, WordPress does it like that:
They use the TinyMCE with an external button to upload media. So if TinyMCE is good enough for WordPress, it will surely be good enough for you? Well, consider that WordPress has been around for quite a while and so has TinyMCE and it thus just might be a legacy choice. Also, WordPress has to use open source code in order to be able to distribute it. The next option will be a paid one, so if your solution doesn’t need to be open source, you might consider it.
Ahh isn’t this a bliss? Start’s really nicely. Until you notice it’s not free.
Well, can I still customize it? Yes, you can. You can write plugins https://www.froala.com/wysiwyg-editor/docs/concepts/create-plugin for this editor, as well as for CK or TinyMCE. The only difference is that it will make you between $99 and $799 poorer, while looking better. Let’s see whether the table feature and images are implemented better than in CK or TinyMCE. That’s really the anything hard for a wysiwyg anyways. Making something bold I could even do myself… So, tables:
That’s all I need for inserting! Thank you! Editing tables:
I can only say one thing: Very sophisticated and thought through. Borders are draggable and stylable and individual cells are even colorable.
What about images?
YES, this is what I need! First priority: UPLOAD. If you really want to, then fine, click that darn link so you can insert an image by URL. How does it look like once it’s inserted?
Wow, I can resize it and everything! That’s just great.
I want to conclude the summary about Froala with a statement that I’m not affiliated with them or their product. Simply the frustration about CK and Tiny got me to be so excited about something that will cost you 800 bucks for commercial use. Following are some more editor’s, just not described as in detail anymore.
I wrote this review originally about Froala Editor v1. Now they have released a v2, and it’s even better. We’re now using the Froala Editor in our product Taskbase including customizations. Their API is intuitive and it was a joy to work with it. With only 300 lines of code I managed to strap together a math plugin, gap text plugin and a special list feature. All the options of the editor are well documented and useful. They found a good balance between powerful features yet not overloading the editor and it is really well designed (code as well as layout). When you buy the editor, you can download the full source code. However, I would not recommend you to “hack their core” (google hacking core if you haven’t heard of this), but instead to write plugins. This way you’re sure to stay compatible with their updates.
Next to Froala, there is another paid wysiwyg editor. It’s called Redactor. Redactor has less features than Froala. They only allow for full-width images and full-width tables. Furthermore tables cannot be stacked into each other or customized. Those restrictions might be exactly what some people are looking for.
However, I think even if you want a simplistic editor Froala is the better choice. You may easily take out a lot of functionality out of Froala (e.g. not displaying a file upload button or a change-color button) but once you decide afterwards you want those things anyhow, you’ll be damn glad the editor already has them and you don’t have to program it yourself!
QuillJS is a a nice option if you want an editor that works without JQuery, for example if you need to use the ShadowDOM. It’s an open source project you can find on Github at https://github.com/quilljs/quill with over 13k stars.
On the downside it doesn’t offer extended functionality like for example tables.
While ContentToolsJS also has a strong focus on beauty, it throws overboard quite a lot of the classical editor notion. Their editor just dangles in the air, which I imagine could become a problem on mobile phones? Also I couldn’t find anything about cusomizability, so I expect that I couldn’t write any plugin for it. Last but not least, let’s inspect our favourite quality give-away element, the table:
It’s not customizable at all and always equidistant (here ⅓, ⅓,⅓ ). So if you Have a lot of text in let’s say column two and three and only labels in column one, then you’re “the former name of ck-editor-ed”
While all the other editors discussed so far were HTML editors, let’s review a markdown editor for a change. It’s easier to write a markdown editor because it’s only a subset of the html features, but on the other hand you’ll have to live with those restrictions afterwards. SimpleMDE has done a good job with bold, italics, headings and so on. As usually. It’s left out tables even though those would be supported by Markdown. Shame on you SimpleMDE! Still the best Markdown-Almost-Wysiwyg out there.
I’ve tried a bunch of other editors like Trubowyg, textAngular or Summernote. I’ll just say they didn’t really convince me and leave it at that. Choose Froala and go out and play rather than reading about more editors!
Just for fun: If you want to see how Wikipedia does it, you can! Just click on “edit” in Wikipedia. For the German pages, they have a quite elaborate editor catering to almost any need:
I wouldn’t have thought it’s so damn hard to find a decent wysiwyg in 2016. But apparently it is. If you need an open source solution and can’t spare a few bucks, TinyMCE is the best option. If you don’t mind spending a little money or it would be more expensive for you to program your custom “Add Media” button, choose Froala. If you don’t want to take my word for it, here’s another review.