web-dev-qa-db-fra.com

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

Existe-t-il un moyen de définir wp_editor() avec des boutons tinyMCE personnalisés?

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

Ma page utilise un certain nombre d'instances différentes et j'aimerais ajouter certains boutons à certaines instances.

Par exemple,

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

Est-ce que quelqu'un sait comment faire si j'ai déjà enregistré les boutons en tant que plugins tinyMCE selon ce tutoriel ?

EDIT

Voici le code que j'utilise dans mon fichier de plugin pour que cela fonctionne:

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, cela ne fonctionne pas - l'éditeur ci-dessus affiche simplement les mêmes boutons que toutes les autres instances de la page.

Merci d'avance,

tinymcewp-editor
19
dunc

Vous l'avez très bien eu, selon la description.

Voici ce que vous recherchez peut-être pour les instances 2 et 3 (par exemple, vous pouvez laisser les paramètres vides pour obtenir le jeu de boutons par 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 (affichant chacune des 4 lignes que vous pouvez définir pour 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 d'extraire le fichier wp-includes/class-wp-editor.php (plus précisément la fonction editor_settings à la ligne 126) afin de comprendre comment WP analyse les paramètres que vous utilisez dans la fonction wp_editor (). Consultez également cette page pour en savoir plus sur les fonctionnalités de TinyMCE et sur ses options init (que je ne crois pas, WP supporte totalement).

13
Tomas Buteler

vous pouvez définir les paramètres via array sur la fonction wp_editor (); un exemple

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

Vous pouvez définir les valeurs via un tableau dans le paramètre 'tinymce', 'tinymce' => true, // charger TinyMCE, peut être utilisé pour transmettre directement les paramètres à TinyMCE à l'aide d'un tableau (). Il est également possible d'obtenir les paramètres de boutons: theme_advanced_buttons1, theme_advanced_buttons2, theme_advanced_buttons3, theme_advanced_buttons4

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

vous pouvez également obtenir via un crochet de filtre pour créer des boutons personnalisés, également un exemple

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

aussi vous pouvez filtrer les boutons directement; chaque ligne a chaque filtre: mce_buttons, mce_buttons_2, mce_buttons_3, mce_buttons_4

les paramètres suivants sont les paramètres par défaut pour l'exemple sur le 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'

voir sur ce lien pour plus d'infos sur ce filtre.

9
bueltge

Juste pour mettre à jour ceci car je devais creuser dans les fichiers source wp

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

Je pense que cela avait changé avec Tinymce 4.

7
Sam
$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 );
1
Mr. HK