Inline

popups.inline#

Type: Array

Default: array

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

['code', 'underline', 'sup', 'sub', 'highlight', 'removeinline']

You can take out what's unnecessary and add what's needed:

Redactor('#entry', {
    popups: {
        inline: ['code', 'underline', 'removeinline']
    }
});

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

Redactor('#entry', {
    popups: {
        inline: ['highlight', 'code', 'sup', 'sub', 'underline', 'removeinline']
    }
});

inlineItems#

Type: Object

Default: false

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

Redactor('#entry', {
    inlineItems: {
        'color-red': {
            title: '<span style="color: #F93943">Color Red</span>',
            params: {
                tag: 'span',
                style: {
                    color: '#F93943'
                }
            }
        },
        'color-green': {
            title: '<span style="color: #1CAC2B">Color Green</span>',
            params: {
                tag: 'span',
                style: {
                    color: '#1CAC2B'
                }
            }
        },
        'text-24': {
            title: '<span style="font-size: 24px">Class Text 24px</span>',
            params: {
                tag: 'span',
                classname: 'text-24'
            }
        },
        'text-red': {
            title: '<span style="color: #F93943">Class Text Red</span>',
            params: {
                tag: 'span',
                classname: 'text-red'
            }
        },
        'boldmark': {
            title: '<span style="font-weight: 700; color: #ff3265;">Boldmark<span>',
            params: {
                tag: 'span',
                classname: 'boldmark'
            }
        }
    }
});

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 .text-24 {
    font-size: 24px;
}
.rx-content .text-red {
    color: #F93943;
}
.rx-content .boldmark {
    font-weight: 700;
    color: #ff3265;
}

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.