Plugins

Style

Download

The Style plugin creates a dropdown list of predefined styles that can be applied to blocks.

Click on a paragraph, video or horizontal line and change their style.

How the plugin works

Styles setting

You can specify styles for each block as a setting when launching the editor or in the code of the plugin itself.

Look at the format of styles setting:

ArticleEditor('#entry', {
    plugins: ['style'],
    styles: {
        paragraph: {
            'lead': {
                title: 'Lead',
                command: 'style.toggle',
                params: { classname: 'lead' }

            },
            'remove': {
                title: '## style.remove-style ##',
                topdivider: true,
                command: 'style.remove'
            }
        },
        embed: {
            'frame': {
                title: 'Frame',
                command: 'style.toggle',
                params: { classname: 'embed-frame' }
            },
            'remove': {
                title: '## style.remove-style ##',
                topdivider: true,
                command: 'style.remove'
            }
        }
    }
});

The keys paragraph and embed indicate for which block the style will be available. Here is the list of all blocks by default.

Title - the name of the style in the dropdown.

Finally, the classname parameter indicates which CSS style will need to be applied for this block.

Styles CSS

Here is an example of CSS styles:

/* paragraph */
.arx-content p.lead {
    font-size: 24px;
    color: #444;
}

/* embed */
.arx-content .embed-frame {
    border: 20px solid #111;
}

Always specify the parent style as .arx-content - this is the editor's content class.

Do not forget to connect the styles for the plugin, after the CSS of the editor.