ui:outputRichText

ui:outputRichText コンポーネントは、書式設定済みテキストを表し、lightning:inputRichText または ui:inputRichText コンポーネントからの入力の表示に使用できます。ui:inputRichText は、LockerService が有効化されている場合にサポートされなくなったため、lightning:inputRichText を使用することをお勧めします。ui:outputRichText は、書式設定済みテキストを表示します。たとえば、アンカータグで囲まれた URL やメールアドレスはハイパーリンクとして表示されます。

次の例では、太字テキストを設定して、値を lightning:inputRichText および ui:outputRichText コンポーネントにバインドします。

1<aura:component>
2    <aura:attribute name="myVal" type="String" />
3    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
4    
5    <lightning:inputRichText value="{!v.myVal}"/>
6    <ui:outputRichText value="{!v.myVal}"/>
7</aura:component>

初期化時に、lightning:inputRichText と ui:outputRichText の両方のコンポーネントに値が設定されます。

1({
2    init: function(cmp) {
3        cmp.set('v.myVal', '<b>Hello!</b>');
4    }
5})

ui:outputRichText でサポートされている HTML タグは、a、b、br、big、blockquote、caption、cite、code、col、colgroup、del、div、em、h1、h2、h3、hr、i、img、ins、kbd、li、ol、p、param、pre、q、s、samp、small、span、strong、sub、sup、table、tbody、td、tfoot、th、thead、tr、tt、u、ul、var、strike です。

サポートされている HTML 属性は、accept、action、align、alt、autocomplete、background、bgcolor、border、cellpadding、cellspacing、checked、cite、class、clear、color、cols、colspan、coords、datetime、default、dir、disabled、download、enctype、face、for、headers、height、hidden、high、href、hreflang、id、ismap、label、lang、list、loop、low、max、maxlength、media、method、min、multiple、name、noshade、novalidate、nowrap、open、optimum、pattern、placeholder、poster、preload、pubdate、radiogroup、readonly、rel、required、rev、reversed、rows、rowspan、spellcheck、scope、selected、shape、size、span、srclang、start、src、step、style、summary、tabindex、target、title、type、usemap、valign、value、width、xmlns です。

属性

イベント