lightning:formattedRichText

lightning:formattedRichText コンポーネントは、リッチテキストを参照のみで表示します。リッチテキストとは、太字テキストの場合は <b>、下線付きテキストの場合は <u> などの HTML タグで書式設定されたテキストのことです。lightning:inputRichText コンポーネントを使用するか、クライアント側コントローラで値をプログラムで設定し、このコンポーネントにリッチテキストを渡すことができます。

次の例では、lightning:formattedRichText コンポーネントに結び付けられたリッチテキストエディタを作成します。初期化中にリッチテキストコンテンツが設定されます。

1<aura:component>
2    <aura:handler name="init" value="{! this }" action="{! c.init }" />
3    <aura:attribute name="richtext" type="String"/>
4    <!-- Rich text editor and formatted output -->
5    <lightning:inputRichText value="{!v.richtext}"/>
6    <lightning:formattedRichText value="{!v.richtext}" />
7</aura:component>

クライアント側コントローラでリッチテキストコンテンツを初期化します。

1({
2    init: function(cmp) {
3        var content = "<h1>Hello!</h1>";
4        cmp.set("v.richtext", content);
5    }
6})

値の定義で二重引用符を使用するには、\ 文字を使用してエスケープします。

1var rte = "<h1 style=\"color:blue;\">This is a blue heading</h1>";
2cmp.set("v.richtext", rte);

コンポーネントのマークアップで HTML タグを渡すには、タグを次のようにエスケープします。

1<lightning:formattedRichText value="&lt;h1>TEST&lt;/h1>" />

サポートされる HTML タグおよび属性

コンポーネントは、XSS の脆弱性を防止するために、value 属性に渡される HTML タグをサニタイズします。また、書式設定された出力が有効な HTML になるようにもします。たとえば、<div>My Title</h1> のようにタグが一致しない場合、コンポーネントは <div>My Title</div> を返します。

クライアント側コントローラでサポートされていないタグを設定した場合、それらのタグが削除され、テキストコンテンツは保持されます。サポートされている HTML タグは、a、abbr、acronym、address、b、br、big、blockquote、caption、cite、code、col、colgroup、del、div、dl、dd、dt、em、font、h1、h2、h3、h4、h5、h6、hr、i、img、ins、kbd、li、ol、p、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、data-fileid、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 です。

属性