CkEditor toolbar group options to dropdown

I have a question about grouping some CkEditor toolbar options to dropdown menu. For example, if I add this option [‘JustifyLeft’, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’] to toolbar, I get 4 buttons. Since I think this is a waste od space in toolbar, I would like to put all 4 options to dropdown – that only 1 (selected) would be visible.

Is that even possible? I found this solution

  • Can I use CKEditor without a toolbar?
  • CKEDITOR How to disable the element information dialog
  • How to wrap selected text in ckeditor
  • how to interact with ckeditor, by catching and handling events
  • CKEditor can not parse JSON response
  • Remove wrapping p from img in ckeditor
  • 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;
                    }
                } );                       
            }
        }
    } );
    

    on http://jsfiddle.net/oleq/vmYCF/, but as you can see, now I have both options – 4 buttons + drop down, so that is not acceptable for me. And also in that case, I cannot set other toolbars ( and I don’t know why not).

    Thanks for any help

    Best Regards

  • CKEditor ReadOnly
  • How do I switch off this part of CK editor?
  • Dynamic menu for a RichCombo box in CKEditor
  • How to insert a CKEditor plugin in a Rails 3 app?
  • How to determine if CKEditor is loaded?
  • Issue when dropping an image in Ck-Editor content with Safari
  • One Solution collect form web for “CkEditor toolbar group options to dropdown”

    I was able to figure this out, though it’s kinda hacky. I converted that code in your post into a plugin, then added this to the CSS.

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

    For whatever reason, the plugin requires the justify plugin to be loaded and added to the toolbar for the dropdown icons in the justifygroup plugin to show up correctly. Hiding the extra 4 buttons does the trick.

    Here’s the plugin:

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