ui:inputRichText | Lightning コンポーネント開発者ガイド

デフォルトでは、ui:inputRichText はリッチテキストを入力するための WYSIWYG エディタを表示します。isRichText="false" 設定では、WYSIWYG エディタではなく ui:inputTextArea コンポーネントを使用します。

リッチテキストエディタの幅と高さは、ui:inputTextArea コンポーネントの幅と高さとは独立しています。isRichText="false" に設定した場合にコンポーネントの幅と高さを設定するには、cols および rows 属性を使用します。それ以外の場合は、width および height 属性を使用します。

ui:outputRichText は、CKEditor でサポートされる HTML タグのリストをサポートします。<script> などのタグは削除されます。

次の例では、テキストエリアと WYSIWYG エディタが表示されます。

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})

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`cols`	Integer	テキストエリアの幅。1 行に一度に表示する文字数で定義します。デフォルト値は「20」です。
`disabled`	Boolean	コンポーネントを無効な状態で表示するかどうかを指定します。デフォルト値は「false」です。
`height`	String	編集エリアの高さ (エディタのコンテンツを含む)。整数 (ピクセルサイズ) または CSS で定義されている長さの単位で指定できます。
`label`	String	表示ラベルコンポーネントのテキスト。
`labelClass`	String	表示ラベルコンポーネントの CSS クラス。
`maxlength`	Integer	入力項目に入力できる最大文字数。表示される HTML textarea 要素の maxlength 属性に対応します。
`placeholder`	String	デフォルトで表示されるテキスト。
`readonly`	Boolean	このテキストエリアを参照のみとして表示するかどうかを指定します。デフォルト値は「false」です。
`required`	Boolean	入力が必須かどうかを指定します。デフォルト値は「false」です。
`requiredIndicatorClass`	String	必須のインジケータコンポーネントの CSS クラス。
`resizable`	Boolean	テキストエリアのサイズを変更できるかどうかを指定します。デフォルトは true です。
`rows`	Integer	テキストエリアの高さ。一度に表示する行数で定義されます。デフォルト値は「2」です。
`updateOn`	String	処理されたイベントに updateOn 属性が設定されている場合、コンポーネントの値のバインドを更新します。デフォルト値は「change」です。
`value`	String	現在、値は入力項目にあります。
`width`	String	エディタ UI の外側の余白の幅。整数 (ピクセルサイズ) または CSS で定義されている単位で指定できます。isRichText が false に設定されている場合は、代わりに cols 属性を使用します。

イベント

イベント名	イベントタイプ	説明
`mouseup`	COMPONENT	ユーザがマウスボタンを放したことを示します。
`mousedown`	COMPONENT	ユーザがマウスキーを押したことを示します。
`mousemove`	COMPONENT	ユーザがマウスポインタを移動したことを示します。
`dblclick`	COMPONENT	コンポーネントがダブルクリックされたことを示します。
`mouseout`	COMPONENT	ユーザがマウスポインタをコンポーネントから移動したことを示します。
`click`	COMPONENT	コンポーネントがクリックされたことを示します。
`mouseover`	COMPONENT	ユーザがマウスポインタをコンポーネントに移動したことを示します。
`keyup`	COMPONENT	ユーザがキーボードキーを放したことを示します。
`keypress`	COMPONENT	ユーザがキーボードキーを押したままにしたことを示します。
`select`	COMPONENT	ユーザが選択を行ったことを示します。
`keydown`	COMPONENT	ユーザがキーボードキーを押してから放したことを示します。
`focus`	COMPONENT	コンポーネントにフォーカスが置かれたことを示します。
`blur`	COMPONENT	コンポーネントからフォーカスが離れたことを示します。
`validationError`	COMPONENT	コンポーネントに検証エラーがあることを示します。
`paste`	COMPONENT	ユーザがコンテンツをクリップボードから貼り付けたことを示します。
`change`	COMPONENT	コンポーネントのコンテンツまたは状況が変更されたことを示します。
`clearErrors`	COMPONENT	検証エラーをすべてクリアする必要があることを示します。
`cut`	COMPONENT	ユーザがコンテンツを切り取ってクリップボードに保存したことを示します。
`copy`	COMPONENT	ユーザがコンテンツをクリップボードにコピーしたことを示します。