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

19

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 mentionne que l'un des $settingsarguments 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 j'y arriverais si j'ai déjà enregistré les boutons en tant que plugins tinyMCE selon ce tutoriel ?


ÉDITER

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,

dunc
la source

Réponses:

13

Vous l'aviez à peu près, selon la description.

Voici ce que vous recherchez peut-être pour les instances 2 et 3 (par exemple 1, vous pouvez laisser les paramètres vides pour obtenir l'ensemble 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 de vérifier le wp-includes/class-wp-editor.phpfichier (en particulier la editor_settingsfonction à 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 ses options d'initialisation (que je ne crois pas que WP prend entièrement en charge).

Tomas Buteler
la source
Salut mon pote. Merci pour la réponse. J'ai ajouté du code à mon message d'origine qui, à mon avis, à en juger par votre réponse, devrait fonctionner - mais ne fonctionne pas. Pourriez-vous jeter un œil?
2012
J'ai oublié d'envelopper les paramètres spécifiques à tinymce dans leur propre tableau. J'ai édité la réponse et ajouté les autres paramètres que vous connaissez sur votre question. Faites-moi savoir comment ça se passe?
Tomas Buteler
1
Gardez également à l'esprit que d'autres (moi!) Aimeraient savoir comment le faire nous-mêmes, alors essayez de ne pas devenir une réponse spécifique à dunc et seulement à dunc. Pouvez-vous ajouter des liens vers toute documentation WP / TinyMCE pertinente?
Tom J Nowell
Génial, cela semble fonctionner. Malheureusement, mes boutons ne le sont pas, mais c'est une question distincte :) Merci tbuteler.
Dunc
Vous êtes les bienvenus! @TomJNowell, j'ai ajouté un dernier paragraphe avec une lecture recommandée, merci pour la suggestion!
Tomas Buteler du
9

vous pouvez définir les paramètres via un tableau sur la fonction wp_editor (); un 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 ); 

Vous pouvez définir les valeurs via un tableau dans le paramètre 'tinymce', 'tinymce' => true, // charger TinyMCE, peut être utilisé pour passer des paramètres directement à TinyMCE à l'aide d'un tableau () Il est également possible d'obtenir des informations sur 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' );

vous pouvez également filtrer les boutons directement; chaque ligne possède un 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 crochet: 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.

bueltge
la source
7

Juste pour mettre à jour cela 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.

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