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

Custom UI dropdown button not showing up all commands

本文关键字：显示 命令 按钮 UI 自定义      更新时间：2023-09-26

我正在像下面这样将一组命令分组到一个下拉列表中，但所有项目都没有显示在中

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)文本也添加到给定的标签中。

如何解决此问题

您唯一缺少的就是添加正确的菜单项。

它是用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作为字符串提供，但您还需要手动关心命令状态。语言插件中也使用了类似的技巧。进一步的解释超出了这个问题的范围。

相关文章：