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

リッチテキスト項目

ui:inputRichText は、リッチテキストを入力するための入力項目です。次のコードは、テキストエリアとボタンとして表示される、このコンポーネントの基本実装を示します。ボタンをクリックすると、ui:outputRichText コンポーネントの入力値を返すクライアント側のコントローラアクションが実行されます。この場合、値は「Aura」を太字で返し、「input rich text demo」を赤色で返します。

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--Rich text demo-->
18  <ui:inputRichText isRichText="false" aura:id="inputRT" label="Rich Text Demo" 
19    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;"/>
20  <ui:button aura:id="outputButton" 
21    buttonTitle="Click to see what you put into the rich text field" 
22    label="Display" press="{!c.getInput}"/>
23  <ui:outputRichText aura:id="outputRT" value=" "/>

1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/*Client-side controller*/
18  getInput : function(cmp) {
19    var userInput = cmp.find("inputRT").get("v.value");
20    var output = cmp.find("outputRT");
21    output.set("v.value", userInput);
22  }
23

このデモでは、isRichText="false" 属性によってコンポーネントが ui:inputTextArea コンポーネントに置き換えられます。この属性が設定されていない場合、以下のような WYSIWYG リッチテキストエディタが表示されます。

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

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

リッチテキスト項目

関連項目: