Drop-down toolbar for CKEditor 4

Question

Is it possible to create a drop-down menu consisting of toolbar buttons?

I want to have a button on the toolbar that groups the alignment buttons (and possibly others) into a drop-down menu.

thanks

Answer 1

The problem is not that difficult, but still you need to write a couple lines of code. The following logic inside pluginsLoaded can (should) be defined in the init completely new plugin (which could be called "groupped-justify"). Otherwise, if executed too late, for example. after creating the toolbar, all the code does not make sense.

Refer to the official plugin development guide for more.

Also see jsFiddle with a working example.

 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

I had the same code that @oleq suggested. In my case, I needed them to initialize the plugin and therefore could not display menu items due to an error caused by the "command" in the object of objects. I don’t know why this happened, but I managed to fix it by deleting the command and adding the onClick event to each element

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

Hope this helps