Plugin with a dropdown

Code

<div id="entry-plugin-with-dropdown"></div>

const app = Redactor('#entry-plugin-with-dropdown', {
    plugins: ['insertMenu']
});

class InsertMenuPlugin {
    static defaultLang = {
        en: {
            insertMenu: {
                title: 'Insert',
                greeting: 'Greeting',
                quote: 'Quote',
                divider: 'Divider'
            }
        }
    };

    constructor(app) {
        this.app = app;
    }

    start() {
        this.app.toolbar.add('insertMenu', {
            title: '## insertMenu.title ##',
            icon: '<svg ...>',
            command: 'insertMenu.open',
            position: { after: 'add' }
        });
    }

    open(params = {}, { button, el } = {}) {
        const items = {
            greeting: {
                title: '## insertMenu.greeting ##',
                command: 'insertMenu.insert',
                params: { html: '<p>Hello from the plugin dropdown!</p>' }
            },
            quote: {
                title: '## insertMenu.quote ##',
                icon: false,
                command: 'insertMenu.insert',
                params: { html: '<blockquote>A short quote block.</blockquote>' }
            },
            divider: {
                title: '## insertMenu.divider ##',
                command: 'insertMenu.insert',
                params: { html: '<hr>' }
            }
        };

        this.app.dropdown.create('insertMenu', { items });
        this.app.dropdown.open(button || el);
    }

    insert(params = {}) {
        this.app.dropdown.close();

        const html = params.html;
        if (!html) return;

        const inserter = this.app.getService('inserter');
        inserter.insertHtml(html, { caret: 'end' });
    }
}

Redactor.addPlugin('insertMenu', InsertMenuPlugin);