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 This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

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.

Attribute	Value	Type	Required	Description
config		object	yes	Sets the options to create the editor. For more information, see TinyMCE Basic Setup
value		string		Adds default code inside the editor.
height	CSS (Default: 300)			To adjust the height of the editor, set this value. Only supports height without any postfix. For example, 300.
editor-src-url	URL	string		For off-platform support, set the source of the rich text editor. By default, editor-src-url points to the static resource.

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