We've all been wowed by impressive off-the-shelf components for WYSIWYG editing in webpages. TinyMCE and HTMLArea are just two. Looking at them it all looks staggeringly simple.
However, in practice these editors become incredibly painful to use. When you watch users trying to edit a content management system, it becomes very obvious that the usability they profess is an illusion.
- The editing experience is slow, sometimes to the point of non-interactivity
- Loading of the component is also slow
- Users struggle to make formatting behave when all they want to do is write
- Pasting from word processor documents also pastes unwanted formatting
My solution is to return to the humble textarea. This was something I discovered by accident: Django provides a Markdown filter, so this was the simplest way to provide formatting, though my intention had been to embed TinyMCE later. Markdown is a simple formatting language based on formatting conventions in plain-text e-mails. I soon discovered the convenience of editing content with Markdown – freed from worries about formatting, the experience of publishing content accelerates, at the expense of a slightly steeper learning curve. It's only a learning curve for the formatting features. In the simplest case of unformatted paragraphs, writing in Markdown is the same as writing in plain text, so users can start publishing at full speed straight away.
There's also the benefit that Markdown doesn't give users the ability to break out of the style of a site. Users are not graphic designers: if you give them the ability to make text red, thinking perhaps that this may be useful on special occasions to draw attention to an important message, don't be surprised if they make every other sentence red, bold and italic. After all, they want to draw attention to everything they say, don't they?
To enhance the experience in my applications, I've bolted on a toolbar based on Livepipe and a preview based on Showdown.
Screenshot of my MarkdownArea