CKEditor 4的下拉工具欄按鈕

Question

是否可以創建一個包含工具欄按鈕的下拉樣式菜單？

我想在工具欄上有一個按鈕，它將對齊按鈕（可能還有其他按鈕）分組到一個下拉菜單中。

謝謝

Answer 1

問題並不是那么難，但你還是要編寫幾行代碼。 pluginsLoaded的以下邏輯可以（應該）在一個全新的插件的init中定義（可以稱為“groupped-justify”）。 否則，如果執行得太晚，例如在生成工具欄之后，整個代碼就沒有意義了。

請參閱官方插件開發指南以了解更多信息。

另請參閱jsFiddle的工作示例。

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

Answer 2

我有與@oleq建議的代碼相同的代碼。 在我的情況下，我需要他們在插件初始化，因此無法顯示菜單項，因為項目對象中的“命令”導致的錯誤。 我不知道為什么會發生這種情況，但我設法通過刪除命令並將onClick事件添加到每個項目來修復它

items.flleft = {
            label: "Add and align left",
            group: 'some_group',
            icon: this.path + 'icons/imgtemplate_left.png',
            order: 1,
            onClick: function(){
               // Do stuff on menu item clicked
            }
        };

希望這可以幫助