javascript - 自定义 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;
                }
            });
        }
    }
});

但是同样的事情也适用于对齐按钮。在上面的命令列表中，只有项目符号列表显示在下拉列表中，并且 (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中使用了类似的技巧。 。进一步的解释超出了这个问题的范围。