CKEditor 4.7-对齐组菜单按钮 [英] CKEditor 4.7 - Justify Group Menu Button

问题描述

我正试图在CKEditor中创建一个下拉菜单，以将某些常规按钮工具分组，只是因为我需要压缩工具栏.为此，我正在尝试创建一个证明组按钮菜单，为此，我已经编译了该插件:

i'm trying to create a dropdown menu in CKEditor to group some normal button tool just because i need to compress the toolsbar. For this i'm trying to create, for example, a justify group button menu, for this i have compile this plugin :

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-我无法控制某些一种视觉标记，以显示正在使用的对齐方式(例如工具栏按钮)

• 1 - if i dont call one of the align buttons on the toolbar ('JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock') the button menu does not show any button

• 2 - i'm unable to control some sort of visual mark to show what alignment is in use (like on the toolbar buttons)

更新:我在"onMenu"功能上找到了此问题的解决方案，将 activeItems [prop] = CKEDITOR.TRISTATE_OFF; 替换为 activeItems [prop]= editor.getCommand(items [prop] .command).state;

UPDATE : I found the solution for this problem on the "onMenu" function replacing activeItems[prop] = CKEDITOR.TRISTATE_OFF; with activeItems[prop] = editor.getCommand(items[prop].command).state;

3-我不知道为什么，但是第一个选择总是使用"焦点"，如何设置焦点以匹配特定项目?

3 - i dont know why but the first option is always with "focus", how can I set the focus to match a specific item?

谢谢！

推荐答案

1-导致按钮不显示的问题是ACF.您要在下拉菜单中分组的按钮 需要某些标记/属性才能使用.在最简单的情况下，它要求 text-align 适用于 p .

1 - The problem that is causing buttons not to display is ACF. Buttons that you're grouping in your dropdown requires certain tags/attrs to be available. In the simplest case it requires text-align to be applicable on p.

似乎CKEditor中存在一个错误，该错误使用添加了按钮 editor.addMenuItems 不能正确注册新的ACF规则，而直接将其添加到工具栏中则可以正确注册.

It looks that there's a bug in CKEditor that buttons added using editor.addMenuItems are not registering properly new ACF rules, while they do if added directly to the toolbar.

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

3 - I couldn't find a proper function for that, IMHO it should be doable in onMenu function, however it does not provide enough references to do that. Sounds like a feature request.

通常，您应该看一下 language 插件，因为它有很多您需要的东西，因此它是很好的灵感来源.

Generally you should look at language plugin, as it has many things you are looking for so it's a nice source of inspiration.

为将来参考，请为每种情况创建一个单独的StackOverflow问题.尽管这些问题都已得到解决，但它们是不同的情况.

For future reference, please create separate StackOverflow question for each case. Though these issues were releated, they are a different cases.

这篇关于CKEditor 4.7-对齐组菜单按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！