Add a custom style to the rich text editor
You can use the Editor Profiles API to add custom styles to the rich text editor (RTE) toolbar. These styles give authors ready-to-use formatting options such as custom headings or highlighted text.
Custom styles are configured using the style property in your editor profile JSON. Each style definition includes:
-
name- The display name shown in the editor. -
element- The HTML element to render. -
classes- One or more CSS classes to apply.
When configured, these styles appear in the rich text editor’s Styles drop-down menu, allowing authors to apply them to selected content.
To enable the Styles drop-down in the editor toolbar, add the style option to your toolbar items array. If style is not present, the custom styles defined in the style property will not be accessible.
Ensure the CSS classes you define (for example, category, info-box) exist in your site’s stylesheet so styles are visible on the published site.
The following example shows a toolbar profile that includes custom styles for an Article category heading and an Info box paragraph:
{
"toolbar": ["bold", "italic", "style"],
"style": {
"definitions": [
{
"name": "Article category",
"element": "h3",
"classes": ["category"]
},
{
"name": "Info box",
"element": "p",
"classes": ["info-box"]
}
]
}
}If this profile is assigned to a site, content authors can use these styles to:
-
Render Article category text as
<h3 class="category secondary heading">. -
Render Info box text as
<p class="info-box">.