ui:inputRichText | Lightning Components Developer Guide

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 placeholder attribute is supported only when you set isRichText="false".

1<ui:inputRichText aura:id="inputRT" label="Rich text demo with basic toolbar" />

Tags such as <script> are removed from the component. A list of supported HTML tags is available in the JavaScript helper of the ui:outputRichText component.

This example retrieves the value of a ui:inputRichText component and displays it using ui:outputRichText.

1<aura:component>
2 <ui:inputRichText aura:id="inputRT" label="Rich Text Demo" value="&lt;script&gt;test&lt;/script&gt; &lt;b&gt;rich text&lt;/b&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"/>     
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
`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.
`cols`	Integer	The width of the text area, which is defined by the number of characters to display in a single row at a time. Default value is “20”.
`disabled`	Boolean	Specifies whether the component should be displayed in a disabled state. Default value is "false".
`height`	String	The height of the editing area (that includes the editor content). This can be an integer, for pixel sizes, or any CSS-defined length unit.
`label`	String	The text of the label component
`labelClass`	String	The CSS class of the label component
`maxlength`	Integer	The maximum number of characters that can be typed into the input field. Corresponds to the maxlength attribute of the rendered HTML textarea element.
`placeholder`	String	The text that is displayed by default.
`readonly`	Boolean	Specifies whether the text area should be rendered as read-only. Default value is “false”.
`required`	Boolean	Specifies whether the input is required. Default value is "false".
`requiredIndicatorClass`	String	The CSS class of the required indicator component
`resizable`	Boolean	Specifies whether or not the textarea should be resizable. Defaults to true.
`rows`	Integer	The height of the text area, which is defined by the number of rows to display at a time. Default value is “2”.
`updateOn`	String	Updates the component's value binding if the updateOn attribute is set to the handled event. Default value is "change".
`value`	String	The value currently in the input field.
`width`	String	The editor UI outer width. This can be an integer, for pixel sizes, or any CSS-defined unit. If isRichText is set to false, use the cols attribute instead.

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.
`select`	COMPONENT	Indicates that the user has made a selection.
`blur`	COMPONENT	Indicates that a component has been put out of focus.
`focus`	COMPONENT	Indicates that a component has been put on focus.
`keypress`	COMPONENT	Indicates that the user has pressed and held down a keyboard key.
`keyup`	COMPONENT	Indicates that the user has released a keyboard key.
`keydown`	COMPONENT	Indicates that the user has pressed and released a keyboard key.
`cut`	COMPONENT	Indicates that the user has cut content to the clipboard.
`validationError`	COMPONENT	Indicates that the component has validation error(s).
`clearErrors`	COMPONENT	Indicates that any validation error should be cleared.
`change`	COMPONENT	Indicates that the content of a component or the state has changed.
`copy`	COMPONENT	Indicates that the user has copied content to the clipboard.
`paste`	COMPONENT	Indicates that the user has pasted content from the clipboard.