23 WYSIWYG Editors that make editing your content a breeze.

April 25, 20151 Comment


It’s been about 6 years since I first blogged on the subject of WYSIWYG editors.  Since then the web has thankfully moved on, and we are lucky enough to have powerful javascript engines and better browsers to handle even the most intensive of word processing and content creation tasks.

1366704248270

On large projects, most developers realise that a good javascript text editor on the backend is more than worth it’s weight in gold. It’s the glue that will ultimately hold your website together when you relinquish control to users and they begin to add any kind of user generated content, and the lynchpin that dictates whether you’ll be taking numerous support calls from your clients.

Ultimately, giving control of your site look and feel over to your end users, and making an interface that they won’t mess with is a tricky problem…Give users too much control, and your site turns into a dogs dinner of messy HTML tags, scrolling marquees and XSS security nightmares.

Don’t give enough control, however, and you’ll be plagued with requests for “how do I add this?” or ” can you not add the text and make it look pretty?“.

The following editors are some of the best that I’ve personally found on the web at time of writing. Some are more heavyweight than others, and it is an exercise for the reader to determine the more appropriate of the options to their particular project.

Lightweight editors

Frola

Froala

Frola has full mobile support, as well as inline WYSIWYG, meaning you can literally watch the elements of your site change on the fly as you use it. There’s also full html5 support under the hood. It’s completely free for non commercial applications, but you’ll obviously need a license for anything you are selling.

WYMeditor

WYMeditor

WYMeditor is an open source web-based WYSIWYM editor with semantics and standards in mind.

The “WYM” part stands for What You Mean (is what you get). This is in contrast with the more common WYSIWYG—What You See Is What You Get.

Thus WYMeditor is different from the more common editors (like TinyMCE and CKEditor).

Its focus is on providing a simple experience for users as well as the separation of the content of the document from the presentation of the document and also adheres to web standards.

Others.

Heavyweight editors

Sometimes you do need the kitchen sink, and extensible functionality in the form of custom plugins. Of the systems mentioned below most have an extensible architecture to facilitate that, or a number of existing modules to assist with your word processing task.

Aloha Editor

Aloha Editor

An active project with a decent sized community backing it, Aloha is again a commercial project with an abundance of features for developers.  In a similar way to Frola, Aloha Editor is built to facilitate editing of content within the same layout that is shown to readers. In this respect, it is different from most other web-based wysiwyg editors andfeatures a floating contextual toolbar that hovers over content that the user is actively editing. Aloha Editor also tries to implement its functionality respecting the HTML5 Specification Draft. Dependencies include jQuery and requireJS as it relies heavily on requireJS to load modules, making it quicker than most to load on demand.

TinyMCE

TinyMCE

An extremely mature project, with over 100 developers working on the source code, and 4000 odd commits, tinyMCE is in use across a variety of closed and open source projects including WordPress, so it arguably boasts some of the most rigorous testing of such software across the web. Although a couple of modules are available in commercial forms from the original developer Moxiecode. Again it has a plugin architecture that facilitates the creation of additional modules.

CKEditor

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 quick. It has caught up with the features of TinyMCE, and IMO, surpassed some of them with the introduction of optional inline editing, making it a worthwhile of your consideration for your next project.

Others.

As you can see there are a wealth of options now available to developers, as browser support for the latest features in the HTML5 specification advances. Hopefully some of these will assist you in making the right decision on your next project.

Filed in: Programming
Tagged with:

Comments (1)

Trackback URL | Comments RSS Feed

  1. ContentTools (http://getcontenttools.com) is another WYSIWYG editor that might be of interest (disclosure: I’m the author of the project).

Leave a Reply

Back to Top

Share This