有没有办法在tinyMCE厨房水槽开关上再加一排？

时间：2011-04-01 作者：Industrial Themes

tinyMCE“kitchen sink”切换按钮显示/隐藏一行按钮。我已经成功地将我的一行快捷代码按钮添加到tinyMCE编辑器中，但我想知道是否有办法使我的行仅在单击厨房水槽按钮时显示。我不想直接将按钮添加到厨房水槽行，因为我有许多按钮需要自己的行。那么，我可以让厨房的水槽按钮显示两排而不是一排吗？或者，当我添加行时，是否有某种修改器指示在单击厨房水槽按钮时应切换行？

下面是我用来添加第三行按钮的代码：

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

但是，“厨房水槽”按钮不会切换添加的行。

3 个回复

最合适的回答,由SO网友:Chip Bennett 整理而成

对

使用mce_buttons_2 筛选以将按钮添加到第二行mce_buttons_3 筛选以将按钮添加到第三行

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

把这个放在函数中就行了。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\');

试试看？

SO网友:Andy Adams

我自己也遇到了同样的问题，在完成了一点jQuery工作后，我找到了一个解决方案。

我在一个blog post.

编辑器插件所需的JavaScript如下所示：

init : function( ed, url ) {
    ed.onInit.add(function( ed ) {
        if ( getUserSetting( \'hidetb\', \'0\' ) == \'0\' ) {
            jQuery( \'#content_toolbar3\' ).hide();
        }

        jQuery( \'#wp-content-editor-container #content_wp_adv\' ).click(function() {
            if ( jQuery( \'#content_toolbar2\' ).is( \':visible\' ) ) {
                jQuery( \'#content_toolbar3\' ).show();
            } else {
                jQuery( \'#content_toolbar3\' ).hide();
            }
        });
    });
}

我希望这能帮助其他遇到这条线索的人！

SO网友:Stephen M. Harris

我一直认为Wordpress中MCE编辑器中的“厨房水槽”按钮工作不太正常。我看到了@AndyAdamns的答案，并对其进行了扩展，以处理：

使用厨房洗涤槽按钮切换该行之后的所有行，也允许厨房洗涤槽按钮在第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时遇到的其他小麻烦：

清除厨房水槽按钮的打开/关闭状态（没有此插件，按钮总是在关闭状态下初始化）

持续的厨房水槽切换状态（没有此插件，有时不会在页面加载中持续）

结束

小码农CODE

有没有办法在tinyMCE厨房水槽开关上再加一排？

相关推荐

hooks & filters and variables