How to add multiple buttons to TinyMCE?

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

First add your additional buttons inside the buttons callback..

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

Then add additional buttons function inside the plugin javascript..

    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]');  
            }  
        });
        ed.addButton('wpse-rules', {  
            title : 'WPSE Rules',  
            image : url+'/image.png',  
            onclick : function() {  
                 alert( 'WPSE Rules!' ); 
            }  
        });  
    },

And so on, for any additional buttons you want..

Answer 2

Take a read through and/or download the files in my tutorial on this. The reason I suggest this is because I put it all in to a class so you don't actually need to write the code over and over again for each button!

Now, the class does basically write the code for you each time you instantiate it on the WordPress side of things, but you will still need to write the javascript functionalities for each button.

The creation of a button is the same process no matter how many you need. The function of each button is going to be unique, which is why you need a unique javascript call for each button.

Answer 3

Look at QuickTag of wordpress, if you want to add buttons on the text editor section (doesn't work on the visual editor part though)