この文章は 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" 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})

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`value`	String	出力に使用されるリッチ形式テキスト。

イベント

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

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

ui:outputRichText

属性

イベント