Configuring the RTE for the Universal Editor configure-rte
Understand how you can configure the rich text editor (RTE) in the Universal Editor.
Overview overview
The Universal Editor provides a rich text editor (RTE) both in place and in the properties panel to allow authors to apply formatting changes as they edit their text.
This RTE is configurable using component filters. This document describes what configuration options are available along with examples.
Configuration Structure structure
RTE configuration consists of two parts:
These configurations can be defined as part of a component filter with the property rte
.
[
{
"id": "richtext",
"rte": {
"toolbar": {
// Toolbar configuration
},
"actions": {
// Action-specific configurations
}
},
"components": [
"richtext"
]
}
]
Toolbar Configuration toolbar
The toolbar configuration controls which editing options are available in the UI and how they’re organized. These are the available sections
{
"toolbar": {
// Text formatting options
"format": ["bold", "italic", "underline", "strike"],
// Text alignment options
"alignment": ["left", "center", "right", "justify"],
// Text direction options, right-to-left or left-to-right
"direction": ["rtl", "ltr"],
// Indentation controls
"indentation": ["indent", "outdent"],
// Block-level elements
"blocks": ["paragraph", "h1", "h2", "h3", "h4", "h5", "h6", "code_block"],
// List options
"list": ["bullet_list", "ordered_list"],
// Content insertion
"insert": ["link", "unlink"],
// Superscript/subscript
"sr_script": ["superscript", "subscript"],
// Editor utilities
"editor": ["removeformat"],
// Section ordering (optional)
"sections": ["format", "alignment", "list"]
}
}
Actions Configuration actions
The actions configuration allows you to customize the behavior and appearance of individual editing actions. These are the available sections.
Format Actions format
Format actions are used to apply formatting and support HTML tag switching to choose between semantic variants. The following sections are available.
{
"actions": {
"bold": {
"tag": "strong", // Use <strong> instead of <b>
"shortcut": "Mod-B", // Custom keyboard shortcut
"label": "Make Bold" // Custom button label
},
"italic": {
"tag": "em", // Use <em> instead of <i>
"shortcut": "Mod-I",
"label": "Italicize"
},
"strike": {
"tag": "del" // Use <del> instead of <s>
}
}
}
List Actions list
List actions support content wrapping to control HTML structure. The following sections are available.
{
"actions": {
"bullet_list": {
"wrapInParagraphs": true, // <ul><li><p>content</p></li></ul>
"shortcut": "Mod-Shift-8", // Custom shortcut
"label": "Bullet List" // Custom label
},
"ordered_list": {
"wrapInParagraphs": false, // <ol><li>content</li></ol> (default)
"shortcut": "Mod-Shift-9"
}
}
}
Link Actions link
Link actions support target attribute control to manage link behavior. The following sections are available.
{
"actions": {
"link": {
"hideTarget": false, // Show target attribute options (default)
"shortcut": "Mod-K", // Custom keyboard shortcut
"label": "Insert Link" // Custom button label
},
"unlink": {
"shortcut": "Mod-Shift-K", // Custom keyboard shortcut
"label": "Remove Link" // Custom button label
}
}
}
Link Configuration Options link-options
hideTarget
:false
(default) - Include target attribute in links, allowing_self
,_blank
, etc.hideTarget
:true
- Exclude target attribute from links entirely
The unlink
action only appears when the cursor is positioned within an existing link. It removes the link formatting while preserving the text content.
Other Actions other
All other actions support basic customization. The following sections are available.
{
"actions": {
"h1": {
"shortcut": "Mod-Alt-1",
"label": "Large Heading"
},
"paragraph": {
"shortcut": "Mod-Alt-0",
"label": "Normal Text"
},
"link": {
"shortcut": "Mod-K",
"label": "Insert Link",
"hideTarget": false // Show target attribute options (default: false)
}
}
}
Complete Example example
The following is an example of a complete configuration.
[
{
"id": "richtext",
"rte": {
// Configure which tools appear in toolbar
"toolbar": {
"format": [
"bold",
"italic"
],
"blocks": [
"paragraph",
"h1",
"h2"
],
"list": [
"bullet_list",
"ordered_list"
],
"insert": [
"link",
"unlink"
],
"sections": [
"format",
"blocks",
"list",
"insert"
]
},
// Customize individual action behavior
"actions": {
// Format actions with HTML tag choices
"bold": {
"tag": "strong",
"shortcut": "Mod-B",
"label": "Bold"
},
"italic": {
"tag": "em",
"shortcut": "Mod-I"
},
// List actions with content wrapping
"bullet_list": {
"wrapInParagraphs": true,
"label": "Bullet List"
},
"ordered_list": {
"wrapInParagraphs": false
},
// Link actions with target control
"link": {
"hideTarget": false,
"shortcut": "Mod-K",
"label": "Add Link"
},
"unlink": {
"label": "Remove Link"
},
// Other actions with basic customization
"h1": {
"shortcut": "Mod-Alt-1",
"label": "Main Heading"
}
}
},
"components": [
"richtext"
]
}
]
Action Option Details action-details
Several options have additional details that are important to keep in mind.
wrapInParagraphs
wrapInParagraphs
The wrapInParagraphs
option for lists controls the HTML structure.
wrapInParagraphs: false
(default) wrapInParagraphs-false
<ul>
<li>Simple text content</li>
<li>Another item</li>
</ul>
wrapInParagraphs: true
wrapInParagraphs-true
<ul>
<li><p>Text wrapped in paragraphs</p></li>
<li><p>Supports rich formatting within items</p></li>
</ul>
Use wrapInParagraphs: true
when you need:
- Rich formatting within list items
- Multiple paragraphs per list item
- Consistent block-level styling
Link Target Options link-target
The hideTarget
option for links controls whether the target
attribute is included in generated links and whether the dialog for link creation includes a field for target selection.
hideTarget: false
(default) hideTarget-false
<a href="https://example.com" target="_self">Link text</a>
<a href="https://example.com" target="_blank">External link</a>
hideTarget: true
hideTarget-true
<a href="https://example.com">Link text</a>
Tag Options tag
Format actions allow switching between HTML variants.
bold
<strong>
<b>
italic
<em>
<i>
strike
<del>
<s>
Choose semantic tags (<strong>
, <em>
, <del>
) for better accessibility and SEO.
Keyboard Shortcuts keyboard-shortcuts
Shortcuts use the format Mod-Key
(s) where:
Mod
=Cmd
on Mac,Ctrl
on Windows/Linux- Examples:
Mod-B
,Mod-Shift-8
,Mod-Alt-1