When adding buttons to the tinyMCE editor, how do I make them wrap to the next line and/or display in the “Kitchen Sink” area?

0 Views

I’m successfully adding buttons to the TinyMCE editor in WordPress, but the problem is they all show up to the right of the Kitchen Sink button and I have so many that I need them to display on a new line. How do I make the buttons wrap to the next line and/or create a new row for my custom buttons? Here is my code: 

tinymce.create('tinymce.plugins.boxlight', {
    init : function(ed, url) {
        ed.addButton('boxlight', {
            title : 'Add a light content box',
            image : url+'/images/box-light.png',
            theme_advanced_buttons3_add : 'boxlight',
            onclick : function() {
                 ed.selection.setContent('[box_light]' + ed.selection.getContent() + '[/box_light]');

            }
        });
    },
    createControl : function(n, cm) {
        return null;
    },
});

tinymce.PluginManager.add('boxlight', tinymce.plugins.boxlight);

That code just adds the buttons to the main TinyMCE toolbar and I can’t figure out how to add the buttons to a new toolbar.

Post Views: 0

Related posts

Leave a Reply

1 comment

  1. I imagine you’re also adding a filter mce_buttons to add in the button to, something like..

    add_filter( 'mce_buttons', 'add_my_tinymce_buttons' );

function add_my_tinymce_buttons( $items ) {
    $items[] = 'your-button';
    return $items;
}

    Just change the filter to hook onto mce_buttons_2 instead, and the button will appear on the second row , eg..

    add_filter( 'mce_buttons_2', 'add_my_tinymce_buttons' );

    Hope that helps.. 🙂