Rich Text Editor
- HTML/CSS:Dev Ready
- Layout:Desktop Only
The Rich Text Editor is a textarea with added capabilities for use in various publishers.
Base
Preview
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.
On smaller screen sizes, the select dropdowns for Font and Size in the toolbar can overlap
outside of the container. To adjust the widths of the dropdowns, apply the class
slds-region_narrow to the outermost div of the rich text editor.
A label may be used to further describe the purpose of a Rich Text Editor. To add a label, place a
<span> element with the class slds-form-element__label, right before the slds-form-element__control
element.
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
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-rich-text-editor |
|---|---|
| Summary | The default rich text editor contains a minimal amount of text formatting capabilities. |
| Support | dev-ready |
| Restrict | div |
| Variant | True |
| Selector | .slds-rich-text-editor__toolbar |
|---|---|
| Summary | Container for Rich Text Editor Toolbar |
| Restrict | .slds-rich-text-editor div |
| Selector | .slds-rich-text-editor__col |
|---|---|
| Summary | Container for Rich Text Editor Toolbar |
| Restrict | .slds-rich-text-editor__toolbar div |
| Selector | .slds-rich-text-editor__col_grow |
|---|---|
| Summary | Container for Rich Text Editor Toolbar |
| Restrict | .slds-rich-text-editor__toolbar 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 |
| Modifier | True |
| Selector | .slds-has-error |
|---|---|
| Summary | Error state for rich text editor |
| Restrict | .slds-rich-text-editor |
| Modifier | True |