There are different out of the box WYSIWYG’s for the web. The grandfathers of WYSIWYGs for HTML are the CKEditor and TinyMCE. Recently, competitors like Trix Editor and QuillJS have been on the rise. Paid (yet still extendable) solutions include Froala and Redactor. Which one's right for you?
CKEditor
The CKEditor is the most broadly adopted WYSIWYG editor nowadays. Google trends confirms this compared to it’s main competitor TinyMCE.
It's been around for a long time, which might explain how it got to it's market leading position. It's also quickly installed. In terms of design, it's come a long way since its early days. Still, it's not the most pretty editor out there in my opinion. But judge for yourself:
However, things like inserting a table are still very archaic, even in the newest version:
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? The more you know...
TinyMCE
So let's move onwards to new 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 a bit more modern than the CKEditor.
What I like about it at first glance, is that they use text-labels for non-obvious parts of the editor, rather than finding an obscure icon for everything that no-one understands. If you haven’t given this too much thought, here’s why this is a good move. Let’s continue by inserting a table:
Inserting the table is nice and intuitive. The inserted table looks nice and I get user friendly options to edit it:
So all-in-all the TinyMCE table experience is quite satisfactory. 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, adding a "Add Media" button yourself won't be too hard. Actually, Wordpress does it like that:
They use 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.
But to summarize on TinyMCE: I find it quite ok for that it's free and open source and would certainly prefer it to CKEditor.
Froala
Ahh isn’t this a bliss? Start’s really nicely. Until you notice it’s not free.
Interesting sidenote: When I first wrote this article in 2016, the pricing was a bit different with $99, $299 and $799 for the different options. Should we just blame the inflation?
Just because something costs money, it doesn't mean it's bad though. Actually after evaluating the WYSIWYGs in 2016 we decided to go with Froala and didn't regret our choice since. You can write plugins https://froala.com/wysiwyg-editor/docs/concepts/custom/plugin/ for this editor, as well as for CK or TinyMCE. Let’s see whether the table feature and images are implemented better than in CK or TinyMCE. That’s really the only hard thing for a WYSIWYG anyways. Marking something as "bold" isn't really that hard to do. So, tables:
That’s all I need for inserting! Thank you! Editing tables:
It's looking quite sophisticated and thought through. Borders are draggable and stylable and individual cells are even colorable. Most features you can turn off as well, if you don't want people to do too crazy things with the editor.
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 that much money for commercial use.
I wrote this review originally about Froala Editor v1. Now they have released a v2 and then also v3, and it's even better. I was using the Froala Editor in several projects and also wrote my own plugins for it. 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.
Redactor
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 though!
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
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.
Trix
Trix Editor is something different from the ground up. They claim to have a cleaner approach that doesn't use the
browsers execCommand-API, the result being a less buggy and quirky WYSIWYG. The Trix Editor has it's
own document model, what makes it well suited if you need full control over what's happening.
The installation process feels a bit weird, since they just tell you to include the .js and the
.css file, but not how you get them. So what do you do now, download the github repo, look for a CDN,
search for an npm module? Their readme doesn't even include the word npm. Not having a clear instruction on how to install something is quite the failure on
documentation if you're asking me.
It's quite minimistically yet nicely designed, making suitable to use together with almost any design of your website. Here's how it looks like:
Conclusion
I wouldn't have thought it's so damn hard to find a decent WYSIWYG in 2020. I originally wrote this article in 2016, but honestly, not that much changed since then. CKEditor is still not the most modern and user friendly, TincyMCE is still quite ok, Froala got quite a bit better (no more jQuery for example) but also more expensive and Trix still doesn't support tables. So, if you need an open source solution or don't want to pay anything, 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 need support for Tables and you need full control over what the editor does to your text, such as for example generating an output that isn't actually HTML, consider the Trix Editor.