ImageStyleOptionDefinition
The image styling option definition descriptor.
This definition should be implemented in the Image plugin configuration for:
- customizing one of the default styling options by providing the proper name of the default style and the properties that should be overridden,
- or defining a completely custom styling option by providing a custom name and implementing the following properties.
import fullSizeIcon from 'path/to/icon.svg';
const imageStyleOptionDefinition = {
name: 'fullSize',
icon: fullSizeIcon,
title: 'Full size image',
className: 'image-full-size',
modelElements: [ 'imageBlock', 'imageInline' ]
}
The styling option will be registered as the button under the name 'imageStyle:{name}' in the UI components factory (this functionality is provided by the ImageStyleUI plugin).
Properties
className : string | undefinedmodule:image/imageconfig~ImageStyleOptionDefinition#classNameThe CSS class used to represent the style in the view. It should be used only for the non-default styles.
If this property is not defined, its value is inherited from the default styling options addressed in the name property.
icon : stringmodule:image/imageconfig~ImageStyleOptionDefinition#iconOne of the following to be used when creating the styles's button:
- an SVG icon source (as an XML string),
- one of the keys in
DEFAULT_ICONSto use one of default icons provided by the plugin.
If this property is not defined, its value is inherited from the default styling options addressed in the name property.
isDefault : boolean | undefinedmodule:image/imageconfig~ImageStyleOptionDefinition#isDefaultWhen set, the style will be used as the default one for the model elements listed in the
modelElementsproperty. A default style does not apply any CSS class to the view element.If this property is not defined, its value is inherited from the default styling options addressed in the name property.
modelElements : Array<string>module:image/imageconfig~ImageStyleOptionDefinition#modelElementsThe list of the names of the model elements that are supported by the style. The possible values are:
[ 'imageBlock' ]if the style can be applied to the image type introduced by theImageBlockEditingplugin,[ 'imageInline' ]if the style can be applied to the image type introduced by theImageInlineEditingplugin,[ 'imageInline', 'imageBlock' ]if the style can be applied to both image types introduced by the plugins mentioned above.
This property determines which model element names work with the style. If the model element name of the currently selected image is different, upon executing the
imageStylecommand the image type (model element name) will automatically change.If this property is not defined, its value is inherited from the default styling options addressed in the name property.
name : stringmodule:image/imageconfig~ImageStyleOptionDefinition#nameThe unique name of the styling option. It will be used to:
- refer to one of the default styling options or define the custom style,
- store the chosen style in the model by setting the
imageStyleattribute of the model image element, - as a value of the
imageStylecommand, - when registering a button for the style in the following manner: (
'imageStyle:{name}').
title : stringmodule:image/imageconfig~ImageStyleOptionDefinition#titleThe styles's title. Setting
titleto one oflocalizedDefaultStylesTitleswill automatically translate it to the language of the editor.If this property is not defined, its value is inherited from the default styling options addressed in the name property.