Is there a way to add another row to the tinyMCE kitchen sink toggle?

2 Views

The tinyMCE “kitchen sink” toggle button shows/hides a row of buttons. I have successfully added my row of shortcode buttons to the tinyMCE editor, but I was wondering if there was a way to make my row only display when the kitchen sink button is clicked. I don’t want to add the buttons directly to the kitchen sink row because I have lots of buttons that need their own row. So, can I make the kitchen sink button show two rows instead of one? Or is there some sort of modifier when I add my row to indicate that it should be toggled when the kitchen sink button is clicked?

Here is the code I’m using to add my third row of buttons:

Read More
    // add shortcode buttons to the tinyMCE editor row 3
function add_button_3() {
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
   {
     add_filter('mce_external_plugins', 'add_plugin_3');
     add_filter('mce_buttons_3', 'register_button_3');
   }
}
//setup array of shortcode buttons to add
function register_button_3($buttons) {
   array_push($buttons, "dropcap", "divider", "quote", "pullquoteleft", "pullquoteright", "boxdark", "boxlight", "togglesimple", "togglebox", "tabs", "signoff", "columns", "smallbuttons", "largebuttons", "lists");  
   return $buttons;
}
//setup array for tinyMCE editor interface
function add_plugin_3($plugin_array) {
   $plugin_array['lists'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['signoff'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['dropcap'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['divider'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['quote'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pullquoteleft'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pullquoteright'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['boxdark'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['boxlight'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['togglesimple'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['togglebox'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['tabs'] = get_bloginfo('template_url').'/js/customcodes.js'; 
   $plugin_array['columns'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['smallbuttons'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['largebuttons'] = get_bloginfo('template_url').'/js/customcodes.js';
   return $plugin_array;
}
add_action('init', 'add_button_3'); // add the add_button function to the page init

However, the row that adds is not toggled by the kitchen sink button.

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. Yes!

    • Use the mce_buttons_2 filter to add
      buttons to the second row.
    • Use the mce_buttons_3 filter to add buttons
      to the third row.

    Here’s an example of what I use:

    function mytheme_mce_buttons_row_3($buttons) {

     $buttons[] = 'fontselect';
     $buttons[] = 'fontsizeselect';
     $buttons[] = 'code';
     $buttons[] = 'sup';
     $buttons[] = 'sub';
     $buttons[] = 'backcolor';
     $buttons[] = 'separator';
     $buttons[] = 'hr';
     $buttons[] = 'wp_page';

     return $buttons;

}
add_filter("mce_buttons_3", "mytheme_mce_buttons_row_3");

    Just drop this in functions.php. (I put it in my Theme setup function, that gets hooked into after_setup_theme.)

    EDIT:

    I don’t know if it makes a difference or not, but you’re using array_push($buttons, $button), while I’m using $buttons[] = $button

    Here’s your code:

    //setup array of shortcode buttons to add
function register_button_3($buttons) {
   array_push($buttons, "dropcap");
   array_push($buttons, "divider");
   array_push($buttons, "quote");
   array_push($buttons, "pullquoteleft");
   array_push($buttons, "pullquoteright");
   array_push($buttons, "boxdark");
   array_push($buttons, "boxlight");
   array_push($buttons, "togglesimple");
   array_push($buttons, "togglebox");
   array_push($buttons, "tabs");
   array_push($buttons, "signoff"); 
   array_push($buttons, "columns");
   array_push($buttons, "smallbuttons");
   array_push($buttons, "largebuttons");
   array_push($buttons, "lists");     
   return $buttons;
}
add_filter('mce_buttons_3', 'register_button_3');

    Which, using my method, would look like this:

    //setup array of shortcode buttons to add
function register_button_3($buttons) {
   $buttons[] = 'dropcap';
   $buttons[] = 'divider';
   $buttons[] = 'quote';
   $buttons[] = 'pullquoteleft';
   $buttons[] = 'pullquoteright';
   $buttons[] = 'boxdark';
   $buttons[] = 'boxlight';
   $buttons[] = 'togglesimple';
   $buttons[] = 'togglebox';
   $buttons[] = 'tabs';
   $buttons[] = 'signoff'; 
   $buttons[] = 'columns';
   $buttons[] = 'smallbuttons';
   $buttons[] = 'largebuttons';
   $buttons[] = 'lists';     
   return $buttons;
}
add_filter('mce_buttons_3', 'register_button_3');

    Give that a try?

  2. I hit this same problem myself, and after a little jQuery work I was able to find a solution.

    I wrote my answer to the toggle issue in a blog post.

    The JavaScript you need for your editor plugin looks like this:

    init : function( ed, url ) {
    ed.onInit.add(function( ed ) {
        if ( getUserSetting( 'hidetb', '0' ) == '0' ) {
            jQuery( '#content_toolbar3' ).hide();
        }

        jQuery( '#wp-content-editor-container #content_wp_adv' ).click(function() {
            if ( jQuery( '#content_toolbar2' ).is( ':visible' ) ) {
                jQuery( '#content_toolbar3' ).show();
            } else {
                jQuery( '#content_toolbar3' ).hide();
            }
        });
    });
}

    I hope this helps anyone else who has come across this thread!

  3. I always thought the ‘Kitchen Sink’ button in the MCE editor in WordPress didn’t work quite right. I saw @AndyAdamns’ answer and expanded on it, to also handle:

    1. toggling ALL rows following the row with the Kitchen Sink button
    2. also allowing the Kitchen Sink button to function when placed in row 2 or 3

    Here is the javascript to implement this as a MCE plugin:

    (function(){
    tinymce.create( "tinymce.plugins.extrarows", {init : function( a, b ){
        a.onInit.add( function( a ){
            var $btns = jQuery( '.mce_wp_adv.mceButtonEnabled' )

            // This function attempts to update mceButtonActive class on the 
            //   kitchen sink button appropriately, but .mceButtonActive seems to 
            //   be manipulated between user clicks by another script, so uses 
            //   custom class 'pfxMceButtonActive' to actually track toggle state. 
            function toggleFollowingRows( $el ){
                var $this = jQuery( $el );
                if( $this.hasClass( 'pfxMceButtonActive' ) ){
                    $this.removeClass( 'mceButtonActive pfxMceButtonActive' ).closest( '.mceToolbar' ).find( '~ .mceToolbar' ).hide();
                    setUserSetting( 'hidetb', 1 );
                } else {
                    $this.addClass( 'mceButtonActive pfxMceButtonActive' ).removeClass( 'mceButtonInactive' ).closest( '.mceToolbar' ).find( '~ .mceToolbar' ).show();
                    setUserSetting( 'hidetb', 0 );
                }
            }

            // Show rows based on local setting (Hide by default)
            var hidetb = getUserSetting( 'hidetb', 1 );
            if( hidetb && hidetb != '0' ){
                $btns.addClass( 'mceButtonActive pfxMceButtonActive' )
            }

            $btns.click( function( e ){
                toggleFollowingRows( jQuery( this ) );
                return false;
            } ).each( function(){
                toggleFollowingRows( jQuery( this ) );
            } )
        } );
    }, 
    getInfo : function(){
        return{longname : "Hide Extra Rows", author : "smhmic", authorurl : "http://smhmic.com", version : tinymce.majorVersion + "." + tinymce.minorVersion }
    }} );
    tinymce.PluginManager.add( "extrarows", tinymce.plugins.extrarows )
})();

    … then hook this file into WordPress:

    add_filter( 'mce_external_plugins', 'mce_extrarows_plugin' );
function mce_extrarows_plugin( $plugins_array ){
    $plugins_array['extrarows'] = /* PATH TO JAVASCRIPT FILE */;
    return $plugins_array;
}

    This plugin also addresses other minor annoyances I encountered when using MCE in WordPress:

    • clear on/off state for Kitchen Sink button (without this plugin, button always appeared initialized in off state)
    • persistent Kitchen Sink toggle state (without this plugin, sometimes didn’t persist across page loads)