Format

format

Type: Array

Default: array

By default, the following array is set in the formatting popup for blocks tags:

['p', 'h1', 'h2', 'h3', 'ul', 'ol']

You can specify additional tags for popup from the next set:

• h4
• h5
• h6
• address

RedactorX('#entry', {
    format: ['p', 'h1', 'h2', 'h3', 'h4', 'ul', 'ol', 'address']
});

Or take out what's unnecessary and add what's needed:

RedactorX('#entry', {
    format: ['p', 'h3', 'h4', 'address']
});

Of course you can change the order of popup items like this:

RedactorX('#entry', {
    format: ['p', 'ul', 'ol', 'h1', 'h2', 'h3']
});

formatAdd

Type: Object

Default: false

You can add your own styles for some blocks in the Format dropdown. To do this, you need to specify an object in the setting, like this:

RedactorX('#entry', {
    formatAdd: {
       "mystyle": {
            title: 'My Style',
            type: 'paragraph',
            params: {
                tag: 'p',
                classname: 'mystyle'
            }
        }
    }
});

The example above will add a paragraph style item to the Format dropdown that will set the "p" tag with "mystyle" class.

Since all styles are reset inside the editor, you need to specify the CSS for the style to be displayed in the content, for example, like this:

.rx-content .mystyle {
    color: red;
    font-weight: bold;
}

You can specify more than one class:

classname: 'mystyle1 mystyle2'

Inside the "title" you can specify a style for the item that shows visually what the style looks like:

title: '<span style="color: red; font-weight: bold;">My Style</span>'

Styles work for the following types of blocks in the editor:

• paragraph
• heading
• list
• address

And for tags like these:

• p
• h1-h6
• ul/ol
• address

Here's an example for the heading style:

RedactorX('#entry', {
    formatAdd: {
       "mystyle": {
            title: 'My Style',
            type: 'paragraph',
            params: {
                tag: 'p',
                classname: 'mystyle'
            }
        },
        "myheading": {
            title: 'My Heading',
            type: 'heading',
            params: {
                tag: 'h2',
                classname: 'myheading'
            }
        }
    }
});

See the work example for more details.