Lightning Components Developer Guide
jNewer Version Available
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" value="<script>test</script> <b>rich text</b>" />
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"/>
5</aura:component>1({
2 getInput : function(cmp) {
3
4 var userInput = cmp.find("inputRT").get("v.value");
5 var output = cmp.find("outputRT");
6 output.set("v.value", userInput);
7 }
8})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. | |
| value | String | The richly-formatted text used for output. |
Events
| Event Name | Event Type | Description |
|---|---|---|
| dblclick | COMPONENT | Indicates that a component has been double-clicked. |
| mouseover | COMPONENT | Indicates that the user has moved the mouse pointer over the component. |
| mouseout | COMPONENT | Indicates that the user has moved the mouse pointer away from the component. |
| mouseup | COMPONENT | Indicates that the user has released the mouse button. |
| mousemove | COMPONENT | Indicates that the user has moved the mouse pointer. |
| click | COMPONENT | Indicates that a component has been clicked. |
| mousedown | COMPONENT | Indicates that the user has pressed a mouse key. |