Format

popups.format #

Type: Array

Default: array

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

['text', 'h1', 'h2', 'h3', 'h4', 'quote', 'bulletlist', 'numberedlist', 'todo']

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

• h5
• h6
• address

Redactor('#entry', {
    popups: {
        format: ['text', 'h1', 'h2', 'h3', 'bulletlist', 'numberedlist', 'address']
    }
});

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

Redactor('#entry', {
    popups: {
        format: ['text', 'h3', 'h4', 'address']
    }
});

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

Redactor('#entry', {
    popups: {
        format: ['text', 'bulletlist', 'numberedlist', 'h1', 'h2', 'h3']
    }
});

formatItems #

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:

Redactor('#entry', {
    formatItems: {
       "lead": {
           title: '<span style="font-size: 20px">Lead</span>',
           type: 'text',
           params: {
               tag: 'p',
               classname: 'lead'
           }
       },
       "small": {
           title: '<span style="font-size: 14px">Small</span>',
           type: 'text',
           params: {
               tag: 'p',
               classname: 'small'
           }
       },
       "note": {
           title: '<span style="padding: 6px 8px; background-color: #FEF2C3; color: #645F4A;">Note</span>',
           type: 'text',
           params: {
               tag: 'p',
               classname: 'note'
           }
       },
       "redheading": {
           title: '<span style="color: #F93943; font-weight: bold; font-size: 16px;">Red Heading</span>',
           type: 'heading',
           params: {
               tag: 'h2',
               style: {
                   color: '#F93943',
                   fontStyle: 'italic',
                   fontFamily: "'Times New Roman', serif"
               },
               attrs: {
                   'data-set': true
               }
           }
       }
    }
});

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:

See the work example for more details.