CKEditor Ecosystem Documentation
Search
Report an issue
Home/CKEditor 4/API
Class

CKEDITOR.style.definition

class abstract
See source

Abstract class describing the definition of a style.

This virtual class illustrates the properties that developers can use to define and create style definitions.

A style definition object represents a style as a set of properties defining the element structure, its attributes and CSS styles. The CKEDITOR.style based on such definition can be applied to and removed from the selection through various CKEDITOR.style methods.

{
    name: 'Special Title',
    element: 'h1',
    attributes: { class: 'my_class' },
    styles: { color: 'red', 'font-size': '16px', 'font-width': 'bold' }
}

Refer to the Styles guide for more information about how editor content styles are handled.

Filtering

Properties

  • attributes : Object.<String, String>

    See source

    A set of properties specifying attributes of the HTML style element. If the style attribute is present, it will be merged with the existing styles property.

    {
    attributes: {
        style: 'color: red',
        class: 'link'
    }
}

  • element : String

    See source

    An element type that will be applied to the selection when applying a style. It should be a valid HTML element, for example span.

    { element: 'h1' }

  • name : String

    See source

    A unique style definition name. It can be used to differentiate style definitions, like in the Styles Combo plugin drop-down where it represents item labels.

    { name: 'Special title' }

  • styles : Object.<String, String>

    See source

    A set of properties specifying CSS style rules of the HTML style element.

    {
    styles: {
        color: 'red',
        'font-size': '12px'
        'font-weight': 'bold'
    }
}

  • type : String | Number

    See source

    Defines the style type.

    There are three standard style types:

    Each type is related to the element used in the style rule and the types of elements to which a specific style can be applied.

    Plugins may define special style handlers to customize style operations. To use a special style handler, the type property should be set to the name of the style handler, e.g. widget.

    Refer to the Style Types section of the Applying Styles to Editor Content guide for more information about style types.

    { type: CKEDITOR.STYLE_INLINE }

    Defaults to CKEDITOR.STYLE_INLINE