Most of what you read online flows through web-based (browser-based) WYSIWYG Rich Text editors. These tools are central to every CMS and enable content authors, who might know little about HTML, to create HTML.
However, content authors are often baffled by the behavior of these tools. In fact, many characterize their Rich Text editor as the most fragile part of their CMS. This blog post is inspired by my research into this challenge.
Why is web-based Rich Text editing so challenging?
- Web “browsers” were never designed to be MS Word.
- Lack of standards around browser-based WYSIWYG editing
- Each browser has a unique implementation of this functionality
- Rich Text editors require many layers of ‘hacks’ to create WYSIWYG editing
** Standards are beginning to emerge through HTML5
How can Rich Text editors be improved?
- Get control of the toolbar
- Automatically clean pasted content
- Eliminate ad-hoc usage of fonts, font sizes & colors
- Eliminate tables
- Use good typography
- Go ‘full screen’
- Use TAB for indent
- Apply custom styles to the editor to create WYSIWYG
- Auto-save content
Enough talk, where is a demo?
I created a demo that implements many of these recommendations:
** This demo is a work in progress. Please report any issues you discover. Some of the scripting needs refactored. I also haven’t done extensive testing for browser compatibility. Consider this demo a proof-of-concept, at this stage.
