TinyMCE Show Structure plugin

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:

What’s still to be done:

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:


… your other settings …

theme_advanced_buttons1 : ”  …  ,structure,  …  “,

plugins : “structure”,


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.

Comments are closed