Classes

tags

Type: Object

Default: false

This setting allows you to automatically add CSS classes to the specified tags.

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    custom: {
        css: ['/your-article-dist-path/custom-css-with-classes.css']
    },
    classes: {
        'p': 'my-paragraph',
        'h2': 'my-heading my-heading-another-class'
    }
});

In your custom-css-with-classes.css style file or in your style file for all content, specify the rules for these classes, for example:

.my-paragraph {}
.my-heading {}
.my-heading-another-class {}

blocks

Article Editor regards the content as certain blocks. Therefore, you can set up a class not only for individual tags but also for groups of tags that are combined into these blocks. You can find list of all blocks in the documentation page.

Here is how to specify for certain blocks the automatic adding a class when starting the editor, when pasting or inserting content and so on.

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    custom: {
        css: ['/your-article-dist-path/custom-css-with-classes.css']
    },
    classes: {
        blocks: {
            'image': 'my-image',
            'heading': 'my-heading'
        }
    }
});

In this example, all blocks with images and all headers will automatically receive the specified classes.

And here's how to set classes for both blocks and tags at the same time:

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    custom: {
        css: ['/your-article-dist-path/custom-css-with-classes.css']
    },
    classes: {
        blocks: {
            'image': 'my-image',
            'heading': 'my-heading'
        },
        tags: {
            'p': 'my-paragraph'
        }
    }
});