Enregistrement de boutons TinyMCE personnalisés, pour la zone d'administration, pour travailler avec des instances personnalisées de wp_editor

J'ai copié votre code dansmonfunctions.php,et ajouté unpanneau d'administration simple ('Foo')pour afficher l'éditeur. Ensuite,j'ai créé unnouveau répertoire à l'intérieur demonthème actuelpour lebouton de l'éditeur,et j'aiplacé lebouton de l'éditeur JS dans lefichier correspondant: /wp-content/themes/[my-theme-dir]/tinymce_buttons/pH/editor_plugin.js.

Résultat: quandje suis allé dans Dashboard> Foo (lepanneau quej'avais créé),celafonctionnait commeprévu. Capture d'écran:

Code:

 /**
 * This function conditionally hooks the function that adds custom buttons to the TinyMCE init array
 */
function wpse_48782_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', 'wpse_48782_add_SF_buttons_plugins');
    }
}
add_action( 'init', 'wpse_48782_add_SF_buttons' );

/**
 * Adds the pH button to the TinyMCE init array
 */
function wpse_48782_add_SF_buttons_plugins($plugin_array) {
    $plugin_array['pH'] = get_bloginfo('template_directory') . '/tinymce_buttons/pH/editor_plugin.js';
    return $plugin_array;
}

/**
 * Load a dummy admin panel to display editor
 */
function wpse_48782_add_panel() {
    add_menu_page( 'Foo', 'foo', 'manage_options', 'foo', 'wpse_48782_render_panel' );
}
add_action( 'admin_menu', 'wpse_48782_add_panel' );

/**
 * Callback to render the 'Foo' admin panel'
 */
function wpse_48782_render_panel() {
    ?>

    <div class="wrap">

    <?php

    $distribution = 'abc';

    wp_editor(
        $distribution,
        'distribution',
        array(
          'media_buttons' => false,
          'textarea_rows' => 8,
          'tabindex' => 4,
          'tinymce' => array(
            'theme_advanced_buttons1' => 'bold, italic, |, bullist, numlist, |, pH, pH_min',
            'theme_advanced_buttons2' => '',
            'theme_advanced_buttons3' => '',
            'theme_advanced_buttons4' => '',
          ),
        )
    );

    ?>
    </div>
    <?php
}
 

Donc,fondamentalement,vous avez raison,et vous devezfaire quelque chose différemment de ce queje fais dans les choses dont vous n'avezpas parlé dans votreexplication. Quelquespossibilités:

1. Vousn'avezpasmis lefichiereditor_plugin.js aubonendroit. Commementionné ci-dessus,votre cheminmène à: [your-theme-dir]/tinymce_buttons/pH/editor_plugin.js (et les versions -maxet -min). Assurez-vous que cesfichiersexistentet qu'ils contiennent lesjseditor_plugin que vous avezpubliés ci-dessus. Si vous ouvrez la console JS de votrenavigateur,vous devriez êtreen mesure de direen un coup d'œil si vous avez lesbons chemins - vous obtiendrez une "NetworkError" ou quelque chose comme ça si cen'estpas le cas.

2. Conflit deplug-in. Unplugin/thèmetrèsgrossier peut filtrer 'mce_external_plugins'et effacer lesmodifications apportéespar d'autresplugins (en renvoyant untableau d'initialisation quin'estpas lié au $pluginsArraypassé aufiltre). Parcourez votre répertoire wp-contentpour «mce_external_plugins»et examinez ce que voustrouvez; ou vouspouvezessayer de désactivertous les autrespluginset depasser à Twenty Eleven. Notez qu'unpluginpeut égalementeffacer vosparamètresen faisant quelque chose de stupide sur lefiltre 'tiny_mce_before_init',quiest le dernier à se déclencher avant que l'éditeurne soit rendu - recherchez-le également dans votre répertoire de contenu.

3. Vousplacez votre code aumauvaisendroit,afin qu'ilne soitpas chargépar WP. Je sais que vous dites que vous l'avezmis dans functions.php de votrethème -mais êtes-vous sûr? Peut-être que vous l'avezmis dans lemauvaisthème ou quelque chose comme ça? Nous avonstous desjours comme ça;)

4. Il y a une condition au début de votrepremièrefonction qui dit: si l'utilisateur actuelne peutpas éditer_postset aussine peutpas éditer_pages,ne leurmontrezpas lesboutons. Assurez-vous que vouseffectuez vostestsen utilisant un utilisateur quipossède aumoins une de ces limites. (Ouessayez de commenter complètement cette vérification,juste àtitre detest.)

I copied your code into my functions.php, and added a simple admin panel ('Foo') to display the editor. Then I created a new directory inside my current theme for the editor button, and put the editor button JS into the relevant file: /wp-content/themes/[my-theme-dir]/tinymce_buttons/pH/editor_plugin.js.

Result: when I went to Dashboard > Foo (the panel I'd created), it worked as expected. Screenshot:

Code:

/**
 * This function conditionally hooks the function that adds custom buttons to the TinyMCE init array
 */
function wpse_48782_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', 'wpse_48782_add_SF_buttons_plugins');
    }
}
add_action( 'init', 'wpse_48782_add_SF_buttons' );

/**
 * Adds the pH button to the TinyMCE init array
 */
function wpse_48782_add_SF_buttons_plugins($plugin_array) {
    $plugin_array['pH'] = get_bloginfo('template_directory') . '/tinymce_buttons/pH/editor_plugin.js';
    return $plugin_array;
}

/**
 * Load a dummy admin panel to display editor
 */
function wpse_48782_add_panel() {
    add_menu_page( 'Foo', 'foo', 'manage_options', 'foo', 'wpse_48782_render_panel' );
}
add_action( 'admin_menu', 'wpse_48782_add_panel' );

/**
 * Callback to render the 'Foo' admin panel'
 */
function wpse_48782_render_panel() {
    ?>

    <div class="wrap">

    <?php

    $distribution = 'abc';

    wp_editor(
        $distribution,
        'distribution',
        array(
          'media_buttons' => false,
          'textarea_rows' => 8,
          'tabindex' => 4,
          'tinymce' => array(
            'theme_advanced_buttons1' => 'bold, italic, |, bullist, numlist, |, pH, pH_min',
            'theme_advanced_buttons2' => '',
            'theme_advanced_buttons3' => '',
            'theme_advanced_buttons4' => '',
          ),
        )
    );

    ?>
    </div>
    <?php
}

So, you've basically got it right, and you must be doing something differently than what I'm doing in the stuff that you haven't talked about in your explanation. A couple possibilities:

1. You haven't put the editor_plugin.js file in the right place. As mentioned above, your path leads to: [your-theme-dir]/tinymce_buttons/pH/editor_plugin.js (and the -max and -min versions). Make sure that these file exist, and that they contain the editor_plugin js you've posted above. If you open up your browser's JS console, you should be able to tell at a glance whether you've got the paths right - you'll get a "NetworkError" or something like that if they're not.

2. Plugin conflict. A very rude plugin/theme may be filtering 'mce_external_plugins' and wiping out changes that are made by other plugins (by returning an init array that is unrelated to the $pluginsArray passed to the filter). Grep through your wp-content directory for 'mce_external_plugins' and examine what you find; or you could try disabling all other plugins and switching to Twenty Eleven. Note that a plugin could also wipe out your settings by doing something silly at the 'tiny_mce_before_init' filter, which is the last one to fire before the editor is rendered - look for that in your content directory too.

3. You're putting your code in the wrong place altogether, so that it's not being loaded by WP. I know you say that you've put it in your theme's functions.php - but are you sure? Maybe you've put it into the wrong theme or something like that? We all have days like that ;)

4. There's a condition at the beginning of your first function that says: if the current user can't edit_posts and also can't edit_pages, don't show them the buttons. Make sure that you're doing your testing using a user that has at least one of these caps. (Or try commenting out this check altogether, just as a test.)

Grâce à l'excellente réponse de Boone,j'aitrouvé leproblèmeexact.

Pour une raison quelconque,lorsqu'ilexiste desinstances de wp_editor sur l'ensemble depages avec teeny=true,lesboutonspersonnalisésne peuvent être utilisés sur aucuneinstance de wp_editor.

Si vous supprimez l'argument teeny=true,leproblème disparaît.

Thanks to Boone's excellent answer, I found the exact problem.

For some reason, when there are instances of wp_editor on the page set with teeny=true, custom buttons cannot be used on any instance of wp_editor.

If you remove the teeny=true argument, the problem disappears.