Adding TinyMCE custom buttons when using teeny_mce_before_init

I’m using the following code to produce a different TinyMCE bar to the default WordPress setup:

if (function_exists('wp_tiny_mce')) {

    add_filter("mce_external_plugins", "add_myplugin_tinymce_plugin");
    add_filter('mce_buttons', 'register_myplugin_button');

    add_filter('teeny_mce_before_init', create_function('$a', '
      $a["theme"] = "advanced";
      $a["skin"] = "wp_theme";
      $a["height"] = "75";
      $a["width"] = "800";
      $a["onpageload"] = "";
      $a["mode"] = "exact";
      $a["elements"] = "elm1, elm2";
      $a["editor_selector"] = "mceEditor";
      $a["plugins"] = "safari,inlinepopups,spellchecker";

      $a["forced_root_block"] = false;
      $a["force_br_newlines"] = true;
      $a["force_p_newlines"] = false;
      $a["convert_newlines_to_brs"] = true;

      return $a;'));

    wp_tiny_mce(true);
}

Can anyone tell me how to work a basic custom button in there?

All I need is a straightforward button which prints [ph_min] into the editor area.

I’ve tried using the following filters to no avail:

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

function add_tcustom_tinymce_plugin($plugin_array)
{
    $plugin_array['highlight'] = WP_PLUGIN_URL . '/sf-tinyMCE-custom-buttons/mce/min_max_buttons/editor_plugin.js';
    return $plugin_array;
}

add_filter("mce_external_plugins", "add_tcustom_tinymce_plugin");
add_filter('mce_buttons', 'register_tcustom_button');

Is there any way of doing this, or will I have to use write a manual TinyMCE init which isn’t supported by WP?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0