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.

ArticleEditor.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="far 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.

ArticleEditor.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="far 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.

ArticleEditor.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="far 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.

ArticleEditor.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="far 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:

ArticleEditor.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="far 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:

ArticleEditor.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="far 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.

ArticleEditor.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="far 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.

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.

ArticleEditor.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="far 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:

ArticleEditor.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="far 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.

ArticleEditor.add('plugin', 'myplugin', {
    start: function() {
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<i class="far 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();