javascript - 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 - 我不知道为什么，但第一个选项总是使用“焦点”，如何设置焦点以匹配特定项目？

谢谢大家!

Answer 1

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

CKEditor 中似乎存在使用 editor.addMenuItems 添加按钮的错误没有正确注册新的 ACF 规则，而直接添加到工具栏则可以。

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

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

为了便于将来引用，请为每个案例创建单独的 StackOverflow 问题。尽管这些问题相关，但它们是不同的情况。