Classes

tags #

Type: Object

Default: false

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

Redactor('#entry', {
    classes: {
        tags: {
            'p': 'my-paragraph',
            'h2': 'my-heading my-heading-another-class'
        }
    }
});

Now the specified classes will be added to tags in the content inside the editor and in the output code.

Tags inside the editor have a reset of styles, so to specify them CSS rules, you need to set styles like this:

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

blocks #

Redactor 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. Here are the blocks of content that Redactor has:

• address
• cell (td / th tags)
• embed (iframe or figure tags with embed code)
• figcaption
• heading (h1..h6 tags)
• image (div, figure, or p tags with the image inside)
• line (hr tags)
• list (ul and ol tags)
• listitem (li tags)
• text (p or div tags)
• pre (pre tags or figure with pre tags inside)
• quote (blockquote or figure with blockquote tags inside)
• row (tr tags)
• table
• layout
• column
• wrapper
• noneditable
• todo
• todoitem
• figcaption
• dlist (dl tags)

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.

Redactor('#entry', {
    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:

Redactor('#entry', {
    classes: {
        blocks: {
            'image': 'my-image',
            'heading': 'my-heading'
        },
        tags: {
            'p': 'my-paragraph'
        }
    }
});