Best WYSIWYG Editor for Web-Content

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.

CKEditor

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:

CK Editor Screenshot

It looks very heavy and old-fashioned. But the problem really starts when looking at the more complex features. Like inserting a table.

CK Editor Table Insertion

I think this interface speaks for itself.

The next atrocity follows once you have the table input inserted:

CKEditor Tables

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:

CKEditor Image Insertion

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?

TinyMCE

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.

TinyMCE Screenshot

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:

TinyMCE Table Insertion

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.

TinyMCE useless buttons

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:

TinyMCE table editing

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!

TinyMCE image insertion

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:

Wordpress Add Media Button

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.

Froala

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:

Froala Table Insertion

That’s all I need for inserting! Thank you! Editing tables:

Screen Shot 2016-05-12 at 01.42.58

I can only say one thing: Very sophisticated and thought through. Borders are draggable and stylable and individual cells are even colorable.

Froala Tables

What about images?

Froala Image Insertion

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?

Froala Image Editing Part 1Froala Image Editing

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.

Update

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.

Like what you're reading?    Get the latest updates first!

No spam. Just great engineering posts.

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.

Redactor Screenshot

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

Screenshot of the QuillJS editor

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.

ContentToolsJS

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:

ContentToolsJS Screenshot

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”

SimpleMDE

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.

SimpleMDE Screenshot

Other Editors

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:

Wikipedia Editor Screenshot

Conclusion

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.

10 Replies to “Best WYSIWYG Editor for Web-Content”

    1. Thanks for the input. It made a good first impression. It’s quite similar to Froala, just with less features. But when I inserted a table I couldn’t get to insert text below the table anymore. So that’s a killer for me. Also having one such bug let’s me suspect there are more I just didn’t discover in my 2 minute testing…

  1. Just wanted to point out that Redactor is not actually limited to only full width images. Once you click on an image, you can drag the corner to resize as well as click “Edit” to align and change settings.

  2. Is there a way to get the Froala editor to work with an asp or asp.net upload feature, my server is not configured for php

    1. Thanks for the input! CKEditor 5 is very new and unstable whereas Froala is an established Editor. CKEditor 5 doesn’t yet have very many features, e.g. no table support yet. Furthermore, if you want to use it for free it’s under GPL which means you must open source your code as well. If you buy commercial licence it’s similar to Froala. Personally I’d stick with Froala, but let’s see what CKEditor5 brings to the table in one year or so…

Leave a Reply

Your email address will not be published.