サイト・ビルダーのツールバー・グループのカスタマイズ

カスタム・コンポーネントの場合、サイト・ビルダーのツールバーに表示されるデフォルトのツールバー・グループのコピーをカスタマイズできます。

制限付きセットがあり、カスタム・タグで使用可能な独自のバージョンのデフォルト・コンポーネントを作成できます。カスタマイズは、デフォルトのコンポーネントには影響しません。

制限付きセットを含む、カスタム・タグで使用できる独自のバージョンのデフォルト・コンポーネントを作成できますが、初期設定のコンポーネントには影響しません。

ツールバー・グループにより、タイトル・コンポーネントまたは段落コンポーネントを編集するためにクリックしたときにツールバー内に表示される内容を定義します。タイトルまたは段落コンポーネントでサポートされている内容を削除したり並べ替えたりできますが、追加のプラグインは許可されません。

サイト・ビルダーのツールバー・グループをカスタマイズするには、toolbarGroups構成に使用するリッチ・テキスト・エディタと同じ構文を使用する必要があります。「TinyMCE構文」がサポートされています。

"basicstyles" - 太字/イタリック/下線に制限されます
"styles" - フォント・スタイル
"colors" - テキストおよび背景色
"undo" - リッチ・テキスト・エディタで現在のインスタンスを元に戻す/やり直す
"links" - ダイアログをリンクするためのカスタム・プラグイン
"paragraph" - 箇条書き/番号付きリストとインデント・サポート
- "list"
- "indent"
"align" - 左揃え/右揃え/中央揃え
"cleanup" - 選択したテキストのスタイルの削除

段落コンポーネントは、imageおよびtable insertプラグインもサポートしています

"insert"
- "image"
- "表"

また、行セパレータ・エントリを使用できます:

ノート:

たとえば、ユーザーがフォント、色、スタイルまたはサイズを定義できないようにする場合は、次のようにツールバーの構成を更新します。 Id値に対して、即時利用可能な値とは異なるカスタム値を指定する必要があります。

[{
    "name": "<category name>",
    "list": [{
        "type": "scs-title",
        "id": "<custom-value>",
        "config": {
            "toolbarGroups": [{
                    "name": "basicstyles",
                    "groups": ["basicstyles"]
                }, {
                    "name": "undo",
                    "groups": ["undo"]
                },
                "/", {
                    "name": "links",
                    "groups": ["links"]
                }, {
                    "name": "paragraph",
                    "groups": ["list", "indent"]
                },
                "/", {
                    "name": "align",
                    "groups": ["align"]
                },
                {
                    "name": "insert",
                    "groups": ["image", "table"]
                }, {
                    "name": "cleanup",
                    "groups": ["cleanup"]
                }
            ]
        }
    }, {
        "type": "scs-paragraph",
        "id": "<scs-paragraph>",
        "config": {
            "fontSize_sizes": "16/16px;24/24px;48/48px;"
        }
    }]
}]

検証

上記のコードにcomponents.jsonファイルを置き換えて、サイトを編集します(既に編集している場合はブラウザを更新してください)。この時点で、タイトル・コンポーネントを編集すると、選択するフォント・スタイルや色が表示されなくなります。段落コンポーネントでは引き続きこれらが表示され、使用可能なフォント・サイズのリストは16、24および48に制限されます。

デフォルトのツールバー・グループ

タイトルおよび段落のデフォルトのツールバー・グループは、次のとおりです:

タイトル

[{
        "name": "basicstyles",
        "groups": ["basicstyles"]
    }, {
        "name": "styles",
        "groups": ["styles"]
    }, {
        "name": "colors",
        "groups": ["colors"]
    }, {
        "name": "undo",
        "groups": ["undo"]
    },
    "/", {
        "name": "links",
        "groups": ["links"]
    }, {
        "name": "paragraph",
        "groups": ["list", "indent"]
    }, {
        "name": "align",
        "groups": ["align"]
    }, {
        "name": "cleanup",
        "groups": ["cleanup"]
    }
]

段落

[{
        "name": "basicstyles",
        "groups": ["basicstyles"]
    }, {
        "name": "styles",
        "groups": ["styles"]
    }, {
        "name": "colors",
        "groups": ["colors"]
    }, {
        "name": "undo",
        "groups": ["undo"]
    },
    "/", {
        "name": "links",
        "groups": ["links"]
    }, {
        "name": "paragraph",
        "groups": ["list", "indent"]
    }, {
        "name": "align",
        "groups": ["align"]
    }, {
        "name": "insert",
        "groups": ["image", "table"]
    }, {
        "name": "cleanup",
        "groups": ["cleanup"]
    }
]