Formatted Rich Text

A lightning-formatted-rich-text component renders a read-only representation of rich text. Rich text refers to text that includes HTML tags for formatting, such as <strong> for bold text or <u> for underlined text. You can pass in rich text to this component by using the lightning-input-rich-text component or programmatically in JavaScript.

By default, the component creates links automatically for linkable text and email addresses. For example, if the input is "Go to salesforce.com", lightning-formatted-rich-text creates a link so the output is "Go to salesforce.com". Email addresses use the mailto: protocol. To show links and email addresses in plain text, specify the disable-linkify attribute.

This example creates a rich text editor that's wired up to a lightning-formatted-rich-text component. The component sets the rich text content during initialization.

To use double quotes in your value definitions, escape them by using the \ character.

To pass in HTML tags in your component markup, escape the tags like this.

The component sanitizes HTML tags passed to the value attribute to prevent XSS vulnerabilities. It also makes sure that the formatted output is valid HTML. For example, if you have mismatched tags like <div>My Title</h1>, the component returns <div>My Title</div>.

If you set unsupported tags via JavaScript, the component removes those tags and preserves the text content. The supported HTML tags are: a, abbr, acronym, address, br, big, blockquote, caption, cite, code, col, colgroup, del, div, dl, dd, dt, em, font, h1, h2, h3, h4, h5, h6, hr, img, ins, kbd, li, ol, mark, 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, data-fileid, 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.

The HTML tags b and i aren't supported. This component converts the b tags to strong and i tags to em for screen reader accessibility. Other unsupported tags and attributes are removed, and only their text content is displayed.

We recommend that you use the h1 to h6 elements for headings and use mark to highlight text. For more information, see the W3C recommendations.

lightning-formatted-rich-text supports these protocols.

• ftp
• ftps
• http
• https
• mailto
• tel
• callto
• cid
• xmpp
• ciscotel
• navision

URLs such as www.salesforce.com or salesforce.com are also shown as links. All links, including those links that don't include a protocol, specifies the anchor tag with a target value of _blank. To use links with other target values, use lightning-formatted-url instead.

Encode parenthesis characters for URL links. Use %28 for the opening parenthesis ( and %29 for the closing parenthesis (. Parenthesis characters that aren't URL encoded break the URL link.

Formatting of list items for ordered and unordered lists varies across browsers. In particular, indents and alignment styles applied to lists in rich text don't render the same in lightning-formatted-rich-text across all browsers. See list-style-position on MDN.

Object Reference for the Salesforce Platform: Field Types