CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Typedef

ImageStyleDropdownDefinition (image/imagestyle)

@ckeditor/ckeditor5-image/src/imagestyle/imagestyleui

typedef
Object
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

    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>

    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

    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

    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.