Add control button

This example shows how to add a button to the control bar. 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" />

    <!-- font awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>
<body>
    <!-- element -->
    <textarea id="entry">
        <p>Content</p>
    </textarea>

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

    <!-- call -->
    <script>
    // Create a plugin
    RedactorX.add('plugin', 'myplugin', {
        start: function() {
            this.app.control.add('mybutton', {
                title: 'My Button',
                icon: '<i class="fa fa-superpowers"></i>',
                command: 'myplugin.toggle',
                position: { before: 'duplicate' }
            });
        },
        toggle: function(params, button) {
            alert('Button Toggle');
        }
    });

    // Call with plugin
    RedactorX('#entry', {
        plugins: ['myplugin'],
        context: true,
        control: true,
        toolbar: false
    });
    </script>
</body>
</html>

Usage

In the example, the button is added as HTML, you can also add it as svg:

this.app.control.add('mybutton', {
    title: 'My Button',
    icon: '<svg>...</svg>',
    command: 'myplugin.toggle'
});