Does anyone know how to create a custom dropdown box in tinymce for Wordpress? I need it to work with at least wordpress 3.0.
I have searched the internet for a tutorial on this and I cannot find one. A link to a website tutorial would be great.
Thanks in advance.
I know this question was already asked some time ago, but as I stumbled across the same problem, I tought I'd answer this question anyways. Maybe it helps someone else.
The comments in the source of the DropDown-Control in tinyMCE turned out to be really helpful.
You just need to create a dropdown first, using createDropMenu()
, then you can call the add()
method to add items to the dropdown.
/**
* This class is used to create drop menus, a drop menu can be a
* context menu, or a menu for a list box or a menu bar.
*
* @class tinymce.ui.DropMenu
* @extends tinymce.ui.Menu
* @example
* // Adds a menu to the currently active editor instance
* var dm = tinyMCE.activeEditor.controlManager.createDropMenu('somemenu');
*
* // Add some menu items
* dm.add({title : 'Menu 1', onclick : function() {
* alert('Item 1 was clicked.');
* }});
*
* dm.add({title : 'Menu 2', onclick : function() {
* alert('Item 2 was clicked.');
* }});
*
* // Adds a submenu
* var sub1 = dm.addMenu({title : 'Menu 3'});
* sub1.add({title : 'Menu 1.1', onclick : function() {
* alert('Item 1.1 was clicked.');
* }});
*/
this adds a button so you just need to tweak it to make a drop down box
// register button
function register_button($buttons) {
array_push($buttons, "btn");
return $buttons;
}
// 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', 'register_button');
}
}
// add plugin
function add_plugin($plugin_array) {
$plugin_array['btn'] =get_bloginfo('template_url').'/js/customcodes.js';
return $plugin_array;
}
you will then need to add the to the js file
(function() {
tinymce.create('tinymce.plugins.btn', {
init : function(ed, url) {
ed.addButton('btn', {
title : 'Add a btn',
image : url+'/btn.png',
onclick : function() {
ed.selection.setContent('[btn]');
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('btn', tinymce.plugins.btn);
})();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With