How to add multiple buttons to TinyMCE in WP? - wordpress

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);
})();

Answer 3

Apart from maybe adding the extra button code inside your already existing functions, I don't think there's a way to do what you're trying.
Unfortunately, that's the code to add a button, so if you want to add another button you've got to add the code again.
If the buttons you wanted to add were similar in almost every way, you could maybe get away with doing a foreach {} followed by a switch(){case '':} where you feed the data through but unless all your buttons do the same thing this seems a bit redundant.
If all you're trying to do is keep your function.php file tidy then I suggest putting each button in a separate .php file named the same as the main function, in a folder called inc or includes inside your template, then include them like so:
$temp_path = 'http//www.yourdomain.com/wp-content/theme/yourtheme/includes/';
include $temp_path.'file1.php';
include $temp_path.'file2.php';
I'm using a temp_path variable because for some reason bloginfo() and get_bloginfo() just don't seem to work in the functions file.
On a side note, even though it's just for personal use, try to use much more unique function names, quote could be anything, tinymce_quote_button that's definitely what it is. This avoids potential function name clashes later.

Answer 4

If all the buttons are related and you want to add them all at once (ie you don't need to pick and choose which buttons get added, you could just duplicate the ed.addButton calls in the init call. It would make sense to encapsulate each addbutton call into it's own function,
(function() {
function addQuoteButton(ed, url){
ed.addButton('quote', {
title : 'Add a Quote',
image : url+'/image.png',
onclick : function() {
ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]');
}
});
}
function addOtherButton(ed, url){
// functionality to add another button.
}
tinymce.create('tinymce.plugins.quote', {
init : function(ed, url) {
addQuoteButton(ed, url);
addOtherButton(ed,url);
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('quote', tinymce.plugins.quote);
})();
to get further decomposition, you could then split the add*Button functions out into their own files (as suggested by #DouglasMarken).