CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Interface

StyleConfig (style)

@ckeditor/ckeditor5-style/src/styleconfig

interface
See source

The configuration of the style feature.

ClassicEditor
  .create( {
    style: ... // Style feature config.
  } )
  .then( ... )
  .catch( ... );

See all editor options.

Filtering

Properties

  • definitions : Array<StyleDefinition> | undefined

    See source

    The available style definitions.

    Style definitions are displayed in the 'style' UI dropdown and get applied by the style command to the content of the document.

    In the 'style' UI dropdown, definitions are automatically grouped into two categories based on the of the element property:

    • Block styles: Can be applied to entire block elements only (e.g. headings, paragraphs, divs).
    • Text styles: Can by applied to any text in any element in the document.

    An example configuration:

    [
  // Definitions of block styles.
  {
    name: 'Red heading',
    element: 'h2',
    classes: [ 'red-heading' ]
  },
  {
    name: 'Vibrant code',
    element: 'pre',
    classes: [ 'vibrant-code' ]
  },

  // Definitions of text (inline) styles.
  {
    name: 'Marker',
    element: 'span',
    classes: [ 'marker' ]
  },

  // ...
]

    Note: Configuring style definitions will automatically configure the General HTML Support feature. You do not need to repeat the configuration in GeneralHtmlSupportConfig.