lightning:formattedRichText

Displays rich text that's formatted with whitelisted tags and attributes. Other tags and attributes are removed and only their text content is displayed. This component requires API version 41.0 and later.

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 <b> 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.

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

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

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

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

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

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

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

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

Supported HTML Tags and Attributes

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, b, br, big, blockquote, caption, cite, code, col, colgroup, del, div, dl, dd, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, li, ol, p, 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.

Attributes

Attribute Name Attribute type Description Required?
body Component[] The body of the component. In markup, this is everything in the body of the tag.
class String A CSS class for the outer element, in addition to the component's base classes.
title String Displays tooltip text when the mouse moves over the element.
value String Sets the rich text to display.