CKEditor的下拉菜單按鈕4

Question

是否可以創建一個由工具欄按鈕組成的下拉菜單菜單？

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

謝謝

Answer 1

問題並不難，但你仍然需要編寫幾行代碼。 pluginsLoaded中的以下邏輯可以（應該）在全新插件（可以稱爲「分組對齊」）的init中定義。否則，如果執行得太晚，例如工具欄生成後，整個代碼沒有意義。

查看official plugin development guide瞭解更多信息。

另請參見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 
      } 
     }; 

希望這有助於