How to specify separate toolbar group for widget buttons?

Question

By default CKEditor places widget buttons in the toolbar 'insert' group. I'd like to specify a custom group on the toolbar only for my widget buttons. How can I do that?

Answer 1

In such case you need to register the button yourself so to have a full control over it.

1. In the widget definition do not specify the button property.
2. Add button using the ui.addButton() method. This button should use the widget command which is created automatically based on the widget name.

So it could look like this:

editor.widget.add( 'myWidget', {
    // For the widget command to work you have to
    // specify at least template or insert() callback. 
    template: 'foo',

    ...
} );

editor.ui.addButton( 'MyWidget', {
    label: 'My Widget',
    command: 'myWidget',
    toolbar: 'basicstyles,1'
} )