Developing a plugin with dropdown

This example shows how to create a plugin with dropdown items. See more about how to create plugins.

Code

<!-- element -->
<textarea id="entry">...</textarea>

<!-- call -->
<script>
// plugin code
Redactor.add('plugin', 'myplugin', {
    start() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<svg...>',
            command: 'myplugin.popup'
        });
    },
    popup(e, button) {
        // set items
        let items = {
            item1: {
                title: 'Item 1',
                command: 'myplugin.toggle'
            },
            item2: {
                title: 'Item 2',
                command: 'myplugin.toggle'
            }
        };

        // create dropdown
        let dropdown = this.app.create('dropdown', 'mydropdown', { items: items });

        // open
        this.app.dropdown.open(e, button, dropdown);
    },
    toggle(params, button, name) {
        this.app.dropdown.close();

        alert('Item "' + name + '" is toggled!');
    }
});

let app = Redactor('#entry', {
    plugins: ['myplugin']
});
</script>