Create plugin with custom popup

This example shows how to create a plugin with custom html. Click on the content to see the plugin button on the toolbar. See more about how to create plugins.

    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" />
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">
            <p>Content</p>
        </textarea>
    
        <!-- js -->
        <script src="/your-dist-path/redactorx.min.js"></script>
    
    
        <!-- plugin code with fontawesome icon -->
        <script>
        RedactorX.add('plugin', 'myplugin', {
            start: function() {
                this.app.toolbar.add('mybutton', {
                    title: 'My Button',
                    icon: '<i class="fa fa-superpowers"></i>',
                    command: 'myplugin.popup'
                });
            },
            popup: function(params, button) {
                // create
                var popup = this.app.popup.create('myplugin', {
                    title: 'My plugin',
                    width: '400px'
                });
    
                // popup body
                var $body = popup.getBody();
    
                // items
                var $div = this.dom('<div style="display: flex; padding: 0 20px 20px 20px;">');
    
                this._createItem($div, 1);
                this._createItem($div, 2);
                this._createItem($div, 3);
    
                // append
                $body.append($div);
    
                // open
                this.app.popup.open({ button: button });
            },
            save: function(e) {
                e.preventDefault();
                e.stopPropagation();
    
                this.app.popup.close();
    
                var $target = this.dom(e.target);
                var value = $target.html();
    
                alert(value);
            },
    
            // private
            _createItem: function($div, value) {
                var $item = this.dom('<a href="#" style="height: 40px; width: 33%; background: gold; color: #111; padding: 10px; margin-right: 1px;"></a>');
                $item.html(value);
                $item.one('click', this.save.bind(this));
    
                $div.append($item);
            }
        });
        </script>
    
    
        <!-- call -->
        <script>
        RedactorX('#entry', {
            plugins: ['myplugin']
        });
        </script>
    </body>
    </html>