CKEditor 4.7 - Justify Group Menu Button

Question

i'm trying to create a dropdown menu in CKEditor to group some normal button tool just because i need to compress the toolsbar. For this i'm trying to create, for example, a justify group button menu, for this i have compile this plugin :

CKEDITOR.plugins.add('justifygroup', {
    requires: ['justify'],
    init: function (editor) {
        var items = {
            justifyleft: {
                label: editor.lang.justify.left,
                group: 'justify_group',
                command: 'justifyleft',
                // icon: CKEDITOR.getUrl(this.path + 'icons/icon.png'),
                order: 1
            },
            justifycenter: {
                label: editor.lang.justify.center,
                group: 'justify_group',
                command: 'justifycenter',
                order: 2
            },
            justifyright: {
                label: editor.lang.justify.right,
                group: 'justify_group',
                command: 'justifyright',
                order: 3
            },
            justifyblock: {
                label: editor.lang.justify.block,
                group: 'justify_group',
                command: 'justifyblock',
                order: 4
            }
        };

        editor.addMenuGroup('justify_group');
        editor.addMenuItems(items);

        editor.ui.add('JustifyGroup', CKEDITOR.UI_MENUBUTTON, {
            label: 'Justify Group',
            icon: 'JustifyLeft',
            // Disable in source mode.
            modes: {
                wysiwyg: 1
            },
            onMenu: function () {
                var activeItems = {};

                // Make all items active.
                for (var prop in items)
                    activeItems[prop] = CKEDITOR.TRISTATE_OFF;

                return activeItems;
            }
        });
    }
});

here it is a demo of this plugin : https://codepen.io/seltix/pen/dWxWbO

CKEDITOR.replace('textarea', {
 extraPlugins: 'justifygroup',
 toolbar:[{name: 'test', items: ['JustifyGroup']}]
});

the problems :

• 1 - if i dont call one of the align buttons on the toolbar ('JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock') the button menu does not show any button

• 2 - i'm unable to control some sort of visual mark to show what alignment is in use (like on the toolbar buttons)

  UPDATE : I found the solution for this problem on the "onMenu" function replacing activeItems[prop] = CKEDITOR.TRISTATE_OFF; with activeItems[prop] = editor.getCommand(items[prop].command).state;

• 3 - i dont know why but the first option is always with "focus", how can I set the focus to match a specific item?

thanks all!

Answer 1

1 - The problem that is causing buttons not to display is ACF. Buttons that you're grouping in your dropdown requires certain tags/attrs to be available. In the simplest case it requires text-align to be applicable on p.

It looks that there's a bug in CKEditor that buttons added using editor.addMenuItems are not registering properly new ACF rules, while they do if added directly to the toolbar.

3 - I couldn't find a proper function for that, IMHO it should be doable in onMenu function, however it does not provide enough references to do that. Sounds like a feature request.

Generally you should look at language plugin, as it has many things you are looking for so it's a nice source of inspiration.

For future reference, please create separate StackOverflow question for each case. Though these issues were releated, they are a different cases.