Personnalisation des groupes de barre d'outils dans le générateur de site

Pour les composants personnalisés, vous pouvez personnaliser les copies de groupes de barre d'outils prêts à l'emploi affichés dans la barre d'outils du générateur de site.

Vous pouvez créer votre propre version d'un composant prêt à l'emploi qui contient un ensemble restreint et qui est disponible sur la balise personnalisée. Toutes les personnalisations n'ont pas une incidence sur les composants prêts à l'emploi.

Vous pouvez créer votre propre version du composant prêt à l'emploi qui contient un ensemble restreint et qui est disponible sur la balise personnalisée. Cette création n'aura aucune incidence sur les composants prêts à l'emploi.

Les groupes de barre d'outils définissent ce que vous voyez dans la barre d'outils lorsque vous cliquez sur le composant de titre ou de paragraphe pour le modifier. Vous pouvez enlever ou réorganiser les éléments pris en charge par le composant de titre ou de paragraphe, mais les modules d'extension supplémentaires ne sont pas autorisés.

Pour personnaliser les groupes de barre d'outils dans le générateur de site, vous devez employer la même syntaxe que celle utilisée par CKEditor pour sa configuration toolbarGroups. Reportez-vous à https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic.

Les composants de titre et de paragraphe prennent en charge les groupes suivants :

"basicstyles" : limité au style Gras/Italique/Souligné https://ckeditor.com/cke4/addon/basicstyles
"styles" : styles de police https://docs.ckeditor.com/ckeditor4/latest/guide/dev_styles.html
"colors" : couleurs de texte et d'arrière-plan https://docs.ckeditor.com/ckeditor4/latest/guide/dev_colorbutton.html
"undo" : annulation/rétablissement de l'instance en cours dans CKEditor
"links" : module d'extension personnalisé pour créer un lien vers la boîte de dialogue
"paragraph" : prise en charge des listes à puces/numérotées et de la mise en retrait
- "list"
- "indent"
"align" : alignement à gauche/à droite/au centre
"cleanup" : suppression de tous les styles appliqués au texte sélectionné

Le composant de paragraphe prend également en charge les modules d'extension d'insertion de tableau et d'image.

"insert"
- "image"
- "table"

En outre, vous pouvez utiliser l'entrée de séparateur de ligne :

Remarque :

Si vous définissez une autre valeur dans la configuration du groupe de barre d'outils, elle sera enlevée avant la création de la barre d'outils du générateur de site. Vous ne pouvez pas indiquer "extraPlugins". Seule la configuration "name"/"groups" est prise en charge. Toute entrée "items" sera ignorée.

Par exemple, si vous voulez empêcher les utilisateurs de définir des polices, des couleurs, des styles ou des tailles, vous pouvez mettre à jour la configuration de barre d'outils comme suit. Pour les valeurs "id", vous devez indiquer des valeurs personnalisées différentes des valeurs prêtes à l'emploi.

[{
    "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;"
        }
    }]
}]

Validation

Remplacez votre fichier components.json par le code précédent, puis modifiez votre site (si vous avez déjà commencé à le modifier, actualisez le navigateur). A ce stade, lorsque vous modifiez un composant de titre, ce dernier n'affiche plus les styles ou les couleurs de police pour la sélection. Le composant de paragraphe continuera de les afficher et la liste des tailles de police disponibles sera limitée à 16, 24 et 48.

Groupes de barre d'outils par défaut

Les groupes de barre d'outils par défaut pour les composants de titre et de paragraphe sont les suivants :

Titre

[{
        "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"]
    }
]

Paragraphe

[{
        "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"]
    }
]