ui:outputRichText

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

A ui:outputRichText component represents rich text and can be used to display input from a ui:inputRichText component.

For example, you can enter bold or colored text via a ui:inputRichText component and bind its value to a ui:outputRichText component, which results in the following HTML.

1<div class="uiOutputRichText">
2    <b>Aura</b>, <span style="color:red">input rich text demo</span>
3</div>

This example shows how you can bind data from a ui:inputRichText component.

1<aura:component>
2 <ui:inputRichText aura:id="inputRT" label="Rich Text Demo" labelPosition="hidden" cols="50" rows="5" value="&lt;b&gt;Aura&lt;/b&gt;, &lt;span style='color:red'&gt;input rich text demo&lt;/span&gt;"/>
3 <ui:button aura:id="outputButton" buttonTitle="Click to see what you put into the rich text field" label="Display" press="{!c.getInput}"/>
4    <ui:outputRichText aura:id="outputRT" value=" "/> 
5</aura:component>

1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18	getInput : function(cmp) {
19
20		var userInput = cmp.find("inputRT").get("v.value");
21		var output = cmp.find("outputRT");
22		output.set("v.value", userInput);
23	}
24})

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.

Events

Event Name	Event Type	Description
`mouseup`	COMPONENT	Indicates that the user has released the mouse button.
`mousedown`	COMPONENT	Indicates that the user has pressed a mouse key.
`mousemove`	COMPONENT	Indicates that the user has moved the mouse pointer.
`dblclick`	COMPONENT	Indicates that a component has been double-clicked.
`mouseout`	COMPONENT	Indicates that the user has moved the mouse pointer away from the component.
`click`	COMPONENT	Indicates that a component has been clicked.
`mouseover`	COMPONENT	Indicates that the user has moved the mouse pointer over the component.

Lightning Components Developer’s Guide

ui:outputRichText

Attributes

Events