Sample plugin with modal window

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

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>