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.
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 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.
- TinyEditor (jQuery) https://github.com/jessegreathouse/TinyEditor/
- WYSIWYG (jQuery) http://maccman.github.com/wysiwyg/
- bootstrap-wysiwyg (jQuery) https://github.com/mindmup/bootstrap-wysiwyg/
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.
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.
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 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.
- YUI Rich Text Editor – Editor (YUI) http://developer.yahoo.com/yui/editor/
- Mercury Editor (jQuery, CoffeeScript, Rails) http://jejacks0n.github.com/mercury
- YUI Rich Text Editor – SimpleEditor (YUI) http://developer.yahoo.com/yui/editor/
- goog.editor (Closure Library) https://github.com/google/closure-library
- jHtmlArea (jQuery) http://jhtmlarea.codeplex.com/
- dijit.Editor (Dojo) http://www.dojotoolkit.org/reference-guide/dijit/Editor.html
- CLEditor (jQuery) http://premiumsoftware.net/cleditor/
- Redactor (jQuery) http://redactorjs.com/
- rataeditor (jQuery) http://github.com/jfuentesa/rataeditor
- summernote (jQuery) http://hackerwins.github.io/summernote/
- Quill http://quilljs.com/
- Trumbowyg (jQuery) http://alex-d.github.io/Trumbowyg/
- Squire http://neilj.github.io/Squire/
- Minislate (vanilla) http://olivier-m.github.io/minislate/
- Medium.js http://jakiestfu.github.io/Medium.js/docs/
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.
You might also enjoy..
Filed in: Programming