リッチ・テキスト・エディタのツールバーのカスタマイズ
アセット・タイプに大きいテキスト・フィールドを追加し、リッチテキスト・エディタに外観を設定したら、カスタム・ツールバーを作成できます。
ツールバーには標準ツールバーのグループおよびオプションが事前に移入されており、プレビューが表示されます。
ツールバーをカスタマイズするには、JSONタブをクリックし、次の例のような構文を使用してJSON構成を編集します。
大きなテキスト・フィールドでは次のアクションおよびグループがサポートされます:
アクション: Anchor、BGColor、Blockquote、Bold、BulletedList、Copy、Cut、Font、FontSize、Format、HorizontalRule、Image、Indent、Italic、JustifyBlock、JustifyCenter、JustifyLeft、JustifyRight、Link、Maximize、NumberedList、Outdent、Paste、PasteText、Redo、RemoveFormat、Source、Strike、Subscript、Superscript、Table、TextColor、Underline、Undo、Unlink
グループ:
- 基本スタイル-太字、斜体、下線、ストライク、下付き文字、上付き文字
- styles-Format、Font、FontSize
- clipboard-Cut、Copy、Paste、PasteText
- colors-TextColor、BGColor
- undo-Undo、REDO
- links-Link、Unlink、Anchor
- paragraph-
- list-BulletedList、NumberedList
- インデント、インデント
- blocks-Blockquote
- align-JustifyLeft、JustifyBlock、JustifyRight、JustifyCenter
- insert-
- image-Image
- table-Table
- horizontalrule-HorizontalRule
- mode-Source
- tools:最大化(全画面表示)
- cleanup-RemoveFormat
また、行セパレータ・エントリを使用することもできます: "/"
ノート:
toolbarGroup構成で他の値を設定すると、コンテンツ・エディタのツールバーが作成される前に値が削除されます。 extraPluginsは指定できません。 また、toolbarGroups構成が使用されている場合、"name"/"groups"はサポートされますが、toolbar構成が使用されている場合は、"name"/"items"がサポートされます。
プロパティには、toolbarGroupsおよびremoveButtons、またはtoolbarのいずれかを使用できます。 次の例を参照してください。
例23-1 オプション1: "toolbarGroups"および"removeButtons"
{
"toolbarGroups": [
{"name": "basicstyles"},
{"name": "styles"},
{"name": "colors"},
{"name": "clipboard"},
"/",
{"name": "links"},
{"name": "insert"},
{"name": "paragraph", "groups": ["list", "indent"]},
{"name": "align"},
{"name": "undo"},
{"name": "cleanup"},
{"name": "mode"},
{"name": "tools"}
],
"removeButtons": "Subscript, Superscript, Anchor, Copy, Cut"
}例23-2 オプション2: "toolbar"
{
"toolbar": [
{"name": "basicstyles", "items": ["Bold", "Italic", "Underline", "Strike", "Subscript", "Superscript", "-", "RemoveFormat"]},
{"name": "paragraph", "items": ["NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"]},
{"name": "links", "items": ["Link", "Unlink", "Anchor"]},
{"name": "insert", "items": ["Image", "Table"]},
"/",
{"name": "styles", "items": [Format", "Font", "FontSize"]},
{"name": "colors", "items": ["TextColor", "BGColor"]},
{"name": "tools", "items": ["Maximize"]}
]
}