web-dev-qa-db-ja.com

TinyMCEキッチンシンクトグルにもう1行追加する方法はありますか？

TinyMCEの「キッチンシンク」トグルボタンは、一列のボタンを表示/非表示にします。自分のショートコードボタンの列をtinyMCEエディタに追加することに成功しましたが、台所の流しボタンがクリックされたときにのみ自分の列を表示する方法があるかどうか疑問に思いました。ボタンを台所の流しの列に直接追加したくないのは、自分の列を必要とするボタンがたくさんあるからです。それで、私は台所の流しボタンに1つではなく2つの行を表示させることができますか？それとも台所の流しボタンがクリックされたときにそれがトグルされるべきであることを示すために私が私の列を加えるときある種の修飾子がありますか？

これが、3行目のボタンを追加するためのコードです。

    // 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

ただし、追加する行はキッチンのシンクボタンで切り替えられません。

filtersshortcodetinymce
5
Industrial Themes

はい！

  • mce_buttons_2フィルターを使用して、 second 行にボタンを追加します。
  • mce_buttons_3フィルターを使用して、 third の行にボタンを追加します。

これが私が使っているものの例です。

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

これをfunctions.phpにドロップするだけです。 （私はそれを私のテーマ設定関数に入れました。それはafter_setup_themeにフックされます。）

編集：

違いがあるかどうかはわかりませんが、array_Push($buttons, $button)を使用しています。$buttons[] = $buttonを使用しています。

これがあなたのコードです：

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

私の方法では、これは次のようになります。

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

試してみる？

2
Chip Bennett

私はこの同じ問題に私自身がぶつかり、少しのjQueryの作業の後に私は解決策を見つけることができました。

トグル問題に対する私の答えを ブログ記事 に書いた。

エディタプラグインに必要なJavaScriptは、次のようになります。

 init：関数（ed、url）{
 ed.onInit.add（関数（ed）{
 if（getUserSetting（ 'hidetb'、 '0'）== '） 0 '）{
 jQuery（'＃content_toolbar3 '）.hide（）; 
} 
 
 jQuery（'＃wp-コンテンツエディタコンテナ#content_wp_adv （function（）{
 if（jQuery（ '＃content_toolbar2'）.is（ '：visible'））{
 jQuery（ '＃content_toolbar3'）.show（）;）をクリックします。 
} else {
 jQuery（ '＃content_toolbar3'）.hide（）; 
} 
}）; 
}）; 
]

私はこれがこのスレッドに出会った他の誰かに役立つことを願っています！

2
Andy Adams

私はいつもWordpressのMCEエディタの 'Kitchen Sink'ボタンがうまく機能しないと思っていました。私は@AndyAdamnsの答えを見て、それをさらに詳しく説明するために拡張しました。

  1. kitchen Sinkボタンで行の後に続くすべての行を切り替える
  2. 2列目または3列目に配置されている場合は、キッチンシンクのボタンも機能します。

これをMCEプラグインとして実装するためのJavaScriptを次に示します。

(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 )
})();

...そしてこのファイルを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;
}

このプラグインはまた、WordpressでMCEを使用しているときに私が遭遇したその他のささいな煩さにも対処します。

  • kitchen Sinkボタンのオン/オフ状態をクリアします（このプラグインがなければ、ボタンは常にオフ状態で初期化されているように見えました）
  • 永続的なKitchen Sinkトグル状態（このプラグインがないと、ページをロードしても持続しないことがありました）
0
Stephen M. Harris