Adding TinyMCE custom buttons when using teeny_mce_before_init

I believe that you have already registered your shortcode. Now what we need to do is to initiate the Button. Once the shortcode is registered [ph_min]
let’s check if user can use rich editing:

function add_highlight_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_tcustom_tinymce_plugin');
     add_filter('mce_buttons', 'register_tcustom_button');
   }
}

add_action('init', 'add_highlight_button');

Now lets register the button

function register_tcustom_button( $buttons ) {
 array_push( $buttons, "|", "highlight" );
 return $buttons;
}

Now let’s register TinyMCE plugin

function add_tcustom_tinymce_plugin( $plugin_array ) {
   $plugin_array['mylink'] = get_bloginfo( 'template_url' ) . '/script/mybuttons.js';
   return $plugin_array;
}

And this is for the JS file called from the previous function:

(function() {
    tinymce.create('tinymce.plugins.highlight', {
        init : function(ed, url) {
            ed.addButton('highlight', {
                title : 'Highlight',
                image : url+'/yourlink.png',
                onclick : function() {
                     ed.selection.setContent('[ph_min]');

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

That’s about it.

Leave a Comment