CkEditor 工具栏组选项下拉

Question

我有一个关于将一些 CkEditor 工具栏选项分组到下拉菜单的问题。例如，如果我将此选项 ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] 添加到工具栏，我会得到 4 个按钮。由于我认为这是工具栏中的浪费空间，因此我想将所有 4 个选项放到下拉列表中 - 只有 1 个（选中）可见。

这可能吗？我找到了这个解决方案

CKEDITOR.replace( 'editor', {
    plugins: 'wysiwygarea,sourcearea,basicstyles,toolbar,menu,menubutton,justify',
    on: {
        pluginsLoaded: function() {
            var editor = this,
                items = {};

            editor.addMenuGroup( 'some_group' );

            items.justifyleft = {
                label: editor.lang.justify.left,
                group: 'some_group',
                command: 'justifyleft',
                order: 1
            };

            items.justifyright = {
                label: editor.lang.justify.right,
                group: 'some_group',
                command: 'justifyright',
                order: 2
            };

            editor.addMenuItems( items );

            editor.ui.add( 'Groupped', CKEDITOR.UI_MENUBUTTON, {
                label: 'Groupped justify',
                // Disable in source mode.
                modes: { 
                    wysiwyg: 1 
                },
                icon: 'JustifyLeft',
                onMenu: function() {
                    var active = {};

                    // Make all items active.
                    for ( var p in items )
                        active[ p ] = CKEDITOR.TRISTATE_OFF;

                    return active;
                }
            } );                       
        }
    }
} );

在http://jsfiddle.net/oleq/vmYCF/ 上，但正如您所看到的，现在我有两个选项 - 4 个按钮 + 下拉菜单，所以这对我来说是不可接受的。而且在那种情况下，我无法设置其他工具栏（我不知道为什么不这样做）。

感谢您的帮助

最好的问候

Answer 1

我能够弄清楚这一点，虽然它有点 hacky。我将您帖子中的代码转换为插件，然后将其添加到 CSS 中。

.cke_button__justifyleft, 
.cke_button__justifyright, 
.cke_button__justifycenter,
.cke_button__justifyblock {
    display: none !important;
}

无论出于何种原因，该插件都需要加载 justify 插件并将其添加到工具栏中，以便 justifygroup 插件中的下拉图标正确显示。隐藏额外的 4 个按钮就可以了。

插件如下：

CKEDITOR.plugins.add( 'justifygroup', {
    // jscs:disable maximumLineLength
    requires: "wysiwygarea,basicstyles,toolbar,menu,menubutton,justify",
    lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
    // jscs:enable maximumLineLength
    hidpi: true, // %REMOVE_LINE_CORE%
    tabToOpen:null,
    init: function( editor ) {
        if ( editor.blockless )
            return;

        items = {};

        editor.addMenuGroup( 'some_group' );

        items.justifyleft = {
            label: editor.lang.justify.left,
            group: 'some_group',
            command: 'justifyleft',
            order: 1
        };
        items.justifycenter = {
            label: editor.lang.justify.center,
            group: 'some_group',
            command: 'justifycenter',
            order: 2
        };

        items.justifyright = {
            label: editor.lang.justify.right,
            group: 'some_group',
            command: 'justifyright',
            order: 3
        };

        items.justifyblock = {
            label: editor.lang.justify.block,
            group: 'some_group',
            command: 'justifyblock',
            order: 4
        };

        if (editor.addMenuItems) {
            editor.addMenuItems( items );
        }

        editor.ui.add( 'Grouped', CKEDITOR.UI_MENUBUTTON, {
            label: 'Grouped justify',
            icon: 'JustifyLeft',
            toolbar: "align",
            modes: { 
                wysiwyg: 1 
            },
            onMenu: function() {
                var active = {};

                // Make all items active.
                for ( var p in items )
                    active[ p ] = CKEDITOR.TRISTATE_OFF;

                return active;
            }
        } );                       
    }
} );