Styling the TinyMCE interface
One of the big problems with most web based WYSIWYG text editors is that standard editor interfaces don’t provide any feedback about the horrors going on underneath the surface. WYSIWYG editors are often blamed for producing crappy HTML. However I think they generally do a decent job, it’s the users that screw things up by copying and pasting from Word or other web pages and generally doing the sort of unexpected things people do. But that’s not really the user’s fault; we can’t expect most users to know HTML or care if an H3 element is illegally nested in a P element. What we can do is create a nicer user interface that gives them more feedback on what they are creating.
I’ve created a style sheet for TinyMCE editors with the aim of providing some of this missing feedback; check out the demo page. Inspiration for this comes from WYMeditor and CSS diagnostics.
There are three main affects I want this style sheet to have on writers:
- I want the way the content is presented to bring them closer to the medium they are using. For instance, pressing the return key twice—a common way of typing in Word—produces empty paragraph tags; making these empty paragraph tags visually represented in the editor, means they look wrong. This gives feedback that pressing the return key once to create a new paragraph is the way forward. Similarly the heading tags are coloured in gradually lighter shades of blue, my hope is that this suggests the hierarchy they represent and not just that they are bigger than other text.
- Content copied and pasted from Word documents or other web pages is still a major problem. This style sheet should show up a lot of the most common problems as errors or warnings, indicating to the user that they should re-enter the content using the proper dialogue or clean up the HTML (or call for help! ).
- There is only a fairly small subset of HTML tags that are needed to create standard articles. Often other elements might creep in from copying and pasting, legacy content or someone knowing a bit of HTML writing it themselves. If the writing interface gives feedback that these illegal elements are erroneous they can quickly be squashed, before they either don’t validate or break the front end.
It’s early days for this project yet, I’m sure I’ll have plenty of revisions as I delve deeper in the mysteries of TinyMCE and people’s writing habits but there are a couple of things I’d like to note:
- It only works properly in modern browsers (less so in IE8) as I’m using some fun CSS stuff like multiple backround images and advanced CSS selectors. For instance to detect content copied from Word, I’m using [style^=”mso”] which older browsers won’t support. It won’t break older browsers though. (Progressive enhancement ftw.)
- Of course this is just pretty interface stuff—Things that cause errors and warnings need to be acted upon server-side, with validation errors or stripping out attributes, when the form is saved.
Anyway, have a play with it, try and break it, and let me know what you think and how it can be improved. If there is any interest I might look at packaging it up some sort of open source TinyMCE plugin.
Following on from the comments, here is a version experimented integrated in to the Visualchars plugin.