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

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

限定セットを備え、カスタム・タグで使用できる、すぐに使用可能なコンポーネントの独自のバージョンを作成できます。すぐに使用可能なコンポーネントにはどのようなカスタマイズも影響しません。

限定セットを備え、カスタム・タグで使用できる、すぐに使用可能なコンポーネントの独自のバージョンを作成できますが、すぐに使用可能なコンポーネントには影響しません。

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

サイト・ビルダー内のツールバー・グループをカスタマイズするには、CKEditorでtoolbarGroups構成に使用される構文と同じ構文を使用する必要があります。https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basicを参照してください。

タイトル・コンポーネントまたは段落コンポーネントは、次のグループをサポートしています:

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

  • "insert"

    • "image"

    • "table"

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

  • "/"

注:

ツールバー・グループ構成に他の値を設定した場合、サイト・ビルダー・ツールバーが作成される前に値が削除されます。"extraPlugins"は指定できません。"name"/"groups"構成のみサポートされます。"items"エントリは無視されます。 

たとえば、ユーザーがフォント、色、スタイルまたはサイズを定義することを禁止する場合、次のようにツールバー構成を更新できます。"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": "<custom-value>",
        "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"]
    }
]