この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

ui:outputRichText

value 属性の指定に従って、パラグラフ、画像、ハイパーリンクなど、タグを含むリッチ形式テキストを表示します。

ui:outputRichText コンポーネントは、リッチテキストを表し、ui:inputRichText コンポーネントからの入力の表示に使用できます。

たとえば、ui:inputRichText コンポーネントを介して太字や色付きのテキストを入力し、その値を ui:outputRichText コンポーネントにバインドできます。結果は次の HTML のようになります。

1<div class="uiOutputRichText">
2    <b>Aura</b>, <span style="color:red">input rich text demo</span>
3</div>

次の例は、ui:inputRichText コンポーネントのデータをバインドする方法を示します。

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-2", "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 スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。

イベント

イベント名	イベントタイプ	説明
`mouseup`	COMPONENT	ユーザがマウスボタンを放したことを示します。
`mousedown`	COMPONENT	ユーザがマウスキーを押したことを示します。
`mousemove`	COMPONENT	ユーザがマウスポインタを移動したことを示します。
`dblclick`	COMPONENT	コンポーネントがダブルクリックされたことを示します。
`mouseout`	COMPONENT	ユーザがマウスポインタをコンポーネントから移動したことを示します。
`click`	COMPONENT	コンポーネントがクリックされたことを示します。
`mouseover`	COMPONENT	ユーザがマウスポインタをコンポーネントに移動したことを示します。

Lightning コンポーネント開発者ガイド

ui:outputRichText

属性

イベント