---
schema_version: "1"
id: 6c56e294ad1060545e7f2537e83049d9ceda5127d8d2f965d2ff205d50737eb3
title: RichTextEditor Lightning Web Component ReadMe (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_richtexteditor_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_richtexteditor_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 60fc1ccb04724f2c0b55c2d4585000546f2203314a246bee074311cd654407aa
description: For the managed package runtime, this page contains a RichTextEditor LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# RichTextEditor Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a RichTextEditor LWC ReadMe for each Vlocity release.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The _RichTextEditor Lightning Web Component_ enables the text editor tool for rich content editing.

## Available c-rich-text-editor Attributes

For more options, see [TinyMCE Documentation](https://www.tiny.cloud/docs/quick-start/).

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d267565e72">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d267565e78">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d267565e84">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d267565e90">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d267565e96">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e72 ">
              <p style="margin-bottom:0;">config</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e78 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e84 ">
              <p style="margin-bottom:0;">object</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e90 ">
              <p style="margin-bottom:0;">yes</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e96 ">
              <p style="margin-bottom:0;">Sets the options to create the editor. For more information, see <a href="https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/" target="_blank">TinyMCE Basic Setup</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e72 ">
              <p style="margin-bottom:0;">value</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e78 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e84 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e90 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e96 ">
              <p style="margin-bottom:0;">Adds default code inside the editor.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e72 ">
              <p style="margin-bottom:0;">height</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e78 ">
              <p style="margin-bottom:0;">CSS (Default: 300)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e84 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e90 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e96 ">
              <p style="margin-bottom:0;">To adjust the height of the editor, set this value. Only supports height without any postfix. For example, 300.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e72 ">
              <p style="margin-bottom:0;">editor-src-url</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e78 ">
              <p style="margin-bottom:0;">URL</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e84 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e90 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d267565e96 ">
              <p style="margin-bottom:0;">For off-platform support, set the source of the rich text editor. By default, <em>editor-src-url</em> points to the static resource.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-rich-text-editor Component

```
<c-rich-text-editor
  onchange="{valueChnged}"
  editor-src-url="{url}"
  config="{editorConfig}"
  value="{initialValue}"
  height="400"
></c-rich-text-editor>
```

## Basic Editor Config

```
{
  height: 300;
}
```

## Advanced Editor Config

```
{
    menubar: false,
    plugins: [
      'advlist autolink lists link image charmap print preview anchor textcolor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table paste code help wordcount'
    ],
    toolbar: 'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | preview | help',
    content_css: [
      '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
      '//www.tiny.cloud/css/codepen.min.css'
    ],
    skin: 'oxide'
}
```

## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The _RichTextEditor Lightning Web Component_ enables the text editor tool for rich content editing.

## Available c-rich-text-editor Attributes

For more options, see [TinyMCE Documentation](https://www.tiny.cloud/docs/quick-start/).

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d267565e290">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d267565e296">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d267565e302">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d267565e308">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d267565e314">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e290 ">
              <p style="margin-bottom:0;">config</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e296 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e302 ">
              <p style="margin-bottom:0;">object</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e308 ">
              <p style="margin-bottom:0;">yes</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e314 ">
              <p style="margin-bottom:0;">Sets the options to create the editor. For more information, see <a href="https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/" target="_blank">TinyMCE Basic Setup</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e290 ">
              <p style="margin-bottom:0;">value</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e296 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e302 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e308 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e314 ">
              <p style="margin-bottom:0;">Adds default code inside the editor.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e290 ">
              <p style="margin-bottom:0;">height</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e296 ">
              <p style="margin-bottom:0;">CSS (Default: 300)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e302 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e308 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e314 ">
              <p style="margin-bottom:0;">To adjust the height of the editor, set this value. Only supports height without any postfix. For example, 300.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e290 ">
              <p style="margin-bottom:0;">editor-src-url</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e296 ">
              <p style="margin-bottom:0;">URL</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e302 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e308 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d267565e314 ">
              <p style="margin-bottom:0;">For off-platform support, set the source of the rich text editor. By default, <em>editor-src-url</em> points to the static resource.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-rich-text-editor Component

```
<c-rich-text-editor
  onchange="{valueChnged}"
  editor-src-url="{url}"
  config="{editorConfig}"
  value="{initialValue}"
  height="400"
></c-rich-text-editor>
```

## Basic Editor Config

```
{
  height: 300;
}
```

## Advanced Editor Config

```
{
    menubar: false,
    plugins: [
      'advlist autolink lists link image charmap print preview anchor textcolor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table paste code help wordcount'
    ],
    toolbar: 'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | preview | help',
    content_css: [
      '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
      '//www.tiny.cloud/css/codepen.min.css'
    ],
    skin: 'oxide'
}
```