ui:inputRichText

By default, ui:inputRichText renders a WYSIWYG editor for entering rich text. Setting isRichText="false" uses the ui:inputTextArea component instead of a WYSIWYG editor.

The width and height of the rich text editor are independent of those on the ui:inputTextArea component. To set the width and height of the component when you set isRichText="false", use the cols and rows attributes. Otherwise, use the width and height attributes.

ui:outputRichText supports a list of HTML tags that are supported by CKEditor. Tags such as <script> are removed.

This example shows a text area and WYSIWYG editor.

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-1", "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

Events