Sample plugin with modal window

This example shows how to create a plugin with a modal window.

    Demo

    Code

    <!--element -->
    <textarea id="content"></textarea>
    
    <!-- plugin code -->
    <script>
    (function($R)
    {
        $R.add('plugin', 'myplugin', {
            modals: {
                'myplugin': '<form action="">'
                    + '<div class="form-item">'
                        + '<label>## myplugin-label ##</label>'
                        + '<textarea name="text" style="height: 200px;"></textarea>'
                    + '</div>'
                + '</form>'
            },
            translations: {
                en: {
                    "myplugin": "My Plugin",
                    "myplugin-label": "Please, type some text"
                }
            },
            init: function(app)
            {
                // define app
                this.app = app;
    
                // define services
                this.lang = app.lang;
                this.toolbar = app.toolbar;
                this.insertion = app.insertion;
            },
    
            // messages
            onmodal: {
                myplugin: {
                    opened: function($modal, $form)
                    {
                        $form.getField('text').focus();
                    },
                    insert: function($modal, $form)
                    {
                        var data = $form.getData();
                        this._insert(data);
                    }
                }
            },
    
            // public
            start: function()
            {
                // create the button data
                var buttonData = {
                    title: this.lang.get('myplugin'),
                    api: 'plugin.myplugin.open'
                };
    
                // create the button
                var $button = this.toolbar.addButton('myplugin', buttonData);
            },
            open: function()
            {
                var options = {
                    title: this.lang.get('myplugin'),
                    width: '600px',
                    name: 'myplugin',
                    handle: 'insert',
                    commands: {
                        insert: { title: this.lang.get('insert') },
                        cancel: { title: this.lang.get('cancel') }
                    }
                };
    
                this.app.api('module.modal.build', options);
            },
    
            // private
            _insert: function(data)
            {
                this.app.api('module.modal.close');
    
                if (data.text.trim() === '') return;
    
                this.insertion.insertText(data.text);
            }
        });
    })(Redactor);
    </script>
    
    <!-- call -->
    <script>
    $R('#content', { plugins: ['myplugin'] });
    </script>