Rich Text Editor

Rich Text Editor

The Rich Text Editor is a textarea with added capabilities for use in various publishers.

Base

Preview

No content has been added for this component.

No content has been added for this component.

About Base

The default rich text editor contains a minimal amount of text formatting capabilities.


About Rich Text Editor

At a high-level, the buttons in RTE are organized into four groupings: “format text”, “format body”, “insert content”, and “clear formatting”.

The “clear formatting” button always stays at the end of the buttons set, regardless of which rich text editor variant is used. It should always stand by itself.

Accessibility

Ensure that there is a single tab key stop for the button groups in the toolbar, and that left and right arrows are used to navigate through each button.


Overview of CSS Classes

Selector.slds-rich-text-editor
Summary

The default rich text editor contains a minimal amount of text formatting capabilities.

Restrictdiv
VariantTrue
Selector.slds-rich-text-editor__toolbar
Summary

Container for Rich Text Editor Toolbar

Restrict.slds-rich-text-editor div
Selector.slds-rich-text-editor__toolbar-bottom
Summary

Container for Rich Text Editor Bottom Toolbar

Restrict.slds-rich-text-editor__toolbar
Selector.slds-rich-text-editor__select
Summary

Container for Rich Text Editor Combobox

Restrict.slds-rich-text-editor__toolbar div
Selector.slds-has-focus
Summary

Focus state for rich text editor

Restrict.slds-rich-text-editor
ModifierTrue
Selector.slds-has-error
Summary

Error state for rich text editor

Restrict.slds-rich-text-editor
ModifierTrue