リッチ テキスト エディターの設定
開発者の方なら、WYSIWYGエディターの機能によっては使い方を誤ると、ブランドの一貫性を確保できなくなり、コンテンツのデザインとフローに影響が生じたという経験があるはずです。カスタムモジュール内のリッチ テキスト エディターの機能として、fields.jsonファイルの中のenabled_featuresプロパティーを使用して、設定ツールバーのコンポーネントを開発者が削除できる機能が用意されました。
注：以下は、ローカル開発においてリッチ テキスト フィールドを使用するカスタムモジュールにのみ該当します。この機能を使用しても、リッチ テキスト エディターから削除されたオプションの機能が無効になることはなく、オプションが表示されなくなるだけです。既存のコンテンツが影響を受けないように下位互換性を維持することが目的です。
リッチ テキスト フィールド オブジェクトを使用しているfields.jsonファイルの中で、以下のように、有効なツールバーオプションをenabled_featuresプロパティーの配列に追加することにより、特定の機能を有効化できます。
// Rich text field with only Bold, Link, and Image available in the Toolbar
{
"name" : "description",
"label" : "Description",
"required" : false,
"locked" : false,
"type" : "richtext",
"default" : null,
"enabled_features" : ["bold","link","image"]
}これにより制作担当者には、以下の画像のように、追加されたオプションのみが有効化された状態でリッチ テキスト エディターが表示されます。
注：エディターの既定のスタイルに戻す［スタイルをクリア］ボタンなど、一部の機能は常に有効で、削除はできません。enabled_featuresプロパティーを省略すると、全ての機能が表示されます。
以下に、enabled_featuresプロパティーを使用する場合に、個別に有効化できる機能を示します。
| オプション | Description |
|---|---|
colors
| テキスト色と背景色のコントロール。 |
fonts
| フォントファミリーとフォントサイズのコントロール。 |
indents
| アウトデントとインデントのコントロール。 |
lists
| 箇条書きと番号リストのコントロール。 |
standard_emphasis
| 太字、イタリック、下線のコントロール。 |
advanced_emphasis
| 打ち消し線、上付き文字、下付き文字、コード書式設定のコントロール。 |
glyphs
| 絵文字、特殊文字、アイコンのコントロール。 |
| オプション | Description |
|---|---|
block
| スタイル切り替えのドロップダウンメニューを表示します。 |
font_family
| フォント切り替えのドロップダウンメニューを表示します。 |
font_size
| フォントサイズのドロップダウンメニューを表示します。 |
bold
| 太字ボタンを表示します。 |
italic
| イタリックのボタンを表示します。 |
underline
| 下線ボタンを表示します。 |
text_color
| テキスト色ボタンを表示します。 |
background_color
| 背景色ボタンを表示します。 |
alignment
| 位置合わせボタンを表示します。 |
bulleted_list
| 箇条書きリストボタンを表示します。 |
numbered_list
| 番号リストボタンを表示します。 |
lineheight
| 行の高さボタンを表示します。 |
outdent
| アウトデントボタンを表示します。 |
indent
| インデントボタンを表示します。 |
strikethrough
| 取り消し線ボタンを表示します。 |
superscript
| 上付き文字ボタンを表示します。 |
subscript
| 下付き文字ボタンを表示します。 |
code_format
| コード書式設定ボタンを表示します。 |
| オプション | Description |
|---|---|
link
| リンクボタンを表示します。 |
image
| 画像ボタンを表示します。 |
emoji
| 絵文字ボタンを表示します。 |
personalize
| パーソナライズのツールバー項目を表示します。 |
cta
| 挿入メニューの下にCTAメニュー項目を表示します。 |
embed
| 挿入メニューの下に埋め込みメニュー項目を表示します。 |
video
| 挿入メニューの下に動画メニュー項目を表示します。 |
table
| 挿入メニューの下にテーブルメニュー項目を表示します。 |
charmap
| 挿入メニューの下に特殊文字メニュー項目を表示します。 |
anchor
| 挿入メニューの下にアンカーメニュー項目を表示します。 |
hr
| 挿入メニューの下に水平線メニュー項目を表示します。 |
nonbreaking_space
| 挿入メニューの下に、改行しないスペース（nbsp）のメニュー項目を表示します。 |
icon
| 挿入メニューの下にアイコンメニュー項目を表示します。 |
| オプション | Description |
|---|---|
source_code
| 詳細メニューの下にソース コード メニュー項目を表示します。 |
visual_blocks
| 詳細メニューの下にブロック表示メニュー項目を表示します。 |
貴重なご意見をありがとうございました。