Announcement

Do not use the forums to submit bug reports, feature requests or patches, submit a New Ticket instead.

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/xinha/public_html/r.f/include/parser.php on line 774

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/xinha/public_html/r.f/include/parser.php on line 774

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/xinha/public_html/r.f/include/parser.php on line 774

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/xinha/public_html/r.f/include/parser.php on line 774

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/xinha/public_html/r.f/include/parser.php on line 774

#1 2011-11-06 02:45:14

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.

Offline

Board footer

Powered by FluxBB