How to add multiple buttons to TinyMCE in WP?

Question

I've followed a tutorial on Nettuts on how to add a custom button to TinyMCE (http://net.tutsplus.com/tutorials/wordpress/wordpress-shortcodes-the-right-way/)

It works great and all, but i want to add many buttons and i wonder if there's a smart way to do this without having to duplicate all the code over and over.

Here's the code i use for adding a button:

add_shortcode("quote", "quote");  
function quote( $atts, $content = null ) {  
    return '<div class="right text">"'.$content.'"</div>';  
}

add_action('init', 'add_button');  
function add_button() {  
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )  
   {  
     add_filter('mce_external_plugins', 'add_plugin');  
     add_filter('mce_buttons_3', 'register_button');  
   }  
}  
function register_button($buttons) {  
   array_push($buttons, "quote");  
   return $buttons;  
}  
function add_plugin($plugin_array) {  
   $plugin_array['quote'] = get_bloginfo('template_url').'/js/customcodes.js';  
   return $plugin_array;  
}  

And then i create a customcodes.js file with this code in:

(function() {  
    tinymce.create('tinymce.plugins.quote', {  
        init : function(ed, url) {  
            ed.addButton('quote', {  
                title : 'Add a Quote',  
                image : url+'/image.png',  
                onclick : function() {  
                     ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]');  

                }  
            });  
        },  
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add('quote', tinymce.plugins.quote);  
})();

So again, how can i add multiple buttons without having to do all this code for each new button?

Thanks :) Sebastian

Answer 1

If i am understanding your question correctly you want to add to more buttons without having to make duplicates of the register_button($buttons) and add_plugin($plugin_array) functions?

I know this is an old question, but there is a way to do it without duplicating the functions.

Just go into your customcodes.js and in the init : function(ed, url) create new buttons just like you did the first one, so it would look as such:

init : function(ed, url) {  
             /* your original button */
            ed.addButton('quote', {  
            title : 'Add a Quote',  
            image : url+'/image.png',  
            onclick : function() {  
                 ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]'); 
            }  
        }); 
            /* your second button */
            ed.addButton('singlequote', {  
            title : 'Add a Single Quote',  
            image : url+'/image.png',  
            onclick : function() {  
                 ed.selection.setContent('[singlequote]' + ed.selection.getContent() + '[/singlequote]'); 
            }  
        }); 
} 

And so forth, as many buttons as you require.

After that just head back to your register_button($buttons) function and update the array_push().

So whilst, when you had only one button to add it looked like this:

function register_button($buttons) {  
array_push($buttons, "quote");  
return $buttons;  }

Now that you created your new buttons this function would look like this.

function register_button($buttons) {  
array_push($buttons, "quote", "singlequote");  
return $buttons; }  

And so on, depending how many new buttons youve added.

You do not need to duplicate functions, or add new actions and filters to add new buttons to your tinyMCE.

You just create the new buttons inside your tinyMCE plug-in and list the names of the buttons youve created inside the array_push().

Perhaps you werent aware that array_push() accepts multiple push values. Here is its documentation on php.net

Answer 2

Modify the php at step 3 to push your second buttons :

//Step 3: Register Our Button
function register_button($buttons) {  
   array_push($buttons, "BOUTON1");  
   array_push($buttons, "BOUTON2");  
   return $buttons;  
}

Add a specific pass to that BOUTON2 :

//Step 4: Register Our TinyMCE Plugin
    function add_plugin($plugin_array) {  
       $plugin_array['BOUTON1'] = '/yourpathtojs/bouton1.js';  
       $plugin_array['BOUTON2'] = '/yourpathtojs/bouton2.js';  
       return $plugin_array;  
    } 

Then you have distinct files for each, look on the use of PLUG1 and BOUTON1, its better that on nettuts because they dont made distinction with the term 'quote' :

bouton1.js :

(function() {  
    tinymce.create('tinymce.plugins.PLUG1', {  
        init : function(ed, url) {  
            ed.addButton('BOUTON1', {  
                title : 'You', image : url+'/image.png',  
                onclick : function() { ed.selection.setContent('[thumb from="youtube" code="'+ed.selection.getContent()+'"]'); }  
            });  
        },  
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add('BOUTON1', tinymce.plugins.PLUG1);  
})();

bouton2.js :

(function() {  
        tinymce.create('tinymce.plugins.PLUG2', {  
            init : function(ed, url) {  
                ed.addButton('BOUTON2', {  
                    title : 'Vim', image : url+'/image.png',  
                    onclick : function() { ed.selection.setContent('[thumb from="vimeo" code="'+ed.selection.getContent()+'"]'); }  
                });  
            },  
            createControl : function(n, cm) {  
                return null;  
            },  
        });  
        tinymce.PluginManager.add('BOUTON2', tinymce.plugins.PLUG2);  
    })();