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

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

Thanks

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

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

Thanks

• javascript
• jquery
• drop-down-menu
• ckeditor
• toolbar

2 Answers 2

The problem is not that hard but still you got to write a couple lines of code. The following logic inside pluginsLoaded can (should) be defined in init of a totally new plugin (which could be called "groupped-justify"). Otherwise, if executed too late, e.g. after toolbar was generated, the whole code makes no sense.

See the official plugin development guide to know more.

Also see the 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',
                mand: 'justifyleft',
                order: 1
            };

            items.justifyright = {
                label: editor.lang.justify.right,
                group: 'some_group',
                mand: '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;
                }
            } );                       
        }
    }
} );

I had the same code that @oleq has suggested. In my case i needed them on plugin init and so could'nt display menu items because of an error caused by "mand" in items object. I don't know why exactly this was happening but i managed to fix it by removing mand and adding onClick event to each item

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