CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Module

image/imagestyle/utils

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

module

Filtering

Constants

  • DEFAULT_DROPDOWN_DEFINITIONS : Array<ImageStyleDropdownDefinition>

    See source

    Default drop-downs provided by the plugin that can be referred in the toolbar configuration. The drop-downs are containers for the image style options.

    If both of the ImageEditing plugins are loaded, there are 2 predefined drop-downs available:

    • 'imageStyle:wrapText', which contains the alignLeft and alignRight options, that is, those that wraps the text around the image,
    • 'imageStyle:breakText', which contains the alignBlockLeft, alignCenter and alignBlockRight options, that is, those that breaks the text around the image.

  • DEFAULT_ICONS : Record<string, string>

    See source

    Default image style icons provided by the plugin that can be referred in the styles configuration.

    See icon to learn more.

    There are 7 default icons available: 'full', 'left', 'inlineLeft', 'center', 'right', 'inlineRight', and 'inline'.

  • DEFAULT_OPTIONS : Record<string, ImageStyleOptionDefinition>

    See source

    Default image style options provided by the plugin that can be referred in the styles configuration.

    There are available 5 styles focused on formatting:

    • 'alignLeft' aligns the inline or block image to the left and wraps it with the text using the image-style-align-left class,
    • 'alignRight' aligns the inline or block image to the right and wraps it with the text using the image-style-align-right class,
    • 'alignCenter' centers the block image using the image-style-align-center class,
    • 'alignBlockLeft' aligns the block image to the left using the image-style-block-align-left class,
    • 'alignBlockRight' aligns the block image to the right using the image-style-block-align-right class,

    and 3 semantic styles:

    • 'inline' is an inline image without any CSS class,
    • 'block' is a block image without any CSS class,
    • 'side' is a block image styled with the image-style-side CSS class.

  • utils : object

    See source