CkEditor工具栏组选项下拉菜单

Question

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

这可能吗？我发现http://jsfiddle.net/oleq/vmYCF/这个解决方案

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

，但你可以看到，现在我有两种选择 - 4个按键+降了下来，所以这不是对我来说是可接受的。而且在这种情况下，我不能设置其他工具栏（我不知道为什么）。

感谢所有帮助

问候

Answer 1

我能想出解决办法，但它有点哈克。我将你的文章中的代码转换为插件，然后将其添加到CSS中。

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

无论出于何种原因，插件需要要加载的插件辩护，并添加到工具栏的下拉图标在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; 
      } 
     });      
    } 
});