Menu
API
Documentation

Popup

create

Arguments
name String
params Object

Creates a popup with the specified name and parameters.

this.app.popup.create('mypopup', params);

params

title

An optional parameter that will show the popup title.

this.app.popup.create('mypopup', {
    title: 'My Popup'
});

width

An optional parameter that will set the popup width. By default, popup will be 240px width.

this.app.popup.create('mypopup', {
    width: '400px'
});

A 100% value will make popup the full width of the editor.

this.app.popup.create('mypopup', {
    width: '100%'
});

form

Creates a form in popup with the specified fields.

this.app.popup.create('mypopup', {
    form: {
        'item1': { label: 'My Item 1', type: 'input' },
        'item2': { label: 'My Item 2', type: 'textarea' }
    }
});

See the description of form creation below for more details about inputs.

getter

Sets a method that returns data for form fields.

this.app.popup.create('mypopup', {
    getter: 'myplugin.getData',
    form: {
        'item1': { label: 'My Item 1', type: 'input' },
        'item2': { label: 'My Item 2', type: 'textarea' }
    }
});

Here is an example of a plugin that shows how to set data into a form using getter method.

RedactorX.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="fa fa-file-alt"></i>',
            command: 'myplugin.toggle'
        });
    },
    toggle: function(params, button) {
        this.app.popup.create('mypopup', {
            width: '400px',
            getter: 'myplugin.getData',
            form: {
                'item1': { label: 'My Item 1', type: 'input' },
                'item2': { label: 'My Item 2', type: 'textarea' },
            }
        });

        this.app.popup.open({ button: button });
    },
    getData: function() {
        return {
            item1: 'Value1',
            item2: 'Value2'
        };
    }
});

setter

Sets the method that is called each time the form fields are changed.

this.app.popup.create('mypopup', {
    getter: 'myplugin.getData',
    setter: 'myplugin.setData',
    form: {
        'item1': { label: 'My Item 1', type: 'input' },
        'item2': { label: 'My Item 2', type: 'textarea' }
    }
});

Here is an example of a plugin that shows how to get data from a form using setter method.

RedactorX.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="fa fa-file-alt"></i>',
            command: 'myplugin.toggle'
        });
    },
    toggle: function(params, button) {
        this.app.popup.create('mypopup', {
            width: '400px',
            setter: 'myplugin.setData',
            getter: 'myplugin.getData',
            form: {
                'item1': { label: 'My Item 1', type: 'input' },
                'item2': { label: 'My Item 2', type: 'textarea' },
            }
        });

        this.app.popup.open({ button: button });
    },
    getData: function() {
        return {
            item1: 'Value1',
            item2: 'Value2'
        };
    },
    setData: function(popup) {
        var data = popup.getData();
    }
});

items

Creates popup as a dropdown list with the specified items.

this.app.popup.create('mypopup', {
    items: {
        'item1': { title: 'My Item 1', command: 'myplugin.set' },
        'item2': { title: 'My Item 2', command: 'myplugin.set' },
    }
});

Here's an example of a plugin that shows how items work.

RedactorX.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="fa fa-file-alt"></i>',
            command: 'myplugin.toggle'
        });
    },
    toggle: function(params, button) {
        this.app.popup.create('mypopup', {
            items: {
                'item1': {
                    title: 'My Item 1',
                    command: 'myplugin.set'
                },
                'item2': {
                    title: 'My Item 2',
                    command: 'myplugin.set'
                }
            }
        });

        this.app.popup.open({ button: button });
    },
    set: function(params, itemInstance, itemName) {
        cosole.log(itemName);
    }
});

See the description of items creation below for more details.

footer

Creates buttons at the bottom of the popup.

this.app.popup.create('mypopup', {
    width: '400px',
    getter: 'myplugin.getData',
    form: {
        'item1': { label: 'My Item 1', type: 'input' },
        'item2': { label: 'My Item 2', type: 'textarea' }
    },
    footer: {
        save: {
            title: 'Save',
            command: 'myplugin.save',
            type: 'primary'
        },
        cancel: {
            title: 'Cancel',
            command: 'popup.close'
        }
    }
});

Here is an example of a plugin that shows how the footer buttons work.

RedactorX.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="fa fa-file-alt"></i>',
            command: 'myplugin.toggle'
        });
    },
    toggle: function(params, button) {
        this.app.popup.create('mypopup', {
            width: '400px',
            form: {
                'item1': { label: 'My Item 1', type: 'input' },
                'item2': { label: 'My Item 2', type: 'textarea' }
            },
            footer: {
                save: {
                    title: 'Save',
                    command: 'myplugin.save',
                    type: 'primary'
                },
                cancel: {
                    title: 'Cancel',
                    command: 'popup.close'
                }
            }
        });

        this.app.popup.open({ button: button });
    },
    save: function(popup, buttonName, e) {
        var data = popup.getData();
    }
});

See the description of footer creation below for more details.

create form

The form created in popup allows to edit or manage properties of blocks, content and any other data.

this.app.popup.create('mypopup', {
    form: {
        'item1': { label: 'My Item 1', type: 'input' },
        'item2': { label: 'My Item 2', type: 'textarea' }
    }
});

When creating a form, the following types of inputs are available:

  • input
  • number
  • textarea
  • select
  • checkbox

The form field can have such parameters:

  • type (required)
  • label (optional)
  • placeholder (optional)
  • classname (optional)
  • width (optional)
  • rows (for textarea only)
  • text (for checkbox only)
  • options (for select only)

Here is an example of a form created with all types of fields:

this.app.popup.create('mypopup', {
    form: {
        'item1': {
            type: 'input',
            label: 'Input'
        },
        'item2': {
            type: 'number',
            label: 'Number'
        },
        'item3': {
            type: 'textarea',
            label: 'Textarea'
        },
        'item4': {
            type: 'select',
            label: 'Select',
            options: {
                opt1: 'Option 1',
                opt2: 'Option 2',
                opt3: 'Option 3'
            }
        },
        'item5': {
            type: 'checkbox',
            text: 'Checkbox'
        }
    }
});

set form data

You can set data in the form in two ways.

Using the getter popup method:

RedactorX.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="fa fa-file-alt"></i>',
            command: 'myplugin.toggle'
        });
    },
    toggle: function(params, button) {
        this.app.popup.create('mypopup', {
            width: '400px',
            getter: 'myplugin.getData',
            form: {
                'item1': { label: 'My Item 1', type: 'input' },
                'item2': { label: 'My Item 2', type: 'textarea' },
            }
        });

        this.app.popup.open({ button: button });
    },
    getData: function() {
        return {
            item1: 'Value1',
            item2: 'Value2'
        };
    }
});

Getting the field by name and setting the data manually:

RedactorX.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="fa fa-file-alt"></i>',
            command: 'myplugin.toggle'
        });
    },
    toggle: function(params, button) {
        var popup = this.app.popup.create('mypopup', {
            width: '400px',
            form: {
                'item1': { label: 'My Item 1', type: 'input' },
                'item2': { label: 'My Item 2', type: 'textarea' },
            }
        });

        // get input
        var $input = popup.getInput('item1');

        // set data
        $input.val('My value');

        // open popup
        this.app.popup.open({ button: button });
    }
});

create items

In popup, you can create a dropdown list where each item will have a command.

this.app.popup.create('mypopup', {
    items: {
        'item1': { title: 'My Item 1', command: 'myplugin.set' },
        'item2': { title: 'My Item 2', command: 'myplugin.set' },
    }
});

The item may have the following parameters:

  • title (title of item, required param)
  • active (highlights an item if true)
  • divider (creates a line at the top or bottom)
  • params (data object that will be passed on with the command argument)
  • command (method will be triggered by clicking on the item)

Here's an example of a plugin that shows how items work.

RedactorX.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="fa fa-file-alt"></i>',
            command: 'myplugin.toggle'
        });
    },
    toggle: function(params, button) {
        this.app.popup.create('mypopup', {
            items: {
                'item1': {
                    title: 'My Item 1',
                    params: {
                        arg1: 1,
                        arg2: 2
                    },
                    command: 'myplugin.set'
                },
                'item2': {
                    title: 'My Item 2',
                    params: {
                        arg3: 3,
                        arg4: 4
                    },
                    command: 'myplugin.set'
                }
            }
        });

        this.app.popup.open({ button: button });
    },
    set: function(params, itemInstance, itemName) {
        cosole.log(params);
    }
});

create html

In popup, you can create a custom html.

// create
var popup = this.app.popup.create('mypopup', {
    title: 'My popup',
    width: '400px'
});

// popup body
var $body = popup.getBody();

// item
var $div = this.dom('<div>');

// append
$body.append($div);

// open
this.app.popup.open();

See the sample plugin with custom popup.

create footer

If popup is created with a form or with custom html, you can add control buttons at the bottom of popup.

this.app.popup.create('mypopup', {
    width: '400px',
    form: {
        'item1': { label: 'My Item 1', type: 'input' },
        'item2': { label: 'My Item 2', type: 'textarea' }
    },
    footer: {
        save: {
            title: 'Save',
            command: 'myplugin.save',
            type: 'primary'
        },
        cancel: {
            title: 'Cancel',
            command: 'popup.close'
        }
    }
});

The buttons have the following parameters:

  • title
  • type (none, primary, danger)
  • fullwidth (if true, makes a 100% width popup button)
  • command (method will be triggered by clicking on the button)

When you click on the button, the specified command is called, where you can close the popup and get the form data.

RedactorX.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="fa fa-file-alt"></i>',
            command: 'myplugin.toggle'
        });
    },
    toggle: function(params, button) {
        this.app.popup.create('mypopup', {
            width: '400px',
            form: {
                'item1': { label: 'My Item 1', type: 'input' },
                'item2': { label: 'My Item 2', type: 'textarea' }
            },
            footer: {
                save: {
                    title: 'Save',
                    command: 'myplugin.save',
                    type: 'primary'
                },
                cancel: {
                    title: 'Cancel',
                    command: 'popup.close'
                }
            }
        });

        this.app.popup.open({ button: button });
    },
    save: function(popup, buttonName, e) {
        // close popup
        this.app.popup.close();

        // get form data
        var data = popup.getData();
    }
});

open

Arguments
params (optional) Object

Opens popup as a modal window, without being bound to button coordinates.

this.app.popup.open();

Opens a popup bound to the coordinates of a specified button.

this.app.popup.open({ button: button });

Here's an example of a plugin that shows how it works:

RedactorX.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="fa fa-file-alt"></i>',
            command: 'myplugin.toggle'
        });
    },
    toggle: function(params, button) {
        this.app.popup.create('mypopup', {
            items: {
                'item1': { title: 'My Item 1', command: 'myplugin.set' },
                'item2': { title: 'My Item 2', command: 'myplugin.set' }
            }
        });

        this.app.popup.open({ button: button });
    },
    set: function(params, itemInstance, itemName) {
        console.log(itemName)
    }
});

When opening popup, you can specify the form field in which the focus should be set.

RedactorX.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="fa fa-file-alt"></i>',
            command: 'myplugin.toggle'
        });
    },
    toggle: function(params, button) {
        this.app.popup.create('mypopup', {
            width: '400px',
            form: {
                'item1': { label: 'My Item 1', type: 'input' },
                'item2': { label: 'My Item 2', type: 'textarea' }
            }
        });

        this.app.popup.open({ button: button, focus: 'item1' });
    }
});

close

Hides the shown popup.

this.app.popup.close();

isOpen

Checks if any popup is open.

var is = this.app.popup.isOpen();

updatePosition

Updates the popup position if, for example, you have changed its size or added content to it manually.

this.app.popup.updatePosition();