lightning:inputRichText (ベータ)

lightning:inputRichText コンポーネントは、Quill.js ライブラリに基づいて、ユーザがリッチテキストを追加、編集、書式設定、削除できるリッチテキストエディタを作成します。ツールバー設定が異なる複数のリッチテキストエディタを作成できます。リッチコンテンツのエディタへの貼り付けは、ツールバーでその機能が使用できる場合にサポートされています。たとえば、ツールバーに太字ボタンがあれば、太字テキストを貼り付けることができます。ツールバーボタンが多くてツールバーの幅に収まらない場合は、オーバーフローメニューが提供されます。

このコンポーネントは、Lightning Design System のリッチテキストエディタからスタイル設定を継承します。

次の例では、リッチテキストエディタを作成し、初期化中にそのコンテンツを設定します。

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

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

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

デフォルトでは、ツールバーには、フォントファミリおよびサイズメニューと、[太字]、[斜体]、[下線]、[取り消し線] ボタンが含まれるテキスト書式設定ブロックが表示されます。また、[箇条書き]、[段落番号]、[インデント]、[アウトデント] ボタンが含まれる本文書式設定ブロックと、[テキストを左揃え]、[テキストを中央揃え]、[テキストを右揃え] ボタンが含まれるテキスト整列ブロックも表示されます。[書式設定を削除] ボタンも使用できます。このボタンは、常にツールバーの最後尾に単独で表示されます。

disabledCategories 属性を使用して、カテゴリごとにボタンを無効にすることができます。次のカテゴリがあります。

1. FORMAT_FONT: フォントファミリおよびサイズメニュー
2. FORMAT_TEXT: テキスト書式設定ボタン
3. FORMAT_BODY: 本文書式設定ボタン
4. ALIGN_TEXT: テキスト整列ボタン
5. REMOVE_FORMATTING: 書式設定削除ボタン

フォントメニューで使用できるフォントは、Arial、Courier、Garamond、Salesforce Sans、Tahoma、Times New Roman、Verdana です。フォントのデフォルトは、Salesforce Sans のサイズ 12px です。サポートされているフォントサイズは、8、9、10、11、12、14、16、18、20、22、24、26、28、36、48、72 です。エディタでテキストをコピーして貼り付ける場合、フォントメニューで使用できるフォントである場合のみ、フォントが保持されます。

lightning:inputRichText には、検証は組み込まれていませんが、独自の検証ロジックに関連付けることができます。リッチテキストエディタの境界線の色を赤に変更するには、valid 属性を false に設定します。次の例は、リッチテキストコンテンツが空または未定義であるかどうかを確認します。

1<aura:component>
2    <aura:attribute name="myVal" type="String" />
3    <aura:attribute name="errorMessage" type="String" default="You haven't composed anything yet."/>
4    <aura:attribute name="validity" type="Boolean" default="true"/>
5    <lightning:inputRichText value="{!v.myVal}" placeholder="Type something interesting" messageWhenBadInput="{!v.errorMessage}" valid="{!v.validity}"/>
6    <lightning:button name="validate" label="Validate" onclick="{!c.validate}"/>
7</aura:component>

クライアント側コントローラで、リッチテキストエディタの有効性を切り替え、無効な場合はエラーメッセージを表示します。

1({
2    validate: function(cmp) {
3        if(!cmp.get("v.myVal")){
4            cmp.set("v.validity", false);
5        }
6        else{
7            cmp.set("v.validity", true);
8        }
9    }
10})

コンポーネントは、XSS の脆弱性を防止するために、value 属性に渡される HTML タグをサニタイズします。一部の 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、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 です。

テーブルの作成、画像の挿入、リンクのためのツールバーボタンはありませんが、それらをプログラムで作成するか、それらの要素をコピーして貼り付けることで、エディタ内で書式設定が保持されます。

このコンポーネントは、次のメソッドをサポートします。

focus(): フォーカスを要素に設定します。