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.

<div class="demo-only" style="min-height:180px;">
  <div class="slds-rich-text-editor slds-form-element slds-grid slds-grid_vertical slds-nowrap">
    <div role="toolbar" class="slds-rich-text-editor__toolbar slds-shrink-none">
      <ul aria-label="Format text" class="slds-button-group-list">
        <li>
          <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="0" title="Provide description of action">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#bold"></use>
            </svg>
            <span class="slds-assistive-text">Bold</span>
          </button>
        </li>
        <li>
          <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1" title="Provide description of action">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#italic"></use>
            </svg>
            <span class="slds-assistive-text">Italic</span>
          </button>
        </li>
        <li>
          <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1" title="Provide description of action">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#underline"></use>
            </svg>
            <span class="slds-assistive-text">Underline</span>
          </button>
        </li>
        <li>
          <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1" title="Provide description of action">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#strikethrough"></use>
            </svg>
            <span class="slds-assistive-text">Strike Through</span>
          </button>
        </li>
      </ul>
      <ul aria-label="Format body" class="slds-button-group-list">
        <li>
          <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1" title="Provide description of action">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextbulletedlist"></use>
            </svg>
            <span class="slds-assistive-text">Bulleted List</span>
          </button>
        </li>
        <li>
          <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1" title="Provide description of action">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextnumberedlist"></use>
            </svg>
            <span class="slds-assistive-text">Numbered List</span>
          </button>
        </li>
        <li>
          <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1" title="Provide description of action">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextindent"></use>
            </svg>
            <span class="slds-assistive-text">Indent</span>
          </button>
        </li>
        <li>
          <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1" title="Provide description of action">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextoutdent"></use>
            </svg>
            <span class="slds-assistive-text">Outdent</span>
          </button>
        </li>
      </ul>
      <ul aria-label="Remove Formatting" class="slds-button-group-list">
        <li>
          <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1" title="Provide description of action">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#remove_formatting"></use>
            </svg>
            <span class="slds-assistive-text">Remove Formatting</span>
          </button>
        </li>
      </ul>
    </div>
    <div class="slds-rich-text-editor__textarea slds-grid">
      <div aria-label="Compose text" contenteditable="true" class="slds-rich-text-area__content slds-text-color_weak slds-grow">Compose text...</div>
    </div>
  </div>
</div>

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