Introduction

This page compares web-based, inline WYSIWYG editors. The issues table lists reasons for disregarding a particular editor.

Requirements

To be considered for recommendation, the editor must meet the following requirements:

• produce semantically clean markup;
• not wrap inline elements with its own markup;
• have an active developer community;
• handle arbitrary HTML documents;
• well-documented API and easy to integrate (i.e., few dependencies);
• work with IE8+ (and recent Chrome, Firefox, and Safari releases); and
• seamlessly integrate with existing content.

Recommendation

The following editors have few issues and integrate easily:

• Aloha Editor 2
• froala

Due to Froala's non-commercial licensing, it is unsuitable for this project.

See below for known issues.

Candidates

|Editor|Markup|Library|Size (KB)|Mobile|IE|Accessible|License |----|:----|:----|----:|:----:|----:|:----:|----|:----:| | Aloha Editor 2|XHTML|standalone|142|WebKit|8+|Y?|GPLv2+ | bootstrap-wysiwyg|HTML?|jQuery+|5|Y|10+|N?|MIT | CKEditor|HTML|standalone|488|Y|7+|JAWS|GPL/LGPL/MPL | CLEditor|XHTML|jQuery+|9|N|6+|N?|MIT/GPLv2+ | elRTE|HTML|jQuery+|161|N?|7+|N?|BSD | Etch|HTML?|jQuery+|12|N?|8+|N?|MIT | fresherEditor|HTML?|jQuery+|9|N?|?|N?|Custom (open) | froala|XHTML?|jQuery+|152|Y|8+|N?|CC NC-ND | hallojs|Markdown|jQuery-|436|N?|?|N?|MIT | jQrte|HTML?|jQuery+|124|N?|8+|N?|MIT | KindEditor|HTML?|jQuery+|30|N?|6+|N?|LGPL | Medium Editor|HTML?|standalone|70|N?|9+|N?|Beer Ware | Mercury|Markdown|jQuery+|153|N?|10+|N?|MIT | Morrigan Editor|HTML|jQuery+|432|N?|8+|N?|Custom (open) | PROPER|HTML|jQuery+|28|N?|?|N?|Custom (open) | PunyMCE|HTML|standalone|20|N?|?|N?|GPLv2 | Quill|HTML|standalone|103|Y|9+|N?|BSD | Raptor|HTML5|jQuery-|681|WebKit|10+|N?|GPLv3 | Sir Trevor|Markdown|jQuery+|135|N?|10+|N?|MIT | Squire|HTML5|standalone|11.5|N?|9+|N?|MIT | Summernote|HTML5|jQuery|61|N?|9+|N?|MIT | TinyMCE|XHTML|standalone|401|N?|6+|ATRC|LGPL | uEditor|XHTML|jQuery+|26|N?|?|N?|? | WYMeditor|XHTML|jQuery+|187|N?|7+|N?|MIT | Wyzz|HTML?|standalone|33|N?|8+|N?|LGPL | WYSIHTML5|HTML|standalone|112|N?|8+|N?|MIT | YUI Editor|XHTML|standalone|1556|N?|?|N?|BSD

Meanings

• Editor - Hyperlink to the editor home page (or repository)
• Markup - Document encoding (HTML, XHTML, Markdown, etc.)
• Library - Dependent library
  • jQuery+: additionally, requires jQuery
  • jQuery-: jQuery is included (no extra include)
• Size - Number of kilobytes required for a default instance (typically minified, but not always)
• Mobile - Support for portable devices
• IE - Version of IE that is supported
• Accessible - Has features for accessibility
• License - Type of licensing (NC means non-commercial)

Note: file sizes are approximate (based on minimal requirements).

Investigate

The following candidates have not been reviewed:

• https://code.google.com/p/wkrte/
• https://code.google.com/p/lwrte/
• http://demos.dojotoolkit.org/demos/editor/demo.html
• http://maqetta.org/
• redactor (commercial)

Issues

Defunct, obtuse, crippled, problematic, and abandon-ware editors include:

Known Issues

This section describes known issues (undesirable default behaviour) with the recommended editors.

Aloha

The following bugs have been reported against the Aloha Editor issue tracker:

• When editing anchor link text (e.g., change "lake" to "leak"), the A tag is wrapped inside an A tag, which is semantically incorrect.
• The Home and End keys do not work as expected (they scroll the browser instead of moving cursor position).
• Using the Up (or Down) arrow key will sometimes not jump to the next paragraph or sentence, if the cursor is currently at the end of a shorter line (a jarring experience while editing).

Froala

• Trying to change anchor link text from "lake" to "leak" brings up the link dialog, and does not accept changing the text.
• Selecting the "ake" anchor text and replacing it with "eak" works, but adds a new line to the HTML, which could cause the link to be displayed with a superfluous space ("l eak" instead of "leak").
• Does not correctly load dependencies from a relative URL.
• The phrase "Type something" appears (likely due to CSS and image dependencies not found from relative URL).
• Uses br and br type="_moz" tags for new lines, which is not semantically clean.

Complex Integration

Aloha sets the standard for integration ease:

<script type="text/javascript" src="editor.min.js"></script>
<script type="text/javascript">
  aloha( document.querySelector( ".support" ) );
</script>

No extra mark-up required, no extra sources to combine and minify, no CSS files, nor any special fonts to specify.

Integrations that require substantially more effort than this are considered complex (up to two additional includes [e.g., style and configuration] is acceptable).