Dropdown

create#

Arguments:

• name String
• params Object

Here's an example of how to create a dropdown.

Redactor.add('plugin', 'myplugin', {
    start() {
        let button = {
            title: 'My button',
            icon: '<svg...>',
            command: 'myplugin.popup',
            position: {
                after: 'format'
            },
            blocks: {
                all: 'editable'
            }
        };

        this.app.toolbar.add('myplugin', button);
        this.app.context.add('myplugin', button);
    },
    popup(e, button) {
        let items = {
            item1: { title: 'Item 1', command: 'myplugin.set' },
            item2: { title: 'Item 2', command: 'myplugin.set' },
        };

        // create dropdown
        this.app.dropdown.create('myplugin', { items: items });
        this.app.dropdown.open(e, button);
    },
    set(params, item, name) {
        ...
    }
});

Here's how you can add an optional title for a dropdown:

this.app.dropdown.create('myplugin', { title: 'My Dropdown', items: items });

close#

Closes the opened dropdown.

this.app.dropdown.close();

isOpen#

Checks if a dropdown is opened.

if (this.app.dropdown.isOpen()) {
    ...
}

getName#

Returns a name of the opened dropdown.

let name = this.app.dropdown.getName();

form#

The Form class dynamically generates forms using modular UI components (called tools). It supports localization, automatic value binding, setter API callbacks, and DOM rendering.

const form = this.app.create('form', {
    data: { name: 'John', age: 25 }, // optional
    items: {
        name: { type: 'input', label: 'Name' },
        age: { type: 'number', label: 'Age' },
        remember: { type: 'checkbox', text: 'Remember me' },
        save: { type: 'button', text: 'Save', command: 'myplugin.saveUser' }
    },
    setter: 'myplugin.setData', // optional
    getter: 'myplugin.getData' // optional
});

Once you have created the form, you can set it in the dropdown:

this.app.dropdown.create('mydropdown', { width: '280px', focus: 'name', form });
this.app.dropdown.open(e, button);

Parameters

Methods

Tool Components

Text Field

{ type: 'input', label: 'Email', placeholder: '[email protected]' }

Multiline Text

{ type: 'textarea', label: 'Message', rows: 5 }

Numeric Input

{ type: 'number', label: 'Age' }

Checkbox

{ type: 'checkbox', text: 'Subscribe to newsletter' }

Select

{
  type: 'select',
  label: 'Language',
  options: {
    en: 'English',
    fi: 'Finnish',
    sv: 'Swedish'
  }
}

Button

{
  type: 'button',
  text: 'Submit',
  command: 'submitForm',
  role: 'primary'
}

{
  type: 'button',
  text: 'Cancel',
  dismiss: true
}

Color Picker

{ type: 'color', label: 'Background' }

Flex

This group allows you to combine fields or buttons into a flex container.

// Flex buttons
const form = this.app.create('form', {
    items: {
        embed: { type: 'input', label: 'Embedded video' },
        type: { type: 'select', label: 'Type' },
        flex: {
            insert: { type: 'button', text: 'Insert', command: 'myplugin.create', role: 'primary' },
            cancel: { type: 'button', text: 'Cancel', dismiss: true }
        }
    }
});

// Flex checkbox + button
const form = this.app.create('form', {
    data,
    items: {
        url: { type: 'input', placeholder: 'URL' },
        text: { type: 'input', placeholder: 'Text' },
        flex: {
            target: { type: 'checkbox', text: 'Open in the new tab', auto: true },
            insert: { type: 'button', text: 'Insert', command: 'myplugin.insert', role: 'primary' }
        }
    }
});

You can create three flex containers by specifying the keys: flex, flex2, and flex3.