CKEditor Ecosystem Documentation
Search
Report an issue
Home/CKEditor 5/API
Class

WidgetToolbarRepository (widget)

@ckeditor/ckeditor5-widget/src/widgettoolbarrepository

class

Widget toolbar repository plugin. A central point for registering widget toolbars. This plugin handles the whole toolbar rendering process and exposes a concise API.

To add a toolbar for your widget use the WidgetToolbarRepository#register() method.

The following example comes from the ImageToolbar plugin:

class ImageToolbar extends Plugin {
    static get requires() {
        return [ WidgetToolbarRepository ];
    }

    afterInit() {
        const editor = this.editor;
        const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );

        widgetToolbarRepository.register( 'image', {
            items: editor.config.get( 'image.toolbar' ),
            visibleWhen: viewSelection => isImageWidgetSelected( viewSelection )
        } );
    }
}

Filtering

Properties

  • _toolbars : Map.<string, Object>

    protected

    A map of toolbars.

  • _balloon

    private

Static properties

  • pluginName

    static

  • requires

    static

Methods

  • init()

  • register( toolbarId, options = { options.items, options.visibleWhen, [options.balloonClassName] } )

    Registers toolbar in the WidgetToolbarRepository. It renders it in the ContextualBalloon based on the value of the invoked visibleWhen function. Toolbar items are gathered from items array. The balloon's CSS class is by default ck-toolbar-container and may be override with the balloonClassName option.

    Note: This method should be called in the Plugin#afterInit() callback (or later) to make sure that the given toolbar items were already registered by other plugins.

    Parameters

    toolbarId : String

    An id for the toolbar. Used to

    options : Object
    Properties
    options.items : Array.<String>

    Array of toolbar items.

    options.visibleWhen : function

    Callback which specifies when the toolbar should be visible for the widget.

    [ options.balloonClassName ] : String

    CSS class for the widget balloon.

    Defaults to 'ck-toolbar-container'

  • _hideToolbar( toolbar )

    private

    Hides the given toolbar.

    Parameters

    toolbar : Object

  • _isToolbarVisible( toolbar )

    private

    Parameters

    toolbar : Object

  • _showToolbar( toolbar )

    private

    Shows up the toolbar if the toolbar is not visible and repositions the toolbar's balloon when toolbar's view is the most top view in balloon stack.

    It might happen here that the toolbar's view is under another view. Then do nothing as the other toolbar view should be still visible after the event-update.

    Parameters

    toolbar : Object

  • _updateToolbarsVisibility()

    private

    Iterates over stored toolbars and makes them visible or hidden.