Customize buttons

Toolbar layout #

There are several toolbars in the editor and for each of them you can change the default layout of the buttons.

toolbar

// default
['add', 'ai-tools', 'html', 'format', 'bold', 'italic', 'deleted', 'moreinline', 'list', 'link', 'image']

// changed
Redactor('#entry', {
    buttons: {
        toolbar: ['add', 'bold', 'italic', 'deleted', 'moreinline', 'link', 'image']
    }
});

extrabar

// default
['hotkeys']

// changed
Redactor('#entry', {
    buttons: {
        extrabar: ['undo', 'redo', 'hotkeys']
    }
});

context

// default
['ai-tools', 'format', 'bold', 'italic', 'deleted', 'moreinline', 'link']

// changed
Redactor('#entry', {
    buttons: {
        context:  ['ai-tools',  'bold', 'italic', 'deleted', 'highlight', 'sub', 'sup', link']
    }
});

• Add buttons example

Dropdown layout #

There are several dropdowns in the editor and for each of them you can change the default layout of the buttons.

addbar

// default
['ai-tools', 'ai-image', 'text', 'heading', 'image', 'todo', 'list', 'embed', 'table', 'quote', 'pre', 'line', 'layout', 'wrapper']

// changed
Redactor('#entry', {
    popups: {
        addbar:  ['ai-tools', 'ai-image', 'text', 'heading', 'image',  'list']
    }
});

control

// default
['add', 'move-up', 'move-down', 'duplicate', 'trash']

// changed
Redactor('#entry', {
    popups: {
        control: ['add', 'duplicate', 'trash']
    }
});

format

// default
['text', 'h1', 'h2', 'h3', 'h4', 'quote', 'bulletlist', 'numberedlist', 'todo']

// changed
Redactor('#entry', {
    popups: {
        format: ['text', 'h1', 'h2', 'h3', 'h4', 'h5']
    }
});

inline

// default
['code', 'underline', 'sup', 'sub', 'highlight', 'removeinline']

// changed
Redactor('#entry', {
    popups: {
        inline: ['code', 'underline', 'removeinline']
    }
});

Add with setting #

Use the corresponding add setting for each toolbar to add a button to it from the default ones in the editor.

let app = Redactor('#entry', {
    toolbar: {
        add: {
            line: true
        }
    }
});

Add with API #

Use the API to add a button in the created plugin.

Redactor.add('plugin', 'myplugin', {
    start() {
        // 1) default button
        this.app.toolbar.add('quote');

        // 2) custom button
        this.app.toolbar.add('mybutton', {
            title: 'My Button',
            icon: '<svg...>',
            command: 'myplugin.toggle'
        });
    },
    toggle(params, button) {
        alert('Button Toggle');
    }
});

let app = Redactor('#entry', {
    plugins: ['myplugin']
});

• Add buttons example

Hide with setting #

Use the corresponding hide setting for each toolbar to hide a button from it of the default ones in the editor.

let app = Redactor('#entry', {
    toolbar: {
        hide: ['deleted']
    }
});

• Hide buttons example

Hide with API #

Use the API to hide a button from a toolbar in the created plugin.

Redactor.add('plugin', 'myplugin', {
    start() {
        // remove button from a plugin
        this.app.toolbar.remove('list');
    }
});

let app = Redactor('#entry', {
    plugins: ['myplugin']
});

• Hide buttons example

Change button icons #

Use the 'buttons.icons' setting to change the button icons.

let app = Redactor('#entry', {
    buttons: {
        icons: {
            image: '<svg...>',
            format: '<svg...>'
        }
    }
});

• Change icons example