customizing contextmenu

A couple of questions related to the contextmenu plugin:

(1) How do you add a line separator in between items or groups on the context menu? I notice that the SCAYT plugin does this but I do not see any specialized code in the plugin implementation that seems to indicate it is adding that line explicitly. I assumed perhaps the plugin would automatically add a line separator in between menu groups but even if I have items in separate groups, they are still all mushed together as one list with no separator in between.

(2) Is it possible to style text inside of the menu? For instance, can individual items be bold or italicized? I attempted to insert HTML into the label but it seems like it was stripped out. I don't see any examples of this happening anywhere so I wasn't sure if it just wasnt possible or what.

Thanks!

Fri, 01/16/2015 - 20:04

elennick

Joined: 09/01/2015

Posts: 7

Related to question (1) above

Related to question (1) above, I am noticing that when I add menu items, even if it looks like I am setting up the group properly, all items I add wind up with a group id of "100" which is why they are not getting separators between them. Here is a basic example that doesn't seem to work for me:

        var noSuggestionsCommand = 'noSpellcheckSuggestions';
        var ignoreSuggestionsCommand = 'ignoreSuggestions';

        var noSuggestionsGroup = 'noSuggestionsGroup';
        var ignoreSuggestionsGroup = 'ignoreSuggestionsGroup';

        editor.addCommand(noSuggestionsCommand, { exec: function () {} });
        editor.addMenuItem( 'testItem1',
            {
                label : 'Test Item 1',
                command : noSuggestionsCommand,
                group : noSuggestionsGroup
            });

        editor.addMenuGroup(ignoreSuggestionsGroup);

        editor.addCommand(ignoreSuggestionsCommand, { exec: function () {} });
        editor.addMenuItem( 'testItem2',
            {
                label : 'Test Item 2',
                command : ignoreSuggestionsCommand,
                group : ignoreSuggestionsGroup
            });

        editor.contextMenu.addListener( function( element ) {
            return { testItem1: CKEDITOR.TRISTATE_OFF,
                     testItem2: CKEDITOR.TRISTATE_OFF };
        });

The items I'm adding there explicitly have their own groups but when the items are actually added to the menu, they wind up in the same group with an id of "100". I am able to see the group id by looking through the dev console at what items are contained in the editor.contextmenu.items array. If I use any of the plugin context menu sections (ie: SCAYT or cut/copy/paste) then they look fine. I can even hijack existing groups and it works fine (ie: if I put 'image' as my group name when creating an item then that item winds up in its own group with a separator around it).

Is this a bug with editor.addMenuItem() or am I doing something incorrectly?