Skip to content

Latest commit

 

History

History
110 lines (82 loc) · 11.1 KB

JavaScript-WYSIWYG-editors.md

File metadata and controls

110 lines (82 loc) · 11.1 KB

Comparison of JavaScript WYSIWYG editors

Comparison as of September 6, 2016.

While building iDoRecall, we looked for a WYSIWYG editor to enable our users to create and paste rich text recalls. While Markdown is great, it can't carry on much of the formatting that our audience is likely to encounter in the wild, so we looked for a WYSIWYG editor with the following features:

  • correct pasting of minimally rich text from a variety of online sources (Google Docs, StackOverflow)
  • paste images from clipboard directly, the way Slack, Imgur, GitHub, Google Docs and StackOverflow work
  • usable on modern browsers and mobile devices; IE < 9 support not important
  • relatively lightweight
  • preferrably open source licensed, preferrably MIT
  • (relatively) actively maintained

Candidates

We have evaluated every single editor listed here and here. Surprisingly, out of ~60 editors tested, only one (!) satisfies these requirements.

For an alternative comparison table (no longer maintained by us), check out SocialCompare.

Can paste images and rich text

  1. WINNER - Trumbowyg - 20KB + jQuery; can paste images via a plugin
  2. Summernote (jQuery+Bootstrap) - about 618/860 open/closed GitHub issues. ~84kB minified.
  3. AlloyEditor - based on CKEditor, with a modern UI built with React. At 598Kb minified, 167kB gzipped, it's smaller than CKEditor out of the box. No mobile support.
  4. Hackpad - real-time collaborative editor, eagerly expected by the open source community, but apparently abandoned after Dropbox acquired the company

Can't paste images or rich text

Images can be "pasted" in two ways:

  • From other web pages. In that case, a link to the remote image will actually be pasted.
  • From the system clipboard. This is equivalent to a drag&drop event, and the image needs to be effectively uploaded or converted to base64. This is not that easy to implement.

Rich formatting is often tricky to paste. Two samples were used:

  • StackOverflow code
  • A code block from @addyosmani's JavaScript Patterns online book

Results:

  1. Froala WYSIWYG (jQuery) - can paste images from the clipboard, but loses most of the rich formatting when pasting before version 2

Heavyweight editors

  1. TinyMCE - 380kB minified. Can paste rich text, but not images directly.

Couldn't evaluate, or don't quite do WYSIWYG

  1. bootstrap-wysiwyg (jQuery) - 4K GitHub stars, built for MindMup, no demo

No longer or dubiously maintained

  1. demarcate - convert Markdown to HTML. No update since Sep 2014. Can't paste images.

Commercial-only projects