Component Blueprints

Rich Text Editor

Lightning Component
  • HTML/CSS:Dev Ready
  • Web Component:True
  • Layout:Desktop Only

Sections

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

Heading - h1

Lorem ipsum dolor sit amet, strong adipisicing elit, sed do emphasis tempor incididunt ut underlined et dolore strikethrough aliqua. Ut subscript ad superscript veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in link in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading - h2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod veryVeryLongWordWithHyperlinkExample tempor incididunt ut labore et dolore magna aliqua.

  • Unordered list item
    • Nested Unordered list item
      1. Nested Ordered list item
      2. Nested Ordered list item
    • Nested Unordered list item
      • Nested Unordered list item
      • Nested Unordered list item
  • Unordered list item
    1. Nested Ordered list item
    2. Nested Ordered list item
  • Unordered list item

Heading - h3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  1. Ordered list item
    • Nested Unordered list item
      1. Nested Ordered list item
      2. Nested Ordered list item
    • Nested Unordered list item
      • Nested Unordered list item
      • Nested Unordered list item
  2. Ordered list item
    1. Nested Ordered list item
      1. Nested Ordered list item
        1. Nested Ordered list item
        2. Nested Ordered list item
      2. Nested Ordered list item
    2. Nested Ordered list item
  3. Ordered list item
  • List Item with div
  • List Item with div
  1. List Item with div
  2. List Item with div

Heading - h4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Description List - Term
Description List - Description
Description List - Term
Description List - Description

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ColumnColumn
RowRow
RowRow
Heading - h5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquote - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading - h6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, https://url.com/document/d/1dSOGKlCQtSG73NcSJB7qCJVyjE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/ed quis nostrud Content to be inserted. exercitation ullamco Content to be deleted. laboris nisi ut aliquip ex ea commodo consequat.

About Rich Text Editor#

At a high-level, the buttons in Rich Text Editor (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.

Base#

Compose text...
<div class="demo-only" style="min-height:180px">
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <div class="slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap">

States#

Focused#

Compose text...
<div class="demo-only" style="min-height:180px">
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <div class="slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap slds-has-focus">

Filled Out#

Heading - h1

Lorem ipsum dolor sit amet, strong adipisicing elit, sed do emphasis tempor incididunt ut underlined et dolore strikethrough aliqua. Ut subscript ad superscript veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in link in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading - h2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod veryVeryLongWordWithHyperlinkExample tempor incididunt ut labore et dolore magna aliqua.

  • Unordered list item
    • Nested Unordered list item
      1. Nested Ordered list item
      2. Nested Ordered list item
    • Nested Unordered list item
      • Nested Unordered list item
      • Nested Unordered list item
  • Unordered list item
    1. Nested Ordered list item
    2. Nested Ordered list item
  • Unordered list item

Heading - h3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  1. Ordered list item
    • Nested Unordered list item
      1. Nested Ordered list item
      2. Nested Ordered list item
    • Nested Unordered list item
      • Nested Unordered list item
      • Nested Unordered list item
  2. Ordered list item
    1. Nested Ordered list item
      1. Nested Ordered list item
        1. Nested Ordered list item
        2. Nested Ordered list item
      2. Nested Ordered list item
    2. Nested Ordered list item
  3. Ordered list item
  • List Item with div
  • List Item with div
  1. List Item with div
  2. List Item with div

Heading - h4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Description List - Term
Description List - Description
Description List - Term
Description List - Description

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ColumnColumn
RowRow
RowRow
Heading - h5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquote - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading - h6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, https://url.com/document/d/1dSOGKlCQtSG73NcSJB7qCJVyjE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/ed quis nostrud Content to be inserted. exercitation ullamco Content to be deleted. laboris nisi ut aliquip ex ea commodo consequat.

<div class="demo-only" style="min-height:180px">
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <div class="slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap">

Error#

Compose text...
This field is required
<div class="demo-only" style="min-height:180px">
  <div class="slds-form-element slds-has-error">
    <div class="slds-form-element__control">
      <div class="slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap slds-has-error">

Disabled#

Compose text...
<div class="demo-only" style="min-height:180px">
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <div class="slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap">

Tooltip#

Compose text...
<div class="demo-only" style="min-height:180px">
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <div class="slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap">

Examples#

Bottom toolbar#

Compose text...
<div class="demo-only" style="min-height:180px">
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <div class="slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap">

With a Label#

Details and Steps to Reproduce
Compose text...
<div class="demo-only" style="min-height:180px">
  <div class="slds-form-element">
    <span id="rich-text-editor-unique-id-01" class="slds-form-element__label">Details and Steps to Reproduce</span>
    <div class="slds-form-element__control">

Email#

Compose Email...
<div class="demo-only" style="min-height:180px">
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <div class="slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap">

Toolbar Narrow#

Compose Email...
<div class="slds-region_narrow" style="width:294px">
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <div class="slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap">

Feed#

Post to feed...
<div class="demo-only" style="min-height:180px">
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <div class="slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap">

Notes#

Compose Note...
<div class="demo-only" style="min-height:180px">
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <div class="slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap">

Styling Hooks Overview#

Use these CSS Custom Properties as hooks to customize this SLDS component with your own style. For more information, read the technical documentation.

CategoryStyling Hook NameValue Type(s)Fallback Value
Sizing
--slds-c-textarea-sizing-max-height
Dimension15rem
--slds-c-textarea-sizing-min-height
Dimension6rem

Overview of CSS Classes#

Selector.slds-rich-text-editor
Summary

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

Supportdev-ready
Restrictdiv
VariantTrue
Selector.slds-rich-text-editor_toolbar-only
Summary

Rich text editor container for when toolbar is detached from Textarea.

Restrict.slds-rich-text-editor
Selector.slds-rich-text-editor__toolbar_detached
Summary

Container for Rich Text Editor Toolbar when detached from Textarea

Restrict.slds-rich-text-editor_toolbar-only .slds-rich-text-editor__toolbar
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-rich-text-editor__select_x-small
Summary

Container X-Small Size for Rich Text Editor Combobox

Restrict.slds-rich-text-editor__select .slds-combobox__form-element
Selector.slds-rich-text-editor__select_xx-small
Summary

Container XX-Small Size for Rich Text Editor Combobox

Restrict.slds-rich-text-editor__select .slds-combobox__form-element
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
Selector.slds-rich-text-area__content
Summary

Textarea for Rich Text Editor which is an editable div

Restrict.slds-rich-text-editor div

Rich Text Editor Release Notes

2.17.0

Added

  • Added slds as the default namespace with sds fallbacks for Styling Hooks.

2.16.0

Changed

  • Removed the usage of the deprecated combobox. The Rich Text Editor now uses the current combobox.
  • Updated combobox to ARIA 1.2 compliance.

2.15.0

Added

  • Enabled styling hooks for Rich Text Editor. See Rich Text Editor's styling hooks overview table for a full listing of the currently available hooks.

2.14.0

Added

  • Increased nesting styles for Rich Text Editor output from 3 levels to 5 levels deep.

2.10.0

Added

  • Created Toolbar Only variant for use without attached textarea for touch devices

Changed

  • Removed size utility classes on combobox/selects in toolbar for component-specific classes (slds-rich-text-editor__select_x-small and slds-rich-text-editor__select_xx-small)

2.9.5

Fixed

  • Added text treatments for <ins> and <del>

2.7.5

Fixed

  • Resolved issue where table elements within a rich text editor output would improperly wrap

2.7.0

Fixed

  • Fixed incorrect border-radius in text area.
  • Fixed a bug where child input elements were unintentionally affected when the Rich Text Editor was in an error state.

Changed

  • New markup that moves the error message outside of Rich Text Editor, and adds a slds-form-element__control element to enable left align labels.