I’ve been trying to find a good WYSIWYG editor for simple CMS I’m building. My project just needs to make static pages - you know, /about, /faq, etc. The idea was that even if a developer had to write the HTML, anyone could go in and fix a typo or add a paragraph. My requirements for the html editor were pretty simple, I thought:

  • Produces mostly clean HTML (no <font>, <span style="ugly: yes;">, etc )
  • Forces Word, RTF, and HTML paste into plaintext, or at least something not horrible
  • Assigns classes for p, h1, hr, etc (or has hooks so I can add it in)
  • In-place editing mode
  • Minimal dependencies

Of course, you can’t just use contentEditable directly. The Guardian has a great run-down of inconsistencies they found while building their back-end.

As has ever been the case, there are dozens of js libraries to do this sort of thing, and figuring out which ones are even worth investigating is a huge and draining process. Unfortunately my go-to for this sort of thing was out. Readactor is excellent, with a good API, good documentation, and readable code. But it’s not free, and I want to release this as open-source.

  • TinyMCE - I got burned badly enough by this back in the PHP era
  • CKEditor - if anyone can show me a list of configuration options and their variations for this beast, I’ll be impressed. A list of events I can hook into, and I’ll be stunned. Some of the worst documentation I’ve ever dealt with. And look at the freakin’ Rails plugin - better hope you use CanCan, Pundit, Mongoid, and want to slap in an extra controller.
  • WYMeditor - sounds interesting, but the mid-90’s design isn’t inspiring
  • Etch - backbone
  • Summernote - bootstrap
  • jQuery Text Editor - bare bones, and kinda crap docs
  • Hallo - links plugin isn’t working. wut?
  • SmallEditor - angular
  • jQuery Notebook - can’t even guess what requirements this will / won’t need from reading the page and the docs - also needs font-awesome
  • Trumbowyg - wtf is with that name? “semantic” option is still in alpha
  • Morrigan - their demo page has scantly clad women! This must be a great editor! Yes, I played Dragon Age as well, but come on. Also v0.1-beta
  • Azexo Composer - drag and drop Bootstrap components, not quite what I wanted
  • Aloha Editor - beautiful page, but it really doesn’t tell me a damn thing about how to use it, and their API docs are nil
  • Medium.js - no support for messing with classes or styles in the content
  • Scribe - not an editor, but a toolkit for building one. Built as AMD js modules, distributed via Bower, and everything is a plugin. Try building on this in a Rails engine, and you’re gonna have a bad time.

The bottom line is that WYSIWYG editors for HTML are awful, and have been ever since Dreamweaver. I never thought about why it was an impossible concept until I read Nick Santos’ article about Medium’s editor.

Now I’m trying to figure out if I should accept an ugly, duct-taped-together interface for my CMS or just screw it and use Markdown.

Update

Got an email from the folks at Froala, which frankly looks pretty awesome. Good docs, html cleaning and class assignment. There is a distributable open-source version, so theoretically you could package it in to a project like this. But like Redactor, the “real thing” and un-minified source code are paid products.

WYSIWYG editors are hugely complicated, and this is one place I can totally justify paying for development tools and software. Compared to the time-sink black hole that is trying to roll your own, it’s a steal.