lightning:inputRichText (Beta)

A lightning:inputRichText component creates a rich text editor based on the Quill JS library, enabling you to add, edit, format, and delete rich text. You can create multiple rich text editors with different toolbar configurations. Pasting rich content into the editor is supported if the feature is available in the toolbar. For example, you can paste bold text if the bold button is available in the toolbar. An overflow menu is provided if more toolbar buttons are available than can fit the width of the toolbar.

This component inherits styling from rich text editor in the Lightning Design System.

Here is an example.

By default, the toolbar displays the font family and size menu, the format text block with Bold, Italic, Underline, and Strikethrough buttons. It also displays the format body block with Bulleted List, Numbered List, Indent, and Outdent buttons, followed by the align text block with Left Align Text, Center Align Text, and Right Align Text buttons. The Remove Formatting button is also available, and it always stands alone at the end of the toolbar.

You can disable buttons by category using the disabledCategories attribute. The categories are:

1. FORMAT_FONT: Format font family and size menus
2. FORMAT_TEXT: Format text buttons
3. FORMAT_BODY: Format body buttons
4. ALIGN_TEXT: Align text buttons
5. REMOVE_FORMATTING: Remove formatting buttons

The font menu provides the following font selection: Arial, Courier, Garamond, Salesforce Sans, Tahoma, Times New Roman, and Verdana. The font selection defaults to Salesforce Sans with a size of 12px. Supported font sizes are: 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, and 72. When you copy and paste text in the editor, the font is preserved only if the font is available in the font menu.

The component sanitizes HTML tags passed to the value attribute to prevent XSS vulnerabilities. Only a subset of HTML tags are allowed. The tags are: a, b, br, big, blockquote, caption, cite, code, del, div, em, h1, h2, h3, hr, i, img, ins, kbd, li, ol, p, param, pre, q, s, samp, small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var, strike.

Supported HTML attributes include: accept, action, align, alt, autocomplete, background, bgcolor, border, cellpadding, cellspacing, checked, cite, class, clear, color, cols, colspan, coords, datetime, default, dir, disabled, download, enctype, face, for, headers, height, hidden, high, href, hreflang, id, ismap, label, lang, list, loop, low, max, maxlength, media, method, min, multiple, name, noshade, novalidate, nowrap, open, optimum, pattern, placeholder, poster, preload, pubdate, radiogroup, readonly, rel, required, rev, reversed, rows, rowspan, spellcheck, scope, selected, shape, size, span, srclang, start, src, step, style, summary, tabindex, target, title, type, usemap, valign, value, width, xmlns.

lightning:inputRichText doesn't provide built-in validation but you can wire up your own validation logic. Set the valid attribute to false to change the border color of the rich text editor to red.

This component supports the following method.

focus(): Sets the focus on the element.