Adding TinyMCE custom buttons when using teeny_mce_before_init

by

The question:

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?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

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

Leave a Comment