web-dev-qa-db-fra.com

Enregistrement de boutons TinyMCE personnalisés, pour la zone d'administration, afin de fonctionner avec les instances personnalisées de l'éditeur

Grâce à cette réponse ici , je peux utiliser différentes instances de wp_editor pour déterminer les boutons utilisés par chacune de mes différentes instances de TinyMCE.

Cependant, j'ai du mal à faire enregistrer mes boutons. Ils ne figurent tout simplement pas sur l'interface TinyMCE comme ils le devraient.

J'ai essayé deux approches différentes: insérer le code dans mon plug-in species-profiles (un type de message personnalisé appelé species dans lequel je souhaite que les instances de TinyMCE soient décrites) et placer le code dans le functions.php de mon thème.

Le code que j'utilise est:

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'] = get_bloginfo('template_directory') . '/tinymce_buttons/pH/editor_plugin.js';
    $plugin_array['pH_min'] = get_bloginfo('template_directory') . '/tinymce_buttons/pH_min/editor_plugin.js';
    $plugin_array['pH_max'] = get_bloginfo('template_directory') . '/tinymce_buttons/pH_max/editor_plugin.js';
    return $plugin_array;
}

add_action( 'init', 'add_SF_buttons' );

Le code que j'utilise pour initialiser l'instance wp_editor conformément à la réponse susmentionnée est le suivant:

<?php
    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' => '',
          ),
        )
    );
?>

Les plugins que j'essaie d'utiliser ressemblent tous à ceci:

(function() {
    tinymce.create('tinymce.plugins.pH', {
        init : function(ed, url) {
            ed.addButton('pH', {
                title : 'pH',
                image : url+'/pH.png',
                onclick : function() {
                    var caret = "caret_pos_holder";
                    var insert = '[pH]';
                    ed.execCommand('mceInsertContent', false, insert);
                    ed.selection.select(ed.dom.select('span#caret_pos_holder')[0]); //select the span
                    ed.dom.remove(ed.dom.select('span#caret_pos_holder')[0]); //remove the span
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
        getInfo : function() {
            /*
             * I intentionally left the information of
             * Brett Terpstra, as his code was the
             * foundation for this.
            */
            return {
                longname : "Brett's YouTube Shortcode",
                author : 'Brett Terpstra',
                authorurl : 'http://brettterpstra.com/',
                infourl : 'http://brettterpstra.com/',
                version : "1.0"
            };
        }
    });
    tinymce.PluginManager.add('pH', tinymce.plugins.pH);
})();

Autant que je sache, tout ce que j'ai fait là est correct? Pourtant, les boutons personnalisés ne s'affichent pas. Je suppose que je fais quelque chose de mal - l'initialisation incorrecte, ou quelque chose.

How the TinyMCE interface appears

Merci d'avance,

tinymcewp-editorplugin-tinymce
2
dunc

J'ai copié votre code dans le fichier functions.php et ajouté un simple panneau d'administration ("Foo") pour afficher l'éditeur. Ensuite, j'ai créé un nouveau répertoire dans mon thème actuel pour le bouton d'éditeur, puis le bouton d'éditeur JS dans le fichier approprié: /wp-content/themes/[my-theme-dir]/tinymce_buttons/pH/editor_plugin.js.

Résultat: lorsque je suis allé dans Tableau de bord> Foo (le panneau que j'avais créé), cela a fonctionné comme prévu. Capture d'écran:

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
}

Donc, vous avez tout à fait raison, et vous devez faire quelque chose de différent de ce que je fais dans ce que vous n'avez pas parlé à propos de votre explication. Quelques possibilités:

  1. Vous n'avez pas placé le fichier editor_plugin.js au bon endroit. Comme mentionné ci-dessus, votre chemin mène à: [your-theme-dir]/tinymce_buttons/pH/editor_plugin.js (et les versions -max et -min). Assurez-vous que ces fichiers existent et qu’ils contiennent les fichiers editor_plugin que vous avez publiés ci-dessus. Si vous ouvrez la console JS de votre navigateur, vous devriez être capable de dire en un coup d'œil si vous avez les bons chemins - vous obtiendrez un "NetworkError" ou quelque chose comme ça s'ils ne le sont pas.

  2. Conflit de plugin. Un plugin/thème très grossier peut filtrer 'mce_external_plugins' et effacer les modifications apportées par d’autres plugins (en renvoyant un tableau init qui n’est pas lié au $pluginsArray passé au filtre). Grep dans votre répertoire wp-content pour 'mce_external_plugins' et examinez ce que vous trouvez; ou vous pouvez essayer de désactiver tous les autres plugins et de passer à Twenty Eleven. Notez qu'un plugin pourrait également effacer vos paramètres en faisant quelque chose d'idiot avec le filtre 'tiny_mce_before_init', qui est le dernier à se déclencher avant que l'éditeur soit rendu - recherchez-le également dans votre répertoire de contenu.

  3. Vous mettez votre code au mauvais endroit, de sorte qu'il ne soit pas chargé par WP. Je sais que vous dites que vous l'avez mis dans le functions.php de votre thème - mais êtes-vous sûr? Peut-être que vous l'avez mis dans le mauvais thème ou quelque chose comme ça? Nous avons tous des jours comme ça;)

  4. Il y a une condition au début de votre première fonction qui dit: si l'utilisateur actuel ne peut pas edit_posts et ne peut pas non plus edit_pages, ne leur affichez pas les boutons. Assurez-vous que vous effectuez vos tests en utilisant un utilisateur ayant au moins l'une de ces limites. (Ou essayez de commenter cette vérification complètement, juste comme un test.)

3
Boone Gorges

Grâce à l'excellente réponse de Boone, j'ai trouvé le problème exact.

Pour une raison quelconque, lorsqu'il existe des instances de wp_editor sur le jeu de pages avec teeny=true, les boutons personnalisés ne peuvent être utilisés sur aucune instance de wp_editor.

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

1
dunc