自定义UI下拉按钮未显示所有命令

Question

我正如下面所做，将一组命令分组为单个下拉列表，但所有项目都没有显示

CKEDITOR.config.toolbar = [{ 
    name: 'paragraph', 
    groups:['list', 'indent', 'blocks', 'align', 'bidi'], 
    items: ['More']
}];

CKEDITOR.replace(editorName, {
    on: {
        pluginsLoaded: function () {
            var editor = this,
                items = {}, groupName = 'Justify_Group',
                config = CKEDITOR.config;
            var more_Group = 'More_Group';
            editor.addMenuGroup(more_Group);
            var moreButtons = {
                Subscript: 'Sub Script',
                Superscript: 'Super Script',
                NumberedList: 'Numbered List',
                BulletedList: 'Bullet List',
                Outdent: 'Outdent',
                Indent: 'Indent',
                Blockquote: 'Blockquote',
                RemoveFormat: 'Remove Format'
            }, moreItems = {};
            for (var i in moreButtons) {
                var v = moreButtons[i];
                moreItems[i.toLowerCase()] = {
                    label: v,
                    group: more_Group,
                    command: i.toLowerCase(),
                    order: 1
                };
            }
            editor.ui.add('More', CKEDITOR.UI_MENUBUTTON, {
                label: 'More',
                name: 'More',
                modes: {
                    wysiwyg: 1
                },
                onMenu: function () {
                    var active = {};
                    for (var p in moreItems)
                    active[p] = null
                    return active;
                }
            });
        }
    }
});

但同样的事情适用于Justify按钮。在上面的命令列表中，只有项目符号列表显示在下拉列表中，同时将(properties)文本添加到给定标签。

如何解决此问题

Answer 1

你唯一缺少的就是添加适当的菜单项。

完成editor.addMenuItem。

为什么要添加菜单项？

CKEditor UI菜单使用菜单项，而不是按钮或类似的东西。

提到的子弹列表/编号列表只是一个巧合，很可能是因为其他插件注册了它们以在上下文菜单中使用它（因为它重用了菜单对象）。

如何在您的案例中修复它？

为了方便起见，我们会使用editor.addMenuItems。

如果您不为命令名称包含小写，那就是它。我也会解决它。

CKEDITOR.config.toolbar = [{
    name: 'paragraph',
    groups:['list', 'indent', 'blocks', 'align', 'bidi'],
    items: ['More']
}];

CKEDITOR.replace(editorName, {
    on: {
        pluginsLoaded: function () {
            var editor = this,
                items = {}, groupName = 'Justify_Group',
                config = CKEDITOR.config;
            var more_Group = 'More_Group';
            editor.addMenuGroup(more_Group);
            var moreButtons = {
                subscript: 'Sub Script',
                superscript: 'Super Script',
                numberedlist: 'Numbered List',
                bulletedlist: 'Bullet List',
                outdent: 'Outdent',
                indent: 'Indent',
                blockquote: 'Blockquote',
                removeFormat: 'Remove Format'
            }, moreItems = {};
            for (var i in moreButtons) {
                var v = moreButtons[i];
                moreItems[i.toLowerCase()] = {
                    label: v,
                    group: more_Group,
                    command: i,
                    order: 1
                };
            }

            editor.addMenuItems( moreItems );

            editor.ui.add('More', CKEDITOR.UI_MENUBUTTON, {
                label: 'More',
                name: 'More',
                modes: {
                    wysiwyg: 1
                },
                onMenu: function () {
                    var active = {};
                    for (var p in moreItems)
                    active[p] = null
                    return active;
                }
            });
        }
    }
});

什么可以变得奇怪？

您需要注意默认菜单实现不会显示相关命令状态等于CKEDITOR.TRISTATE_OFF的菜单项。

您可以随时通过评估editor.commands.bold.state !== CKEDITOR.TRISTATE_DISABLED来检查此情况。

您可以通过传递将调用您的命令的onClick回调来解决此问题，而不是将command作为字符串提供，但是您还需要手动关注命令状态。在language plugin中使用了类似的技巧。进一步的解释超出了这个问题的范围。