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="<h1>TEST</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.
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. |