Format styles

This example shows how to add style items in format popup. See the formatAdd setting description for more details.

Click on any text block and choose style from the Format dropdown on the toolbar.

Code

<!DOCTYPE html>
<html>
<head>
    <title>Redactor X</title>
    <meta charset="utf-8">

    <!-- css -->
    <link rel="stylesheet" href="/your-dist-path/redactorx.min.css" />
</head>
<body>
    <!-- element -->
    <textarea id="entry">...</textarea>

    <!-- js -->
    <script src="/your-dist-path/redactorx.min.js"></script>

    <!-- format styles -->
    <style>
    .rx-content .note {
        background-color: #FEF2C3;
        color: #645F4A;
        padding: 24px 28px;
    }
    .rx-content .red-heading {
        color: #F93943;
    }
    </style>

    <!-- call -->
    <script>
    RedactorX('#entry', {
        formatAdd: {
            "note": {
                title: '<span style="padding: 6px 8px; background-color: #FEF2C3; color: #645F4A;">Note</span>',
                type: 'paragraph',
                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',
                    classname: 'red-heading'
                }
            }
        }
    });
    </script>
</body>
</html>