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

我能夠弄清楚這一點，雖然它有點像黑客。 我將您帖子中的代碼轉換為插件，然后將其添加到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;
            }
        } );                       
    }
} );