Output Rich Text (Deprecated)

We recommend using Lightning Web Components whenever possible. When migrating to Lightning Web Components, use lightning-formatted-rich-text.

For more information, see Aura Components in the ui Namespace Are Deprecated.

A ui:outputRichText component represents formatted text and can be used to display input from a lightning:inputRichText or ui:inputRichText component. Using lightning:inputRichText is recommended since ui:inputRichText is no longer supported when Lightning Locker is enabled. Similarly, we recommend that you use lightning:formattedRichText instead of ui:outputRichText.

ui:outputRichText renders formatted text. For example, URLs and email addresses enclosed by anchor tags are displayed as hyperlinks.

This example sets bold text and binds the value to a lightning:inputRichText and ui:outputRichText component. The slds-text-longform class adds default spacing and list styling in your output.

1<aura:component>
2
3  <aura:attribute name="myVal" type="String" />
4
5  <aura:handler name="init" value="{! this }" action="{! c.init }" />
6
7  <lightning:inputRichText value="{!v.myVal}" />
8
9  <ui:outputRichText class="slds-text-longform" value="{!v.myVal}" />
10
11</aura:component>

During initialization, the value is set on both the lightning:inputRichText and ui:outputRichText component.

1({
2  init: function (cmp) {
3    cmp.set("v.myVal", "<b>Hello!</b>");
4  },
5});

ui:outputRichText supports the following HTML tags: a, b, br, big, blockquote, caption, cite, code, col, colgroup, 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.