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>

    readonly

    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.

    See source

    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 : Object.<String, String>

    readonly

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

    See source

    See icon to learn more.

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

  • DEFAULT_OPTIONS : Object.<String, ImageStyleOptionDefinition>

    readonly

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

    See source

    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.

Functions

  • getDefaultDropdownDefinitions( pluginCollection ) → Array.<ImageStyleDropdownDefinition>

    protected

    Returns a list of the available predefined drop-downs' definitions depending on the loaded image editing plugins.

    See source

    Parameters

    pluginCollection : PluginCollection

    Returns

    Array.<ImageStyleDropdownDefinition>

  • getDefaultStylesConfiguration( isInlinePluginLoaded, isBlockPluginLoaded ) → Object.<String, Array>

    protected

    Returns the default image styles configuration depending on the loaded image editing plugins.

    See source

    Parameters

    isInlinePluginLoaded : Boolean

    Determines whether the ImageBlockEditing plugin has been loaded.

    isBlockPluginLoaded : Boolean

    Determines whether the ImageInlineEditing plugin has been loaded.

    Returns

    Object.<String, Array>

    It returns an object with the lists of the image style options and groups defined as strings related to the default options

  • normalizeStyles( config = { config.isInlinePluginLoaded, config.isBlockPluginLoaded, config.configuredStyles } ) → ImageStyleConfig

    protected

    Returns a list of the normalized and validated image style options.

    See source

    Parameters

    config : Object
    Properties
    config.isInlinePluginLoaded : Boolean

    Determines whether the ImageBlockEditing plugin has been loaded.

    config.isBlockPluginLoaded : Boolean

    Determines whether the ImageInlineEditing plugin has been loaded.

    config.configuredStyles : ImageStyleConfig

    The image styles configuration provided in the image styles configuration as a default or custom value.

    Returns

    ImageStyleConfig
    • Each of options contains a complete icon markup.
    • The image style options not supported by any of the loaded plugins are filtered out.