Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have added a custom button to the tinymce to insert my shortcodes, but I have so many and I want to make a splitbutton instead and I can't figure how. Anyone can help. Here's the code that I've used to create the normal button:

in functions.php :

/**
Hook into WordPress
*/

add_action('init', 'onehalf_button');  
/**
Create Our Initialization Function
*/

function onehalf_button() {

   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
     return;
   }

   if ( get_user_option('rich_editing') == 'true' ) {
     add_filter( 'mce_external_plugins', 'add_plugin' );
     add_filter( 'mce_buttons', 'register_button' );
   }

}
/**
Register Button
*/

function register_button( $buttons ) {
 array_push( $buttons, "|", "onehalf" );
 return $buttons;
}
/**
Register TinyMCE Plugin
*/

function add_plugin( $plugin_array ) {
   $plugin_array['onehalf'] = get_bloginfo( 'template_url' ) . '/js/tinymce_buttons.js';
   return $plugin_array;
}

and in the custom plugin .js

// JavaScript Document
(function() {
    tinymce.create('tinymce.plugins.onehalf', {
        init : function(ed, url) {
            ed.addButton('onehalf', {
                title : 'One Half Column',
                image : url+'/mylink.png',
                onclick : function() {
                     ed.selection.setContent('[one_half]' + ed.selection.getContent() + '[/one_half]');

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

I've found something here http://tinymce.moxiecode.com/tryit/listbox_splitbutton.php but can't figure out how to implement it into WP.

Anyone can help? Thanks.

share|improve this question

2 Answers 2

up vote 3 down vote accepted

It should be pretty straight-forward, copy the relevant pieces of code from the page you linked to into your existing TinyMCE plugin, update a few strings... done!..

Start with this for your TinyMCE plugin JS and see how you get on..

// JavaScript Document
(function() {
    // Creates a new plugin class and a custom listbox
    tinymce.create('tinymce.plugins.onehalf', {
        createControl: function(n, cm) {
            switch (n) {
                case 'onehalf':
                    var mlb = cm.createListBox('onehalf', {
                        title : 'My list box',
                        onselect : function(v) {
                            tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
                        }
                    });

                    // Add some values to the list box
                    mlb.add('Some item 1', 'val1');
                    mlb.add('some item 2', 'val2');
                    mlb.add('some item 3', 'val3');

                // Return the new listbox instance
                return mlb;

                /*
                case 'onehalf':
                var c = cm.createSplitButton('onehalf', {
                    title : 'My split button',
                    image : 'img/example.gif',
                    onclick : function() {
                        tinyMCE.activeEditor.windowManager.alert('Button was clicked.');
                    }
                });

                c.onRenderMenu.add(function(c, m) {
                    m.add({title : 'Some title', 'class' : 'mceMenuItemTitle'}).setDisabled(1);

                    m.add({title : 'Some item 1', onclick : function() {
                        tinyMCE.activeEditor.windowManager.alert('Some  item 1 was clicked.');
                    }});

                    m.add({title : 'Some item 2', onclick : function() {
                        tinyMCE.activeEditor.windowManager.alert('Some  item 2 was clicked.');
                    }});
                });

                // Return the new splitbutton instance
                return c;
                */
            }
            return null;
        }
    });
    tinymce.PluginManager.add('onehalf', tinymce.plugins.onehalf);
})();

If something doesn't work please report back with as much info as possible, ie. what you tried, what the result was, what did happen, what didn't ... etc..

share|improve this answer
    
You, sir, are gold. It is just what I need. Thank you. –  Gina Alessia Mar 28 '11 at 11:32
    
You're welcome... :) Was on that very same page a little while back myself... If you have any problems add them into this question, and drop a comment on this answer(i'll help if i can - having done something similar myself recently). –  t31os Mar 28 '11 at 11:59

t31os answer is great. Just a side note: to obtain the path to the image add

init : function(ed, url) {
    theurl = url;
},

right before createControl: function... and now you can use it in

var c = cm.createSplitButton('onehalf', {
    title : 'My split button',
    image : theurl + '/theicon.png',
    onclick : function() {
           tinyMCE.activeEditor.windowManager.alert('Button was clicked.');
    }
});

Assuming your icon is right next to the JavaScript for the TinyMCE plugin.

share|improve this answer
3  
Careful - You created a global variable with theurl. You should store it as a property of the plugin. For example tinymce.plugins.onehalf.theurl = url; - Then to retrieve it, you would use image : tinymce.plugins.onehalf.theurl + '/theicon.png', –  Peter Ajtai Aug 21 '11 at 22:37
1  
Thank you for the input Peter, that's perfect. –  Elliot Sep 29 '11 at 22:10
    
Nice addition, i'll leave that absent from my code though, you deserve the rep for the addition.. :) –  t31os Apr 12 '13 at 21:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.