rich-text-editor

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">

States

Focused

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

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">

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">

Disabled

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

Tooltip

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

Examples

Bottom toolbar

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

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>

Email

Compose Email...
<div class="demo-only" style="min-height:180px">
  <div class="slds-form-element">
    <div class="slds-form-element__control">

Toolbar Narrow

Compose Email...
<div class="slds-region_narrow" style="width:294px">
  <div class="slds-form-element">
    <div class="slds-form-element__control">

Feed

Post to feed...
<div class="demo-only" style="min-height:180px">
  <div class="slds-form-element">
    <div class="slds-form-element__control">

Notes

Compose Note...
<div class="demo-only" style="min-height:180px">
  <div class="slds-form-element">
    <div class="slds-form-element__control">