CKEditor 4.7 - 对齐组菜单按钮

Question

我正在尝试在 CKEditor 中创建一个下拉菜单来对一些普通的按钮工具进行分组，只是因为我需要压缩工具栏。为此，我正在尝试创建一个对齐组按钮菜单，为此我已经编译了这个插件：

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

这是这个插件的演示：https://codepen.io/seltix/pen/dWxWbO

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

问题：

1 - 如果我不调用工具栏上的对齐按钮之一 ('JustifyLeft'、'JustifyCenter'、'JustifyRight'、'JustifyBlock') 按钮菜单不显示任何按钮
2 - 我无法控制一些一种视觉标记，用于显示正在使用的对齐方式（如工具栏按钮）

更新： 我在 "onMenu" 函数上找到了这个问题的解决方案，将 activeItems[prop] = CKEDITOR.TRISTATE_OFF; 替换为 activeItems[prop] = editor.getCommand(items[prop].command).state;
3 - 我不知道为什么，但第一个选项总是使用“focus”，如何设置焦点以匹配特定项目？

谢谢大家！

Answer 1

1 - 导致按钮不显示的问题是 ACF。您在下拉菜单 requires certain tags/attrs 中分组的按钮可用。在最简单的情况下，它需要 text-align 适用于 p.

看起来 CKEditor 中有一个错误，使用 editor.addMenuItems 添加的按钮没有正确注册新的 ACF 规则，而如果直接添加到工具栏则可以。

3 - 我找不到合适的函数，恕我直言，它应该在 onMenu 函数中可行，但它没有提供足够的参考来做到这一点。听起来像是功能请求。

通常你应该看看 language 插件，因为它有很多你正在寻找的东西，所以它是一个很好的灵感来源。

为了将来参考，请为每个案例创建单独的 Whosebug 问题。虽然这些问题是相关的，但它们是不同的情况。

CKEditor 4.7 - 对齐组菜单按钮

CKEditor 4.7 - Justify Group Menu Button

javascript

ckeditor

ckeditor4.x