Add formatting tags

<!-- element -->
<textarea id="content"></textarea>

<!-- add style to dropdown -->
<style>
.redactor-dropdown-format .redactor-dropdown-item-red-p-add {
    color: red;
    font-weight: bold;
}
.redactor-dropdown-format .redactor-dropdown-item-blue-heading {
    color: blue;
    font-weight: bold;
}
</style>

<!-- add style to content -->
<style>
.redactor-styles .red-styled {
    color: red;
    font-weight: bold;
}
.redactor-styles h3.blue-styled {
    color: blue;
    font-weight: bold;
}
</style>

<!-- call -->
<script>
$R('#content', {
    formattingAdd: {
        "red-p-add": {
            title: 'Red Paragraph',
            api: 'module.block.format',
            args: {
                'tag': 'p',
                'class': 'red-styled'
            }
        },
        "red-p-remove": {
            title: 'Red Paragraph Remove',
            api: 'module.block.format',
            args: {
                'tag': 'p',
                'class': 'red-styled',
                'type': 'remove'
            }
        },
        "blue-heading": {
            title: 'Blue Heading',
            api: 'module.block.format',
            args: {
                'tag': 'h3',
                'class': 'blue-styled',
                'type': 'toggle'
            }
        },
        "toggle-attr": {
            title: 'Toggle attributes and style',
            api: 'module.block.format',
            args: {
                'tag': 'p',
                'attr': {
                    'data-toggle': 'modal',
                    'class': 'my-class'
                },
                'style': {
                    'color': '#90c'
                },
                'type': 'toggle'
            }
        }
    }
});
</script>