Formatted Rich Text

A lightning:formattedRichText component is a read-only representation of rich text. Rich text refers to text that’s formatted by HTML tags, such as <strong> for bold text or <u> for underlined text. You can pass in rich text to this component using the lightning:inputRichText component or programmatically by setting a value in the client-side controller.

By default, the component creates links automatically for linkable text and email addresses. For example, if the input is “Go to salesforce.com”, lightning:formattedRichText creates a link so the output is “Go to salesforce.com”. Email addresses display using the mailto: protocol. To display links and email addresses in plain text, set the disableLinkify attribute to true.

This example creates a rich text editor that’s wired up to a lightning:formattedRichText component. The rich text content is set during initialization.

1<aura:component>
2  <aura:handler name="init" value="{! this }" action="{! c.init }" />
3  <aura:attribute name="richtext" type="String" />
4  <!-- Rich text editor and formatted output -->
5  <lightning:inputRichText value="{!v.richtext}" />
6  <lightning:formattedRichText value="{!v.richtext}" />
7</aura:component>

Initialize the rich text content in the client-side controller.

1({
2  init: function (cmp) {
3    var content = "<h1>Hello!</h1>";
4    cmp.set("v.richtext", content);
5  },
6});

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

1var rte = "<h1 style=\"color:blue;\">This is a blue heading</h1>";
2cmp.set("v.richtext", rte);

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

1<lightning:formattedRichText value="&lt;h1>TEST&lt;/h1>" />

The component sanitizes HTML tags passed to the value attribute to prevent XSS vulnerabilities. It also ensures 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 a client-side controller, those tags are removed and the text content is preserved. 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 using the h1 to h6 elements for headings and use mark to highlight text. For more information, see the W3C recommendations.

lightning:formattedRichText supports the following protocols.

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

URLs such as www.salesforce.com or salesforce.com are also displayed as links. All links, including those that don’t include a protocol, are displayed using the anchor tag with a target value of _blank. To display links with other target values, use lightning:formattedUrl 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:formattedRichText across all browsers. See list-style-position on MDN.