WYSIWYG, WYSIWYM and all that jazz

By eidias on 4/30/2012 (tags: editors, categories: web)

So you have a requirement – supply the possibility to create and edit rich formatted text in a web application. Seems pretty straightforward – use a ready editor and you’re done.

Now, add some constraints to that, like – the editor needs to be dead simple because the target user does not care about all that semantic stuff (that’s your job), it needs to perform well and be as intuitive as it gets.

This is a pretty valid requirement and in todays web is pretty common, but as it turns out, there isn’t a lot of maneuvering space here.

I’ve dealt with rich text editors before – so when the task came along, the choice was simple TinyMCE or CKEditor. I settled for the latter (can’t remember why) but quickly found that the editor itself was almost as big as the rest of the entire sites scripts, stylesheets and other statics. Without enough thought, I looked for something smaller and found this. It’s much smaller, uses jQuery and is customizable enough to adjust to my needs. But the editor has a nasty trait – when using block buttons (like H1, P…) and clicking through the text it doesn’t highlight the correct element instantly. You have to do some awkward clicking to make it highlight the correct one. This threw our users off, and I can’t blame them.

So off I go to search for an alternative. Markdown is making it’s way through the web nicely, so why not try that? Stack overflow is using it, github is using it. It’s dead simple, looks nice and there’s quite good and light editor for it. Seemed like a good choice, but the syntax itself doesn’t allow to apply styles to elements (that’s kind of the point of having a markup language that produces semantic HTML, but in practice, you need to add a class to a paragraph at some point). I didn’t find a suitable extension to the format and I wasn’t too keen on the idea of either enhancing the syntax or hacking the output to support the class requirement – there are other things to take care of.

Another option was Textile. It doesn’t have the limitation that markdown had and I’ve also found a nice editor. But… there’s always a but. Textile is more powerful than markdown, but that comes with a price. The syntax looks … well … technical – and that’s a good thing, if you’re technical – not the case with our users.

There are many other markup languages out there, but I missed one very important point – they’re for technical people. Stack Overflow and github are for technical people, they are not afraid of funky symbols. Normal users are and that’s why it’s not the best choice here.

So after going back and forth I’ve completed a full circle and returned to a html wysiwyg – this time TinyMCE. It’s a bit lighter than CKEditor, but works well. I still have to look into some performance issues, and I had to develop a plugin for it, so that I got exactly what I wanted, but overall, it looks like a solid piece of code and will hopefully serve our purpose.

There’s just one thing that’s kind of bothering me: I’m using an editor with all this functionality:

to do this:

Seems like shooting a fly with a cannon. Hope my aim isn’t off.

Cheers