web-dev-qa-db-fra.com

Est-il possible d'ajouter une autre ligne à la bascule de l'évier de cuisine tinyMCE?

Le bouton à bascule "évier de cuisine" tinyMCE affiche/cache une rangée de boutons. J'ai ajouté avec succès ma rangée de boutons de shortcode à l'éditeur tinyMCE, mais je me demandais s'il était possible de faire en sorte que ma rangée ne s'affiche que lorsque le bouton de l'évier de la cuisine est cliqué. Je ne veux pas ajouter les boutons directement à la rangée des éviers de cuisine car j'ai beaucoup de boutons qui ont besoin de leur propre rangée. Alors, puis-je faire en sorte que le bouton de l'évier de la cuisine affiche deux rangées au lieu d'une? Ou y a-t-il une sorte de modificateur lorsque j'ajoute ma rangée pour indiquer qu'elle doit être basculée lorsque l'utilisateur clique sur le bouton de l'évier de la cuisine?

Voici le code que j'utilise pour ajouter ma troisième rangée de boutons:

    // add shortcode buttons to the tinyMCE editor row 3
function add_button_3() {
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
   {
     add_filter('mce_external_plugins', 'add_plugin_3');
     add_filter('mce_buttons_3', 'register_button_3');
   }
}
//setup array of shortcode buttons to add
function register_button_3($buttons) {
   array_Push($buttons, "dropcap", "divider", "quote", "pullquoteleft", "pullquoteright", "boxdark", "boxlight", "togglesimple", "togglebox", "tabs", "signoff", "columns", "smallbuttons", "largebuttons", "lists");  
   return $buttons;
}
//setup array for tinyMCE editor interface
function add_plugin_3($plugin_array) {
   $plugin_array['lists'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['signoff'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['dropcap'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['divider'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['quote'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pullquoteleft'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pullquoteright'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['boxdark'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['boxlight'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['togglesimple'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['togglebox'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['tabs'] = get_bloginfo('template_url').'/js/customcodes.js'; 
   $plugin_array['columns'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['smallbuttons'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['largebuttons'] = get_bloginfo('template_url').'/js/customcodes.js';
   return $plugin_array;
}
add_action('init', 'add_button_3'); // add the add_button function to the page init

Cependant, la ligne que vous ajoutez n'est pas activée par le bouton de l'évier de la cuisine.

filtersshortcodetinymce
5
Industrial Themes

Oui!

  • Utilisez le filtre mce_buttons_2 pour ajouter des boutons à la lignesecond.
  • Utilisez le filtre mce_buttons_3 pour ajouter des boutons à la lignethird.

Voici un exemple de ce que j'utilise:

function mytheme_mce_buttons_row_3($buttons) {

     $buttons[] = 'fontselect';
     $buttons[] = 'fontsizeselect';
     $buttons[] = 'code';
     $buttons[] = 'sup';
     $buttons[] = 'sub';
     $buttons[] = 'backcolor';
     $buttons[] = 'separator';
     $buttons[] = 'hr';
     $buttons[] = 'wp_page';

     return $buttons;

}
add_filter("mce_buttons_3", "mytheme_mce_buttons_row_3");

Il suffit de déposer ceci dans functions.php. (Je l'ai mis dans ma fonction de configuration du thème, qui est accrochée à after_setup_theme.)

MODIFIER:

Je ne sais pas si cela fait une différence ou non, mais vous utilisez array_Push($buttons, $button), alors que j'utilise $buttons[] = $button

Voici votre code:

//setup array of shortcode buttons to add
function register_button_3($buttons) {
   array_Push($buttons, "dropcap");
   array_Push($buttons, "divider");
   array_Push($buttons, "quote");
   array_Push($buttons, "pullquoteleft");
   array_Push($buttons, "pullquoteright");
   array_Push($buttons, "boxdark");
   array_Push($buttons, "boxlight");
   array_Push($buttons, "togglesimple");
   array_Push($buttons, "togglebox");
   array_Push($buttons, "tabs");
   array_Push($buttons, "signoff"); 
   array_Push($buttons, "columns");
   array_Push($buttons, "smallbuttons");
   array_Push($buttons, "largebuttons");
   array_Push($buttons, "lists");     
   return $buttons;
}
add_filter('mce_buttons_3', 'register_button_3');

Qui, en utilisant ma méthode, ressemblerait à ceci:

//setup array of shortcode buttons to add
function register_button_3($buttons) {
   $buttons[] = 'dropcap';
   $buttons[] = 'divider';
   $buttons[] = 'quote';
   $buttons[] = 'pullquoteleft';
   $buttons[] = 'pullquoteright';
   $buttons[] = 'boxdark';
   $buttons[] = 'boxlight';
   $buttons[] = 'togglesimple';
   $buttons[] = 'togglebox';
   $buttons[] = 'tabs';
   $buttons[] = 'signoff'; 
   $buttons[] = 'columns';
   $buttons[] = 'smallbuttons';
   $buttons[] = 'largebuttons';
   $buttons[] = 'lists';     
   return $buttons;
}
add_filter('mce_buttons_3', 'register_button_3');

Essayez ça?

2
Chip Bennett

J'ai moi-même rencontré le même problème et après un petit travail jQuery, j'ai pu trouver une solution.

J'ai écrit ma réponse à la question de bascule dans un blog post .

Le code JavaScript dont vous avez besoin pour votre plugin éditeur ressemble à ceci:

 init: fonction (ed, url) {
 ed.onInit.add (function (ed) {
 if (getUserSetting ('hidetb', '0') == ' 0 ') {
 JQuery (' # content_toolbar3 ') .hide (); 
} 
 
 JQuery (' # wp-contenu-éditeur-conteneur # contenu_wp_adv ') .click (function () {
 if (jQuery (' # content_toolbar2 ') .is (': visible ')) {{.____.] jQuery (' # content_toolbar3 ') .show (); 
} else {
 jQuery ('# content_toolbar3') .hide (); 
} 
} 
}); 
}

J'espère que cela aidera tous ceux qui ont découvert ce fil!

2
Andy Adams

J'ai toujours pensé que le bouton 'Kitchen Sink' de l'éditeur MCE dans Wordpress ne fonctionnait pas correctement. J'ai vu la réponse de @AndyAdamns et l'ai développée, pour traiter également:

  1. basculer TOUTES les lignes qui suivent après le rang avec le bouton évier de cuisine
  2. permettant également au bouton de l'évier de cuisine de fonctionner lorsqu'il est placé dans la rangée 2 ou 3

Voici le javascript pour l'implémenter en tant que plugin MCE:

(function(){
    tinymce.create( "tinymce.plugins.extrarows", {init : function( a, b ){
        a.onInit.add( function( a ){
            var $btns = jQuery( '.mce_wp_adv.mceButtonEnabled' )

            // This function attempts to update mceButtonActive class on the 
            //   kitchen sink button appropriately, but .mceButtonActive seems to 
            //   be manipulated between user clicks by another script, so uses 
            //   custom class 'pfxMceButtonActive' to actually track toggle state. 
            function toggleFollowingRows( $el ){
                var $this = jQuery( $el );
                if( $this.hasClass( 'pfxMceButtonActive' ) ){
                    $this.removeClass( 'mceButtonActive pfxMceButtonActive' ).closest( '.mceToolbar' ).find( '~ .mceToolbar' ).hide();
                    setUserSetting( 'hidetb', 1 );
                } else {
                    $this.addClass( 'mceButtonActive pfxMceButtonActive' ).removeClass( 'mceButtonInactive' ).closest( '.mceToolbar' ).find( '~ .mceToolbar' ).show();
                    setUserSetting( 'hidetb', 0 );
                }
            }

            // Show rows based on local setting (Hide by default)
            var hidetb = getUserSetting( 'hidetb', 1 );
            if( hidetb && hidetb != '0' ){
                $btns.addClass( 'mceButtonActive pfxMceButtonActive' )
            }

            $btns.click( function( e ){
                toggleFollowingRows( jQuery( this ) );
                return false;
            } ).each( function(){
                toggleFollowingRows( jQuery( this ) );
            } )
        } );
    }, 
    getInfo : function(){
        return{longname : "Hide Extra Rows", author : "smhmic", authorurl : "http://smhmic.com", version : tinymce.majorVersion + "." + tinymce.minorVersion }
    }} );
    tinymce.PluginManager.add( "extrarows", tinymce.plugins.extrarows )
})();

... puis accrochez ce fichier à Wordpress:

add_filter( 'mce_external_plugins', 'mce_extrarows_plugin' );
function mce_extrarows_plugin( $plugins_array ){
    $plugins_array['extrarows'] = /* PATH TO JAVASCRIPT FILE */;
    return $plugins_array;
}

Ce plugin corrige également d'autres inconvénients mineurs rencontrés lors de l'utilisation de MCE dans Wordpress:

  • désactivez l'état activé/désactivé pour le bouton Kitchen Sink (sans ce plugin, le bouton était toujours initialisé à l'état désactivé)
  • état persistant d'inversion du bac de cuisine (sans ce plugin, parfois ne persiste pas lors du chargement de pages)
0
Stephen M. Harris