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 structure must adhere to the supported configuration.

Editor profiles are stored as objects with two required fields:

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

When stored in a profile, this configuration must be 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 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 drop-down 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 drop-down 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 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"]
        }
      ]
    }
  }
}

Filter HTML in rich text fields

When you save content in a Rich Text field, SitecoreAI processes and filters the HTML. This helps protect sites from security risks and unintended markup. As a result, some HTML elements, such as <script>, might be removed or modified when the content is saved.

By default, the Rich Text Editor filters executable and potentially unsafe HTML before saving field values, such as:

• <script> tags
• Inline JavaScript (for example, onClick, onLoad)
• JavaScript URLs (for example, javascript:)

This reduces the risk of cross-site scripting (XSS) and other script-related issues. You can control how HTML is filtered using the following configuration:

<setting name="HtmlEditor.RemoveScripts" value="true" />

When the configuration setting is set to:

• true - script tags and inline scripts are removed before saving. This is the default setting.
• false - script tags are preserved in Rich Text field values.

To apply the configuration setting:

1. Use a patch file in the App_Config/Include folder.
2. Ensure the configuration file is included in your deployment and applied to the correct role.
3. After deployment, verify the effective value using showconfig.aspx.