NEWCKEditor AI is here! Learn how to supercharge your editor with AI on our webinar.

StyleConfig

interface

The configuration of the style feature.

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

See all editor options.

Properties

definitions : Array<StyleDefinition> | undefined
module:style/styleconfig~StyleConfig#definitions
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' ]
  },

  // ...
]
```
Copy code
Note: Configuring style definitions will automatically configure the General HTML Support feature. You do not need to repeat the configuration in GeneralHtmlSupportConfig.
See source (with github icon)