ui:outputRichText

Displays formatted text including tags such as paragraph, image, and hyperlink, as specified in the value attribute.

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

<aura:component>
    <aura:attribute name="myVal" type="String" />
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <lightning:inputRichText value="{!v.myVal}"/>
    <ui:outputRichText value="{!v.myVal}"/>
</aura:component>

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

({
    init: function(cmp) {
        cmp.set('v.myVal', '<b>Hello!</b>');
    }
})

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.

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 style to be attached to the component. This style is added in addition to base styles output by the component.
linkify Boolean Indicates if the URLs in the text are set to render as hyperlinks.
value String The formatted text used for output.

Events

Event Name Event Type Description
dblclick COMPONENT The event fired when the user double-clicks the component.
mouseover COMPONENT The event fired when the user moves the mouse pointer over the component.
mouseout COMPONENT The event fired when the user moves the mouse pointer away from the component.
mouseup COMPONENT The event fired when the user releases the mouse button over the component.
mousemove COMPONENT The event fired when the user moves the mouse pointer over the component.
click COMPONENT The event fired when the user clicks on the component.
mousedown COMPONENT The event fired when the user clicks a mouse button over the component.