Examples

Sample plugin with dropdown

    This example shows how to create a plugin with a dropdown.

    Demo

    Code

    <!--element -->
    <textarea id="content"></textarea>
    
    <!-- plugin code -->
    <script>
    (function($R)
    {
        $R.add('plugin', 'myplugin', {
            translations: {
                en: {
                    "myplugin": "My Plugin"
                }
            },
            init: function(app)
            {
                // define app
                this.app = app;
    
                // define services
                this.lang = app.lang;
                this.toolbar = app.toolbar;
            },
            start: function()
            {
                // create dropdown object
                var dropdownData = {
                    item1: {
                        title: 'My dropdown item 1',
                        api: 'plugin.myplugin.method1'
                    },
                    item2: {
                        title: 'My dropdown item 2',
                        api: 'plugin.myplugin.method2'
                    }
                };
    
                // create the button data
                var buttonData = {
                    title: this.lang.get('myplugin')
                };
    
                // create the button
                var $button = this.toolbar.addButton('myplugin', buttonData);
    
                // set dropdown
                var dropdown = $button.setDropdown(dropdownData);
            },
            method1: function()
            {
                alert('Item 1 is toggled!');
            },
            method2: function()
            {
                alert('Item 2 is toggled!');
            }
        });
    })(Redactor);
    </script>
    
    <!-- call -->
    <script>
    $R('#content', { plugins: ['myplugin'] });
    </script>