Creating a wp_editor instance with custom tinyMCE buttons

1 Views

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().

Read More

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,

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. 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).

  2. you can set the params via array on the wp_editor() function; an exmaple

    $settings = array(
    'tinymce'       => array(
        'setup' => 'function (ed) {
            tinymce.documentBaseURL = "' . get_admin_url() . '";
        }',
    ),
    'quicktags'     => TRUE,
    'editor_class'  => 'frontend-article-editor',
    'textarea_rows' => 25,
    'media_buttons' => TRUE,
);
wp_editor( $content, 'article_content', $settings );

    You can set the values via array in the param ‘tinymce’,
    ‘tinymce’ => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
    Also it is possible to get about the params of buttons:
    theme_advanced_buttons1, theme_advanced_buttons2, theme_advanced_buttons3, theme_advanced_buttons4

    array( 'theme_advanced_buttons1' => 'bold, italic, ul, pH, temp' )

    also you can get via filter hook to create custom buttons, also an example

    function fb_change_mce_options($initArray) {
    // Comma separated string od extendes tags
    // Command separated string of extended elements
    $ext = 'pre[id|name|class|style],iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src]';
    if ( isset( $initArray['extended_valid_elements'] ) ) {
        $initArray['extended_valid_elements'] .= ',' . $ext;
    } else {
        $initArray['extended_valid_elements'] = $ext;
    }
    // maybe; set tiny paramter verify_html
    //$initArray['verify_html'] = false;
    return $initArray;
}
add_filter( 'tiny_mce_before_init', 'fb_change_mce_options' );

    also you can filter the buttons directly; each line have an each filter:
    mce_buttons, mce_buttons_2, mce_buttons_3, mce_buttons_4

    the follow params are the default for the example on hook: tiny_mce_before_init

    'mode' => 'specific_textareas'
'editor_selector' => 'theEditor'
'width' => '100%'
'theme' => 'advanced'
'skin' => 'wp_theme'
'theme_advanced_buttons1' => 'bold,italic,strikethrough,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,|,link,unlink,wp_more,|,spellchecker,fullscreen,wp_adv'
'theme_advanced_buttons2' => 'formatselect,underline,justifyfull,forecolor,|,pastetext,pasteword,removeformat,|,media,charmap,|,outdent,indent,|,undo,redo,wp_help'
'theme_advanced_buttons3' => ''
'theme_advanced_buttons4' => ''
'language' => 'de'
'spellchecker_languages' => 'English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,+German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv'
'theme_advanced_toolbar_location' => 'top'
'theme_advanced_toolbar_align' => 'left'
'theme_advanced_statusbar_location' => 'bottom'
'theme_advanced_resizing' => true
'theme_advanced_resize_horizontal' => false
'dialog_type' => 'modal'
'relative_urls' => false
'remove_script_host' => false
'convert_urls' => false
'apply_source_formatting' => false
'remove_linebreaks' => true
'gecko_spellcheck' => true
'entities' => '38,amp,60,lt,62,gt'
'accessibility_focus' => true
'tabfocus_elements' => 'major-publishing-actions'
'media_strict' => false
'paste_remove_styles' => true
'paste_remove_spans' => true
'paste_strip_class_attributes' => 'all'
'wpeditimage_disable_captions' => false
'plugins' => 'safari,inlinepopups,spellchecker,paste,wordpress,media,fullscreen,wpeditimage,wpgallery,tabfocus'

    see on this link for more infos to this filter.

  3. Just to update this as I had to dig in the wp source files

    $settings = array(
    'tinymce' => array(
        'toolbar1' => 'bold, italic',
        'toolbar2' => '',
    ),
    'wpautop' => false,
    'media_buttons' => false,
);

    I think this had changed with Tinymce 4.

  4. $args = array(
    'tinymce'       => array(
        'toolbar1'      => 'bold,italic,underline,separator,alignleft,aligncenter,alignright,separator,link,unlink,undo,redo',
        'toolbar2'      => '',
        'toolbar3'      => '',
    ),
);
wp_editor( $content, $editor_id, $args );