Add formatting tags

This example shows how to add custom items to the formatting dropdown.

    Demo

    Code

    <!-- 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>