Add block to addbar

This example shows how to add a button on the addbar. See more about Button API.

    Demo

    Code

    <!DOCTYPE html>
    <html>
    <head>
        <title>Redactor X</title>
        <meta charset="utf-8">
    
        <!-- css -->
        <link rel="stylesheet" href="/your-dist-path/redactorx.min.css" />
    
        <!-- block css -->
        <style>
        .note {
            padding: 8px 20px;
            background-color: #fffcba;
        }
        .note p {
            font-size: 16px;
            color: #111;
        }
        </style>
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">
            <p>Content</p>
        </textarea>
    
        <!-- js -->
        <script src="/your-dist-path/redactorx.min.js"></script>
    
        <!-- call -->
        <script>
        RedactorX('#entry', {
            addbar: {
                add: {
                    "note": {
                        title: 'Note',
                        position: { after: 'text' },
                        icon: '<svg ...>',
                        template: '<p class="note">...</p>'
                    }
                }
            }
        });
        </script>
    </body>
    </html>