Création d'une instance wp_editor avec des boutons tinyMCE personnalisés

Question

Création d'une instance wp_editor avec des boutons tinyMCE personnalisés

19

30917 2012-04-08

Existe-t-il unmoyen de définir wp_editor() avec desboutonstinyMCEpersonnalisés?

J'ai remarqué que la référence de lafonction wp_editor mentionne que l'un des arguments $settingspeut être tinymce (array) (optional) Load TinyMCE, can be used to pass settings directly to TinyMCE using an array().

Mapage utilise un certainnombre d'instances différenteset j'aimerais ajouter certainsboutons à certainesinstances.

Parexemple,

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

Quelqu'un sait-il commentje procéderais sij'ai déjàenregistré lesboutonsen tant quepluginstinyMCE selon cetutoriel ?

Voici le code quej'utilise dansmonfichierpluginpour que celafonctionne:

 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 ) ); ?>

Malheureusement,celane fonctionnepas - l'éditeur ci-dessus affiche simplement lesmêmesboutons quetoutes les autresinstances de lapage.

Merci d'avance,

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 réponses

votes

9

2012-04-12

vouspouvez définir lesparamètres via untableau sur lafonction wp_editor (); unexemple

 $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 );

Vouspouvez définir les valeurs via untableau dans leparamètre 'tinymce', 'tinymce'=>true,//charge TinyMCE,peut être utilisépourpasser lesparamètres directement à TinyMCEen utilisant un array () Ilest égalementpossible de connaître lesparamètres desboutons: theme_advanced_buttons1,theme_advanced_buttons2,theme_advanced_buttons3,theme_advanced_buttons4

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

vouspouvez également obtenir via le crochet defiltrepour créer desboutonspersonnalisés,également unexemple

 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' );

vouspouvez égalementfiltrer lesboutons directement; chaque ligne a un chaquefiltre: mce_buttons,mce_buttons_2,mce_buttons_3,mce_buttons_4

lesparamètres suivants sont lesparamètrespar défautpour l'exemple sur 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'

consultez ce lien pourplus d'informations sur cefiltre.

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.

7

2017-01-30

Justepourmettre àjour ceci carje devaisfouiller dans lesfichiers source wp

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

Jepense que cela avait changé avec Tinymce 4.

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.

1

2018-02-14

 $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 );

$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 );

Tomas Buteler · Accepted Answer · 2012-04-12

13

2012-04-12

Vous l'avez àpeuprès,selon la description.

Voici ce que vous recherchezpour lesinstances 2et 3 (parexemple 1,vouspouvez laisser lesparamètres videspour obtenir l'ensemble deboutonspar défaut):

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 (montrant chacune des 4 lignes que vouspouvez définirpour 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' => '',
      ),
    )
);

Je vous recommande de consulter lefichier wp-includes/class-wp-editor.php (enparticulier lafonction editor_settings à la ligne 126) afin de comprendre comment WP analyse lesparamètres que vous utilisez dans lafonction wp_editor (). Consultez également cettepage pouren savoirplus sur lesfonctionnalités de TinyMCEet ses options d'initialisation (ce queje ne croispas WPentièrement).

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

Salutmonpote.Mercipour la réponse.J'ai ajouté du code àmonmessage d'origine qui,àen jugerpar votre réponse,devraitfonctionner,mais cen'estpas le cas.Pourriez-vousjeter un oeil?

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?
- 0
- 2012-04-12
- dunc
J'ai oublié d'envelopper lesparamètres spécifiques à Tinymce dans leurpropretableau.J'ai édité la réponseet ajouté les autresparamètres que vous connaissez de votre question.Faites-moi savoir comment ça sepasse?

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?
- 0
- 2012-04-12
- Tomas Buteler
Gardez également à l'esprit que d'autres (moi!) Aimeraient savoir commentfaire celanous-mêmes,alorsessayez dene pas vous laisser aller à une réponse spécifique à duncet uniquement à dunc.Pouvez-vous ajouter des liens vers une documentation WP/TinyMCEpertinente?

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?
- 1
- 2012-04-12
- Tom J Nowell
Super,cela semblefonctionner.Malheureusement,mesboutonsne le sontpas,mais c'est une question distincte :) Mercitbuteler.

Great, this appears to work. Unfortunately my buttons aren't, but that's a separate question :) Thanks tbuteler.
- 0
- 2012-04-12
- dunc
De rien!@TomJNowell,j'ai ajouté un dernierparagraphe avec une lecture recommandée,mercipour la suggestion!

You're welcome! @TomJNowell, I've added one last paragraph with recommended reading, thanks for the suggestion!
- 0
- 2012-04-12
- Tomas Buteler
J'aipresque oublié de vous attribuer laprime :) Nouvelle questionici si vous avez desidées: http://wordpress.stackexchange.com/questions/48782/registering-custom-tinymce-buttons-for-admin-area-to-travailler avec uneinstancepersonnalisée

Nearly forgot to award you the bounty :) New question is up here if you have any ideas: http://wordpress.stackexchange.com/questions/48782/registering-custom-tinymce-buttons-for-admin-area-to-work-with-custom-instance
- 0
- 2012-04-13
- dunc