CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Interface

ImageStyleDropdownDefinition (image)

@ckeditor/ckeditor5-image/src/imageconfig

interface
See source

The image style custom drop-down definition descriptor

This definition can be implemented in the image toolbar configuration to define a completely custom drop-down in the image toolbar.

ClassicEditor.create( editorElement, {
	image: { toolbar: [
			// One of the predefined drop-downs
			'imageStyle:wrapText',
		// Custom drop-down
		{
			name: 'imageStyle:customDropdown',
			title: Custom drop-down title,
			items: [ 'imageStyle:alignLeft', 'imageStyle:alignRight' ],
			defaultItem: 'imageStyle:alignLeft'
		}
	] }
} );

Note: At the moment it is possible to populate the custom drop-down with only the buttons registered by the ImageStyle plugin.

The defined drop-down will be registered as the DropdownView with the SplitButtonView under the provided name in the ComponentFactory

Filtering

Properties

  • defaultItem : string

    See source

    defaultItem The name of one of the buttons from the items list, which will be used as a default button for the drop-down's split button.

  • items : Array<string>

    See source

    The list of the names of the buttons that will be placed in the drop-down's toolbar. Each of the buttons has to be one of the default image style buttons or to be defined as the image styling option.

  • name : string

    See source

    The unique name of the drop-down. It is recommended to precede it with the "imageStyle:" prefix to avoid collision with the components' names registered by other plugins.

  • title : string | undefined

    See source

    The drop-down's title. It will be used as the split button label along with the title of the default item in the following manner: "Custom drop-down title: Default item title".

    Setting title to one of localizedDefaultStylesTitles will automatically translate it to the language of the editor.