Xinha Discussion Forum

KMH

New member

Registered: 2011-08-19

Posts: 6

Toggle Toolbars Between Edit Modes

When I'd switch my editor between WYSIWYG mode and Text editing mode I wasn't happy with how all the buttons are still there in Text mode even though most of them were disabled and wasting space.  As near as I could tell the hooks for hiding buttons are part of the config when you initialize an HTML Area, they didn't seem to do anything to one that was already initialized (unless I wasn't using them right?).  Anyway, I finally figured it out by editing the XinhaCore.js file where the "Xinha.prototype.setMode" function is (around line 3430).

I added a little code to case "textmode":

     var buttons = document.getElementById('your_div_id').getElementsByTagName('table')[0].getElementsByTagName('div')[0].getElementsByTagName('table');
     var buttonlist = buttons.length;
     for (var x = 0; x < buttonlist; x++) {
         if (x>1) {
             buttons[x].style.display="none";
         }
     }

First of all I put my textarea into a DIV with an id - that would be the "your_div_id" in the code snippet.
Second is that this counts buttons by collections between separators, so the (x>1) means it will NOT hide the first two button sets but WILL hide all the rest.

Then in the case "wysiwyg" : this corresponding bit to turn the buttons back on when you toggle back into WYSIWYG editing mode:

     var buttons = document.getElementById('your_div_id').getElementsByTagName('table')[0].getElementsByTagName('div')[0].getElementsByTagName('table');
     var buttonlist = buttons.length;
     for (var x = 0; x < buttonlist; x++) {
         if (x>1) {
             buttons[x].style.display="table";
         }
     }

Each button set is a <TABLE> so you need to re-enable them to display as tables.

This is pretty easy to modify to your own needs.  Just group your buttons into logical sets, count off the sets (starting with zero) and you can use the if(x>1) part to pick and choose which sets to show or hide in each mode (for example it could be if ( (x>1 && x<5) || x==7) which would hide the second through fourth and then the seventh sets of buttons).

I put it in a DIV container with an ID so I wouldn't have to use "getElementsByClassName" which doesn't work natively in legacy Internet Explorer.  If you don't care about IE, or if you are using Robert Nyman's great script that adds that capability to legacy IE browsers then you could do this:

var buttons = document.getElementsByClassName('toolbarRow');

I'm sure there must be a more integrated option to accomplish it, but this works exactly as I want.  In "Text" mode I only have three buttons and the toolbar collapses to the height of one row.  When I go back to WYSIWYG mode I have multiple rows and the toolbar expands to contain them.