Introduction

You can customize the rich text editor's toolbar by using the following init options:

• rich_text_editor.toolbar_settings.ltr_toolbar for languages which are written from left to right (such as English and Spanish), and
• rich_text_editor.toolbar_settings.rtl_toolbar for languages which are written from right to left (such as Arabic and Hebrew). In order to use the rtl_toolbar setting, you need to configure Author API and Question Editor API to initialize in right-to-left mode, as described in this article.

The easiest way to customize a toolbar is to start with the default settings and change them as required.

Default settings

Toolbar settings are defined as an array of objects. Each object defines a toolbar group by specifying its name and the items (i.e. the buttons), which should be displayed as part of the group. The default toolbar looks like this:

Figure 1: the default toolbar.

The default toolbar settings are as follows. The text runs from left-to-right (ltr), by default.

'ltr_toolbar': [
  {
    'items': ['Bold','Italic','Underline','-','TextColor','-',
      'LrnUnderlinedIndicator','-','RemoveFormat','FontSize'],
    'name': 'basicstyles'
  },
  {
    'items': ['NumberedList','BulletedList','-','Indent','Outdent'],
    'name': 'list'
  },
  {
    'items': ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    'name': 'justify'
  },
  {
    'items': ['Link','Unlink'],
    'name': 'link'
  },
  {
    'items': ['Image','LrnMath','Table','Blockquote','SpecialChar'],
    'name': 'insert'
  },
  {
    'items': ['LrnSimpleFeature'],
    'name': 'simplefeature'
  },
  {
    'items': ['LrnResource'],
    'name': 'resource'
  },
  {
    'items': ['LrnEditAriaLabel','LrnPopupContent'],
    'name': 'editAriaLabel'
  },
  {
    'items': ['Undo','Redo'],
    'name': 'clipboard'
  },
  {
    'items': ['Styles'],
    'name': 'style'
  },
  {
    'items': ['Sourcedialog'],
    'name': 'mode'
  },
  {
    'items': ['lrn_datatable'],
    'name': 'data'
  }
]

Code sample 1: default toolbar settings (left-to-right mode).

If you define customButtons, they are added at the end of the toolbar in a group named custombuttons.

Default settings for right-to-left

The default settings for the right-to-left (rtl) toolbar are slightly different from the left-to-right settings:

'rtl_toolbar': [
  {
    'name': 'basicstyles',
    'items': ['Bold','Italic','Underline','-','TextColor','-',
      'LrnUnderlinedIndicator','-','RemoveFormat','FontSize']
  },
  {
    'name': 'list',
    'items': ['NumberedList','BulletedList','-','Indent','Outdent']
  },
  {
    'name': 'justify',
    'items': ['JustifyRight','JustifyCenter','JustifyLeft','JustifyBlock']
  },
  {
    'name': 'link',
    'items': ['Link','Unlink']
  },
  {
    'name': 'insert',
    'items': ['Image','Table','Blockquote','SpecialChar']
  },
  {
    'name': 'editAriaLabel',
    'items': ['LrnEditAriaLabel','LrnPopupContent']
  },
  {
    'name': 'clipboard',
    'items': ['Undo','Redo']
  },
  {
    'name': 'style',
    'items': ['Styles']
  },
  {
    'name': 'mode',
    'items': ['Sourcedialog']
  },
  {
    'name': 'data',
    'items': ['lrn_datatable']
  },
  {
    'name': 'bidi',
    'items': ['BidiLtr','BidiRtl']
  }
]

Code sample 2: default toolbar settings for right-to-left mode.

As for left-to-right, if you define customButtons, they are added at the end of the toolbar in a group named custombuttons.

Customization

To customize your toolbar, you can pick any of the buttons defined in the items and add them to groups as you please. Except for two special cases described further below, group names can be chosen arbitrarily. A dash - will add a vertical separator between two buttons. 

In order to display font sizes, italic, bold (separated by a vertical line) and underline only, you can define the following settings:

'toolbar_settings': {
  'ltr_toolbar': [{
    'name': 'mystyles',
    'items': ['FontSize', 'Italic', '-', 'Bold', 'Underline']
  }]
}

Code sample 3: configuration to show text formatting buttons.

The result will look like this:

(Note that the font size button is always displayed separately from its group. That's a CKEditor setting which cannot be changed.)

Special cases

Two special cases are worth noting when customizing the toolbar:

1. If you define a group named basicstyles, the FontSize button will be added to the end of that group unless it is part of another group or font_sizes.enabled is set to false
2. If you want to customize the location of custom buttons, you need to add a group named custombuttons at your desired location. There is no need to set the items of this group. A group namedcustombuttons can only be added, if you actually define custom buttons in your init options, otherwise an error is thrown. For example, if you have defined custom buttons and want to to display them as the first group, the following settings would work:

'ltr_toolbar': [
  {
    'name': 'custombuttons',
  },
  {
    'name': 'basicstyles',
    'items': ['Bold', 'Italic', 'Underline', '-', 'TextColor']
  }
] 

Code sample 4: customizing the location of custom buttons.