ImageStyleDropdownDefinition
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
Properties
-
defaultItem : stringmodule:image/imageconfig~ImageStyleDropdownDefinition#defaultItemdefaultItem 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>module:image/imageconfig~ImageStyleDropdownDefinition#itemsThe 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 : stringmodule:image/imageconfig~ImageStyleDropdownDefinition#nameThe 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 | undefinedmodule:image/imageconfig~ImageStyleDropdownDefinition#titleThe 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
titleto one oflocalizedDefaultStylesTitleswill automatically translate it to the language of the editor.