リッチテキスト項目

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

1<!--Rich text demo-->
2  <ui:inputRichText isRichText="false" aura:id="inputRT" label="Rich Text Demo" 
3    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;"/>
4  <ui:button aura:id="outputButton" 
5    buttonTitle="Click to see what you put into the rich text field" 
6    label="Display" press="{!c.getInput}"/>
7  <ui:outputRichText aura:id="outputRT" value=" "/>

1/*Client-side controller*/
2  getInput : function(cmp) {
3    var userInput = cmp.find("inputRT").get("v.value");
4    var output = cmp.find("outputRT");
5    output.set("v.value", userInput);
6  }

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

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