Creating a wp_editor instance with custom tinyMCE buttons

by

Is there a way to define wp_editor() with custom tinyMCE buttons?

I’ve noticed the wp_editor function reference mentions that one of the $settings arguments can be tinymce (array) (optional) Load TinyMCE, can be used to pass settings directly to TinyMCE using an array().

My page uses a number of different instances and I’d like to add certain buttons to certain instances.

For example,

Instance #1 : Standard buttons
Instance #2 : bold, italic, ul + (custom) pH, temp
Instance #3 : bold, italic, ul + (custom) min_size, max_size

Does anyone know how I’d go about doing this if I’ve already registered the buttons as tinyMCE plugins as per this tutorial?

EDIT

Here’s the code I’m using in my plugin file to get this working:

function add_SF_buttons() {
    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_SF_buttons_plugins');
    }
}

function add_SF_buttons_plugins($plugin_array) {
    $plugin_array['pH'] = $this->plugin_url . '/js/tinymce_buttons/pH.js';
    $plugin_array['pH_min'] = $this->plugin_url . '/js/tinymce_buttons/pH_min.js';
    $plugin_array['pH_max'] = $this->plugin_url . '/js/tinymce_buttons/pH_max.js';
    return $plugin_array;
}

–

if (isset($SpeciesProfile)) {
    add_action( 'init' , array (&$SpeciesProfile, 'register_species' ));
    add_action( 'init' , array( &$SpeciesProfile, 'register_species_taxonomies' ));

    add_action( 'init', array (&$SpeciesProfile, 'add_SF_buttons' ));
}

–

<?php wp_editor( $distribution, 'distribution', array( 'theme_advanced_buttons1' => 'bold, italic, ul, pH, pH_min', "media_buttons" => false, "textarea_rows" => 8, "tabindex" => 4 ) ); ?>

Unfortunately, this doesn’t work – the above editor simply displays the same buttons as every other instance on the page.

Thanks in advance,

4

You pretty much had it, according to the description.

Here’s what you might be looking for for instances 2 and 3 (for instance 1 you can leave the settings empty to get the default set of buttons):

Instance 2:

wp_editor(
    $distribution,
    'distribution',
    array(
      'media_buttons' => false,
      'textarea_rows' => 8,
      'tabindex' => 4,
      'tinymce' => array(
        'theme_advanced_buttons1' => 'bold, italic, ul, pH, temp',
      ),
    )
);

Instance 3 (showing each of the 4 rows you can set for TinyMCE):

wp_editor(
    $distribution,
    'distribution',
    array(
      'media_buttons' => false,
      'textarea_rows' => 8,
      'tabindex' => 4,
      'tinymce' => array(
        'theme_advanced_buttons1' => 'bold, italic, ul, min_size, max_size',
        'theme_advanced_buttons2' => '',
        'theme_advanced_buttons3' => '',
        'theme_advanced_buttons4' => '',
      ),
    )
);

I recommend that you check out the wp-includes/class-wp-editor.php file (specifically the editor_settings function on line 126) in order to understand how WP parses the settings you use inside the wp_editor() function. Also, check this page to understand more about the functionality of TinyMCE and its init options (which I don’t believe WP support fully).

Leave a Comment