Lightning コンポーネント開発者ガイド
jlightning:inputRichText (ベータ)
lightning:inputRichText コンポーネントは、Quill.js ライブラリに基づいて、ユーザがリッチテキストを追加、編集、書式設定、削除できるリッチテキストエディタを作成します。ツールバー設定が異なる複数のリッチテキストエディタを作成できます。リッチコンテンツのエディタへの貼り付けは、ツールバーでその機能が使用できる場合にサポートされています。たとえば、ツールバーに太字ボタンがあれば、太字テキストを貼り付けることができます。ツールバーボタンが多くてツールバーの幅に収まらない場合は、オーバーフローメニューが提供されます。
このコンポーネントは、Lightning Design System のリッチテキストエディタからスタイル設定を継承します。
次の例では、リッチテキストエディタを作成し、初期化中にそのコンテンツを設定します。
クライアント側コントローラでリッチテキストコンテンツを初期化します。
デフォルトでは、ツールバーには、フォントファミリおよびサイズメニューと、[太字]、[斜体]、[下線]、[取り消し線] ボタンが含まれるテキスト書式設定ブロックが表示されます。また、[箇条書き]、[段落番号]、[インデント]、[アウトデント] ボタンが含まれる本文書式設定ブロックと、[テキストを左揃え]、[テキストを中央揃え]、[テキストを右揃え] ボタンが含まれるテキスト整列ブロックも表示されます。[書式設定を削除] ボタンも使用できます。このボタンは、常にツールバーの最後尾に単独で表示されます。
disabledCategories 属性を使用して、カテゴリごとにボタンを無効にすることができます。次のカテゴリがあります。
- FORMAT_FONT: フォントファミリおよびサイズメニュー
- FORMAT_TEXT: テキスト書式設定ボタン
- FORMAT_BODY: 本文書式設定ボタン
- ALIGN_TEXT: テキスト整列ボタン
- 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 に設定します。次の例は、リッチテキストコンテンツが空または未定義であるかどうかを確認します。
クライアント側コントローラで、リッチテキストエディタの有効性を切り替え、無効な場合はエラーメッセージを表示します。
リッチテキストエディタでは、WYSIWYG インターフェースのみが提供されます。エディタを使用して HTML タグを編集することはできませんが、value 属性で HTML タグを設定できます。Web ページまたは別のソースからコンテンツをコピーしてエディタに貼り付けると、サポートされていないタグは削除されます。有効なツールバーボタンまたはメニューに対応する書式設定のみが保持されます。たとえば、FORMAT_TEXT カテゴリを無効にすると、[太字]、[斜体]、[下線]、[取り消し線] ボタンが使用できなくなります。さらに、FORMAT_TEXT カテゴリを無効にすると、エディタで太字、斜体、下線、取り消し線テキストを貼り付けることはできません。サポートされていないタグで囲まれていたテキストは、プレーンテキストとして保持されます。ただし、テーブル、画像、およびリンクは、対応するツールバーボタンやメニューがない場合でも、エディタでの貼り付けと value 属性を介した設定を行うことができます。
コンポーネントは、XSS の脆弱性を防止するために、value 属性に渡される HTML タグをサニタイズします。ツールバーで使用できる機能に対応する HTML タグのみがサポートされています。クライアント側コントローラでサポートされていないタグを設定した場合、それらのタグが削除され、テキストコンテンツは保持されます。サポートされている HTML タグは、a、b、col、colgroup、em (i に変換)、h1、h2、h3、h4、h5、h6、i、img、li、ol、p、q、s、strike (s に変換)、strong、table、tbody、td、tfoot、th、thead、tr、u、ul、strike です。
div タグと span タグで囲まれたテキストを貼り付けると、それらのタグが p タグに変換されます。たとえば、次ようなテキストをエディタで貼り付けまたは設定するとします。
エディタは次のマークアップを返します。
font-weight:bold 書式設定は [太字] ツールバーボタンに対応するため、保持されて b タグに変換されています。マークアップでは、色の書式設定は削除されます。
使用上の考慮事項テーブルの作成、画像の挿入、リンクのためのツールバーボタンはありませんが、それらをプログラムで作成するか、それらの要素をコピーして貼り付けることで、エディタ内で書式設定が保持されます。
メソッドこのコンポーネントは、次のメソッドをサポートします。
focus(): フォーカスを要素に設定します。
認証
| 属性名 | 属性型 | 説明 | 必須 |
|---|---|---|---|
| accesskey | String | 要素の有効化またはフォーカス設定のためのショートカットキーを指定します。 | |
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 | |
| disabled | Boolean | エディタが無効かどうかを示します。この値のデフォルトは false です。 | |
| disabledCategories | List | ツールバーから削除するボタンカテゴリのカンマ区切りのリスト。 | |
| messageWhenBadInput | String | valid が false の場合に表示されるエラーメッセージ。 | |
| onblur | Action | 要素がフォーカスを解放したときにトリガされるアクション。 | |
| onfocus | Action | 要素にフォーカスが設定されたときにトリガされるアクション。 | |
| placeholder | String | 項目が空の場合に表示されるテキスト。 | |
| tabindex | Integer | 要素のタブ順序を指定します (タブボタンがナビゲーションに使用される場合)。 | |
| valid | Boolean | エディタコンテンツが有効かどうかを示します。無効の場合、slds-has-error クラスが追加されます。この値のデフォルトは true です。 | |
| value | String | リッチテキストエディタ内の HTML コンテンツ。 | |
| variant | String | バリエーションによってツールバーの外観が変更されます。使用できるバリエーションは、bottom-toolbar です。 |