CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Interface

ImageStyleOptionDefinition (image)

@ckeditor/ckeditor5-image/src/imageconfig

interface
See source

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).

Filtering

Properties

  • className : string | undefined

    See source

    The 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 : string

    See source

    One 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_ICONS to 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 | undefined

    See source

    When set, the style will be used as the default one for the model elements listed in the modelElements property. 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>

    See source

    The 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 the ImageBlockEditing plugin,
    • [ 'imageInline' ] if the style can be applied to the image type introduced by the ImageInlineEditing plugin,
    • [ '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 imageStyle command 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 : string

    See source

    The 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 imageStyle attribute of the model image element,
    • as a value of the imageStyle command,
    • when registering a button for the style in the following manner: ('imageStyle:{name}').

  • title : string

    See source

    The styles's title. Setting title to one of localizedDefaultStylesTitles will 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.