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函数中可行，但它没有提供足够的参考来做到这一点。听起来像是一个功能请求。

一般来说，你应该看看language插件，因为它有许多你想要的东西，所以它是一个很好的灵感来源。

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

CKEditor 4.7 - 对齐组菜单按钮

1 个答案: