Werkbalkgroepen aanpassen in de sitebuilder

Voor aangepaste componenten kunt u kopieën van kant-en-klare werkbalkgroepen aanpassen die worden weergegeven op de werkbalk van de sitebuilder.

U kunt uw eigen versie van een kant-en-klare component maken die een beperkte set heeft en beschikbaar is in de aangepaste tag. Aanpassingen zijn niet van invloed op de kant-en-klare componenten.

U kunt uw eigen versie van de kant-en-klare component maken die een beperkte set heeft en beschikbaar is in de aangepaste tag, maar dit is niet van invloed op de kant-en-klare componenten.

Met werkbalkgroepen wordt gedefinieerd wat u ziet op de werkbalk wanneer u klikt op de titel- of alineacomponent om deze te bewerken. U kunt verwijderen en herordenen wat wordt ondersteund met de titel- of alineacomponent, maar aanvullende plug-ins zijn niet toegestaan.

Als u werkbalkgroepen in de sitebuilder wilt aanpassen, moet u dezelfde syntaxis gebruiken als met CKEditor wordt gebruikt voor de configuratie toolbarGroups. Zie voor meer informatie: https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic.

In de titel- en alineacomponenten worden de volgende groepen ondersteund:

In de paragraph-component worden ook de plug-ins voor het invoegen van afbeeldingen en tabellen ondersteund:

  • "insert"

    • "image"

    • "table"

Verder kunt u de ingang voor het rijscheidingsteken gebruiken:

  • "/"

Opmerking:

Als u een andere waarde instelt in de configuratie van de groepswerkbalk, wordt deze waarde verwijderd voordat de werkbalk van de sitebuilder wordt gemaakt. U kunt geen "extraPlugins" leveren. Alleen de configuratie "name"/"groups" wordt ondersteund. Alle "items"-invoer wordt genegeerd. 

Als u bijvoorbeeld wilt voorkomen dat de gebruikers lettertypen, kleuren, stijlen of grootten definiëren, kunt u de werkbalkconfiguratie als volgt bijwerken. Voor de "id"-waarden moet u aangepaste waarden opgeven die verschillen van de kant-en-klare waarden.

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

Validatie

Vervang het bestand components.json door de voorgaande code en bewerk uw site vervolgens (vernieuw de browser als u al bezig bent met bewerken). Op dit punt worden, wanneer u een titelcomponent bewerkt, de lettertypestijlen of kleuren niet meer voor selectie getoond. In de alineacomponent worden ze nog wel getoond, en de lijst met beschikbare lettertypegrootten is beperkt tot 16, 24 en 48.

Standaardwerkbalkgroepen

De standaardwerkbalkgroepen voor 'Titel' en 'Alinea' volgen:

  • Titel

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

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