Contribute to this guide

guideStyles

The Style feature lets the user apply pre-configured styles to existing elements in the editor content.

Under the hood, every style applies one or more HTML classes to such an element which, depending on your integration requirements, can be used to either control the visual styles of that element or apply additional semantics.

# Demo

Use the demo below to test the styles feature. Select a passage or a header and try applying various styles to content.

Configuration of the above demo

See the Configuration section to learn more about the configuration format.

The editor configuration:

// ...
style: {
    definitions: [
        {
            name: 'Article category',
            element: 'h3',
            classes: [ 'category' ]
        },
        {
            name: 'Title',
            element: 'h2',
            classes: [ 'document-title' ]
        },
        {
            name: 'Subtitle',
            element: 'h3',
            classes: [ 'document-subtitle' ]
        },
        {
            name: 'Info box',
            element: 'p',
            classes: [ 'info-box' ]
        },
        {
            name: 'Side quote',
            element: 'blockquote',
            classes: [ 'side-quote' ]
        },
        {
            name: 'Marker',
            element: 'span',
            classes: [ 'marker' ]
        },
        {
            name: 'Spoiler',
            element: 'span',
            classes: [ 'spoiler' ]
        },
        {
            name: 'Code (dark)',
            element: 'pre',
            classes: [ 'fancy-code', 'fancy-code-dark' ]
        },
        {
            name: 'Code (bright)',
            element: 'pre',
            classes: [ 'fancy-code', 'fancy-code-bright' ]
        }
    ]
},
// ...

The stylesheet:

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');

.ck.ck-content {
    font-family: 'PT Serif', serif;
    font-size: 16px;
    line-height: 1.6;
    padding: 2em;
}

.ck-content .ck-horizontal-line {
    margin-bottom: 1em;
}

.ck.ck-content hr {
    width: 100px;
    border-top: 1px solid #aaa;
    height: 1px;
    margin: 1em auto;
}

.ck.ck-content h3.category {
    font-family: 'Bebas Neue';
    font-size: 20px;
    font-weight: bold;
    color: #d1d1d1;
    letter-spacing: 10px;
    margin: 0;
    padding: 0;
}

.ck.ck-content h2.document-title {
    font-family: 'Bebas Neue';
    font-size: 50px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    border: 0;
}

.ck.ck-content h3.document-subtitle {
    font-size: 20px;
    color: #e91e63;
    margin: 0 0 1em;
    font-weight: normal;
    padding: 0;
}

.ck.ck-content p.info-box {
    --background-size: 30px;
    --background-color: #e91e63;
    padding: 1.2em 2em;
    border: 1px solid var(--background-color);
    background: linear-gradient(135deg, var(--background-color) 0%, var(--background-color) var(--background-size), transparent var(--background-size)), linear-gradient(135deg, transparent calc(100% - var(--background-size)), var(--background-color) calc(100% - var(--background-size)), var(--background-color));
    border-radius: 10px;
    margin: 1.5em 2em;
    box-shadow: 5px 5px 0 #ffe6ef;
}

.ck.ck-content blockquote.side-quote {
    font-family: 'Bebas Neue';
    font-style: normal;
    float: right;
    width: 35%;
    position: relative;
    border: 0;
    overflow: visible;
    z-index: 1;
    margin-left: 1em;
}

.ck.ck-content blockquote.side-quote::before {
    content: "“";
    position: absolute;
    top: -37px;
    left: -10px;
    display: block;
    font-size: 200px;
    color: #e7e7e7;
    z-index: -1;
    line-height: 1;
}

.ck.ck-content blockquote.side-quote p {
    font-size: 2em;
    line-height: 1;
}

.ck.ck-content blockquote.side-quote p:last-child:not(:first-child) {
    font-size: 1.3em;
    text-align: right;
    color: #555;
}

.ck.ck-content span.marker {
    background: yellow;
}

.ck.ck-content span.spoiler {
    background: #000;
    color: #000;
}

.ck.ck-content span.spoiler:hover {
    background: #000;
    color: #fff;
}

.ck.ck-content pre.fancy-code {
    border: 0;
    margin-left: 2em;
    margin-right: 2em;
    border-radius: 10px;
}

.ck.ck-content pre.fancy-code::before {
    content: "";
    display: block;
    height: 13px;
    background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
    margin-bottom: 8px;
    background-repeat: no-repeat;
}

.ck.ck-content pre.fancy-code-dark {
    background: #272822;
    color: #fff;
    box-shadow: 5px 5px 0 #0000001f;
}

.ck.ck-content pre.fancy-code-bright {
    background: #dddfe0;
    color: #000;
    box-shadow: 5px 5px 0 #b3b3b3;
}

Check out also these CKEditor 5 features to gain better control over your content style and format:

# Installation

To add this feature to your rich-text editor, install the @ckeditor/ckeditor5-style package:

npm install --save @ckeditor/ckeditor5-style

Then add it to the editor configuration:

import Style from '@ckeditor/ckeditor5-style/src/style';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Style, ... ],
        toolbar: {
            items: [
                // ...
                'style'
            ],
        },
        style: {
            definitions: [
                // ...
            ]
        }
    } )
    .then( ... )
    .catch( ... );

Read more about installing plugins.

# Configuration

Configuring the styles feature takes two steps. First you need to define the styles in the configuration file, for example:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Style, ... ],
        toolbar: {
            items: [
                // ...
                'style'
            ],
        },
        style: {
            definitions: [
                {
                    name: 'Article category',
                    element: 'h3',
                    classes: [ 'category' ]
                },
                {
                    name: 'Info box',
                    element: 'p',
                    classes: [ 'info-box' ]
                },
            ]
        }
    } )
    .then( ... )
    .catch( ... );

Then, corresponding CSS styles need to be defined for the document:

.ck.ck-content h3.category {
    font-family: 'Bebas Neue';
    font-size: 20px;
    font-weight: bold;
    color: #d1d1d1;
    letter-spacing: 10px;
    margin: 0;
    padding: 0;
}

.ck.ck-content p.info-box {
    padding: 1.2em 2em;
    border: 1px solid #e91e63;
    border-left: 10px solid #e91e63;
    border-radius: 5px;
    margin: 1.5em;
}

Note that the editor will automatically distinguish text and block styles and group them in the dropdown.

# Common API

The Style plugin registers:

  • The 'style' command implemented by StyleCommand.
  • The 'style' UI drop-down.

The command can be executed using the editor.execute() method:

// Applies the style to the selected content.
// Executing the command again will remove the style from the selected content.
editor.execute( 'style', 'Article category' );

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-style.