Account
Menu

Examples

Add block to addbar

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

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>