Button

buttons

Type: Array

Default: ['html', 'format', 'bold', 'italic', 'deleted', 'lists', 'image', 'file', 'link']

Sets an array of buttons that will be displayed in the toolbar.

Here is some additional buttons which you can use in the array of set:

'line', 'redo', 'undo', 'underline', 'ol', 'ul', 'indent', 'outdent', 'sup', 'sub'

The buttons set can be customized like this:

$R('#content', {
    buttons: ['format', 'bold', 'italic', 'deleted']
});

buttonsTextLabeled

Type: Boolean

Default: false

This setting makes all buttons is text labeled.

$R('#content', {
    buttonsTextLabeled: true
});

buttonsAdd

Type: Array

Default: []

This setting allows adding additional buttons to the toolbar. Buttons will be added at the end of the toolbar.

$R('#content', {
    buttonsAdd: ['underline', 'line', 'undo']
});

buttonsAddFirst

Type: Array

Default: []

This setting allows adding additional buttons to the toolbar. Buttons will be added at the beginning of the toolbar.

$R('#content', {
    buttonsAddFirst: ['undo', 'redo']
});

buttonsAddAfter

Type: Object Boolean

Default: false

This setting allows adding a button to the toolbar after a specified one.

$R('#content', {
    buttonsAddAfter: { after: 'deleted', buttons: ['underline'] }
});

buttonsAddBefore

Type: Object Boolean

Default: false

This setting allows adding a button to the toolbar before a specified one.

$R('#content', {
    buttonsAddBefore: { before: 'format', buttons: ['undo'] }
});

buttonsHide

Type: Array

Default: []

This setting allows to hide certain buttons on launch.

$R('#content', {
    buttonsHide: ['image', 'link']
});

buttonsHideOnMobile

Type: Array

Default: []

This setting allows to hide certain buttons on mobile devices:

$R('#content', {
    buttonsHideOnMobile: ['image', 'video']
});

activeButtons

Type: Object

Default: object

This setting allows you to fire active state of buttons when the cursor is in specified tag.

Here is the default list of active states, where key is a tag name and the value is a button name:

{
    b: 'bold',
    strong: 'bold',
    i: 'italic',
    em: 'italic',
    del: 'deleted',
    strike: 'deleted'
}

The list of active states is customizable:

$R('#content', {
        activeButtonsAdd: {
        b: 'bold',
        mark: 'bold'
    }
});

Also you can turn active states off:

$R('#content', {
    activeButtonsAdd:  {}
});

activeButtonsAdd

Type: Object

Default: {}

This setting allows you to add active states for additional buttons when the cursor is in specified tag.

$R('#content', {
    activeButtonsAdd: {
        code: 'codebutton'
    }
});