Customize the rich text editor toolbar

Understanding the Editor profile API

You can create a new profile, with its own RTE toolbar configuration, using the Editor profile API. When creating a new toolbar profile, the toolbar item names and JSON structure must adhere to the supported configuration.

Editor profiles are stored as JSON objects with two required fields:

• name - specifies the profile name for the Editor toolbar.
• value - contains the JSON configuration for the toolbar items and grouping (as a JSON-stringified Editor config object).

When stored in a profile, this configuration must be JSON-stringified inside the value property, for example:

{
  "name": "Basic Editing",
  "value": "{\\"toolbar\\":{\\"items\\":[\\"bold\\",\\"italic\\",\\"underline\\",\\"link\\",\\"bulletedList\\",\\"numberedList\\"]}}"
}

When you customize the value array:

• You can remove any items from the items array.
• You can reorder items (including groups and pipe character | separators).

To ensure compatibility with SitecoreAI:

• Do not add new toolbar item names. Only the item IDs listed in the Available toolbar items tables are valid. Any additional or custom names will be rejected.
• Do not change the JSON schema structure of toolbar items or grouped objects. You may not introduce new properties or alter the expected object shape.
• Do not rename existing toolbar items. Names must match exactly (case-sensitive) the items listed in the Available toolbar items tables.
• Do not introduce custom plugin identifiers unless provided by Sitecore.

Available toolbar items

The toolbar items listed in the tables below can be added to the RTE.

The table only includes toolbar items that can be explicitly configured through a CKEditor profile. Some commands that are visible to content authors when editing rich text (for example, Find and replace) are provided by the editor but aren’t configurable through toolbar profiles.

Grouped items

Grouped dropdown menus take the following form:

{
"group": "formatting",
"label": "Formatting",
"icon": "text",
"items": ["strikethrough", "subscript", "superscript", "removeFormat"]
}

In the above code sample:

• group is the Unique identifier.
• label is the dropdown display name.
• icon is the icon identifier.
• items is the list of included toolbar items IDs.

The following table lists the predefined groups of the toolbar:

Example profiles

Here are examples of JSON configuration for SitecoreAI RTE toolbar profiles.

{
  "name": "Minimal",
  "value": "{\\"toolbar\\":{\\"items\\":[\\"bold\\",\\"italic\\",\\"link\\"] }}"
}

{
  "name": "Marketing",
  "value": "{\\"toolbar\\":{\\"items\\":[\\"bold\\",\\"italic\\",\\"underline\\",\\"|\\",
\\"heading\\",\\"|\\",\\"bulletedList\\",\\"numberedList\\",\\"|\\",\\"link\\"
,\\"internalLink\\",\\"|\\",\\"horizonSelectMedia\\"}}"
}

{
  "name": "Full with Custom Styles",
  "value": "{\\"toolbar\\":{\\"items\\":[\\"bold\\",\\"italic\\",\\"emphasis\\",\\"underline\\",\\"style\\",\\"blockQuote\\",{\\"group\\":\\"formatting\\",\\"label\\":\\"Formatting\\",\\"icon\\":\\"text\\",\\"items\\":[\\"strikethrough\\",\\"subscript\\",\\"superscript\\",\\"|\\",\\"removeFormat\\"]},\\"fontColor\\",\\"fontBackgroundColor\\",\\"|\\",\\"heading\\",\\"|\\",\\"alignment\\",\\"bulletedList\\",\\"numberedList\\",\\"|\\",\\"outdent\\",\\"indent\\",\\"|\\",\\"link\\",\\"internalLink\\",\\"phoneLink\\",\\"|\\",{\\"group\\":\\"insert\\",\\"label\\":\\"Insert\\",\\"withText\\":false,\\"icon\\":\\"plus\\",\\"items\\":[\\"sitecoreSelectMedia\\",\\"insertTable\\",\\"horizontalLine\\"]},\\"|\\",\\"sourceEditing\\",\\"|\\",\\"sitecoreResetFieldValue\\"]},\\"style\\":{\\"definitions\\":[{\\"name\\":\\"Article category\\",\\"element\\":\\"h3\\",\\"classes\\":[\\"category\\"]},{\\"name\\":\\"Info box\\",\\"element\\":\\"p\\",\\"classes\\":[\\"info-box\\"]}]}}"
}