How i can i add a split button or list box to the WordPress TinyMCE instance

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..

Leave a Comment