This is an update on my project to style WYSIWYG interfaces to help the users get an understanding of the HTML they are creating. Read the original post here.
First of all, here’s the new demo page.
Changes since the original experimental version:
- It’s been packaged up as a TinyMCE plugin – it was just a stylesheet before.
- There’s a button to toggle the stylesheet on and off (with it’s own little icon).
- All error reporting removed – his will be tackled in the next phase.
- The range of HTML elements supported is much wider – it should support just about everything now. Not everything will be supported perfectly, but a lot of those elements are highly unlikely to show up in a WYSIWYG editor. You can see which elements are supported in my test page.
What’s still to be done:
- Error reporting – this needs to done in a more sophisticated way than before. I need to check out TinyMCE’s built in error checking, serialisation settings etc.
- I’m not sure what the best way to cope with user-added stylesheets is. Is this the user’s responsibility or should the plugin be somehow be defensive?
Adrian Sutton sugested a third state:
“… a “half on” mode though which shows the normal stylesheet but augmented with some of the information this stylesheet can show.It probably won’t completely replace the toggle-on full view, but would act as an in place reminder for users to actually think about this stuff.”
My original intention was that the stylesheet would something like this in an always on state. Feedback on my original idea made it obvious that I’d underestimated the importance users place on the text actually looking like how the text will finally appear on the website*. Working out how to show the HTML structure without totally overriding the original look and feel will be a challenge. It’s been suggested to me that the two ideas are diametrically opposed (ie. you can only either show the presentation or the structure) but I’m sure there are ways to bring the two together with some work.
How to use it?
It works just like a normal TinyMCE plugin; put the plugin’s folder in the the plugins folder then add the plugin in the TinyMCE init function.
The button can be added to your them using “structure”. You can also optionally add settings using a “showStructureSettings” which currently only takes one argument of “onByDefault” This sets the stylesheet to be on by default (use this and don’t add the button if you don’t want users to have a choice).
Your TinyMCE.init() call should look some something like this:
tinyMCE.init({
… your other settings …
theme_advanced_buttons1 : ” … ,structure, … ”,
plugins : “structure”,
showStructureSettings:{onByDefault:true}});
I’m still very interested in getting any feedback on this project so please do comment if you have anything to say.
*I’d love to have more information about how many systems use a true WYSIWYG interface matched up with the styles of the site. I don’t think any of the systems I’ve used do, and as I write this in WordPress I’m writing in Georgia in an interface that looks little like how this appears on the blog. My gut feeling is that true WYSIWYG is an aspiration with users quick to ignore the inconsistencies.
