Rich Text Fields

ui:inputRichText is an input field for entering rich text. The following code shows a basic implementation of this component, which is rendered as a text area and button. A button click runs the client-side controller action that returns the input value in a ui:outputRichText component. In this case, the value returns “Aura” in bold, and “input rich text demo” in red.

1<!--Rich text demo-->
2  <ui:inputRichText isRichText="false" aura:id="inputRT" label="Rich Text Demo" 
3    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;"/>
4  <ui:button aura:id="outputButton" 
5    buttonTitle="Click to see what you put into the rich text field" 
6    label="Display" press="{!c.getInput}"/>
7  <ui:outputRichText aura:id="outputRT" value=" "/>

1/*Client-side controller*/
2  getInput : function(cmp) {
3    var userInput = cmp.find("inputRT").get("v.value");
4    var output = cmp.find("outputRT");
5    output.set("v.value", userInput);
6  }

In this demo, the isRichText="false" attribute replaces the component with the ui:inputTextArea component. The WYSIWYG rich text editor is provided when this attribute is not set, as shown below.

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.