Designing a plugin with a modal

This example shows how to create a plugin with modal form. 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) {
        let stack = this.app.create('stack');
        stack.create('myplugin', {
            title: 'My plugin',
            width: '400px',
            form: {
                id: { type: 'input', label: 'ID' }
            },
            footer: {
                save: { title: 'Save', command: 'myplugin.save', type: 'primary' },
                cancel: { title: 'Cancel', command: 'modal.close' }

            }
        });

        // data
        let instance = this.app.block.get();
        let $block = instance.getBlock();
        let id = $block.attr('id');

        stack.setData({ id: id });

        // open
        this.app.modal.open({ name: 'math', stack: stack, focus: 'text', button: button });
    },
    save(stack) {
        this.app.modal.close();

        let data = stack.getData();
        let instance = this.app.block.get();
        let $block = instance.getBlock();

        if (data.id !== '') {
            $block.attr('id', data.id);
        }
        else {
            $block.removeAttr('id');
        }
    }
});

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