Buttons

buttons.toolbar#

Type: string[] | object

Default: ['add', 'source', 'format', 'bold', 'italic', 'deleted', 'moreinline', 'list', 'link', 'image', 'table']

Buttons in the main toolbar.

const app = Redactor('#entry', {
  buttons: {
    toolbar: ['add', 'format', 'bold', 'italic', 'link', 'image']
  }
});

buttons.extrabar#

Type: string[] | object

Default: ['hotkeys']

Buttons in the extrabar (right side of the toolbar row).

const app = Redactor('#entry', {
  buttons: {
    extrabar: ['undo', 'redo', 'hotkeys']
  }
});

buttons.control#

Type: string[] | object

Default: ['toggle']

Buttons on the floating control bar next to a focused block. The toggle button opens the control dropdown.

const app = Redactor('#entry', {
  buttons: {
    control: ['toggle', 'add', 'format']
  }
});

buttons.context#

Type: string[] | object

Default: ['format', 'bold', 'italic', 'deleted', 'moreinline', 'link']

Buttons in the floating context toolbar on text selection.

const app = Redactor('#entry', {
  buttons: {
    context: ['bold', 'italic', 'highlight', 'sub', 'sup', 'kbd']
  }
});

buttons.icons#

Type: false | object

Default: false

Per-button SVG/icon overrides. Set to an object and add one key per button name.

const app = Redactor('#entry', {
  buttons: {
    icons: {
      bold: '<svg>...</svg>',
      italic: '<svg>...</svg>'
    }
  }
});