CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Class

WidgetToolbarRepository (widget)

@ckeditor/ckeditor5-widget/src/widgettoolbarrepository

class
See source

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' ),
			getRelatedElement: getClosestSelectedImageWidget
		} );
	}
}

Filtering

Properties

Methods

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

    Registers toolbar in the WidgetToolbarRepository. It renders it in the ContextualBalloon based on the value of the invoked getRelatedElement 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.

    See source

    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.ariaLabel ] : String

    Label used by assistive technologies to describe this toolbar element.

    options.items : Array.<String>

    Array of toolbar items.

    options.getRelatedElement : function

    Callback which returns an element the toolbar should be attached to.

    [ options.balloonClassName ] : String

    CSS class for the widget balloon.

    Defaults to 'ck-toolbar-container'

  • _hideToolbar( toolbarDefinition )

    private

    Hides the given toolbar.

    See source

    Parameters

    toolbarDefinition : WidgetRepositoryToolbarDefinition

  • _isToolbarInBalloon( toolbar ) → Boolean

    private

    Parameters

    toolbar : Object

    Returns

    Boolean

  • _isToolbarVisible( toolbar ) → Boolean

    private

    Parameters

    toolbar : Object

    Returns

    Boolean

  • _showToolbar( toolbarDefinition, relatedElement )

    private

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

    See source

    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

    toolbarDefinition : WidgetRepositoryToolbarDefinition
    relatedElement : Element

  • _updateToolbarsVisibility()

    private

    Iterates over stored toolbars and makes them visible or hidden.

    See source