ImageStyleDropdownDefinition (image)



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
		// 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



  • defaultItem : string

    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>

    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.