Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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,

share|improve this question

2 Answers 2

up vote 10 down vote accepted
+50

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

share|improve this answer
    
Hi mate. Thanks for the response. I've added some code to my original post which I believe, judging from your answer, should work - but doesn't. Could you have a look? –  dunc Apr 12 '12 at 8:52
    
I forgot to wrap the tinymce-specific parameters into their own array. I've edited the answer and added the other parameters you've know put on your question. Let me know how it goes? –  tbuteler Apr 12 '12 at 10:29
1  
Also bear in mind that others ( me! ) would like to know how to do this ourselves, so try not to devolve into an answer that is specific to dunc and only dunc. Can you add links to any relevant WP/TinyMCE documentation? –  Tom J Nowell Apr 12 '12 at 10:38
    
Great, this appears to work. Unfortunately my buttons aren't, but that's a separate question :) Thanks tbuteler. –  dunc Apr 12 '12 at 13:50
    
You're welcome! @TomJNowell, I've added one last paragraph with recommended reading, thanks for the suggestion! –  tbuteler Apr 12 '12 at 14:30

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.

share|improve this answer
    
very helpfull! thanks @bueltge –  Sagive SEO Apr 12 '12 at 19:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.