Tilpasse verktøylinjegrupper i områdebyggeren

For egendefinerte komponenter kan du tilpasse kopier av standard verktøylinjegrupper som vises i verktøylinjen for områdebyggeren.

Du kan opprette din egen versjon av en standardkomponent som har et begrenset sett og er tilgjengelig i den egendefinerte koden. Tilpasninger påvirker ikke standardkomponentene.

Du kan opprette din egen versjon av standardkomponenten som har et begrenset sett og er tilgjengelig i den egendefinerte koden, men dette påvirker ikke noen av standardkomponentene.

Verktøylinjegrupper definerer hva du ser i verktøylinjen når du klikker på tittel- eller avsnittskomponenten for å redigere den. Du kan fjerne eller endre rekkefølgen for hva som støttes av tittel- eller avsnittskomponenten, men flere innpluggingsmoduler er ikke tillatt.

Når du skal tilpasse verktøylinjegrupper i områdebyggeren, må du bruke den samme syntaksen som CKEditor bruker for toolbarGroups-konfigurasjonen. Se https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic.

Tittel- og avsnittskomponenter støtter følgende grupper:

Avsnittskomponenten støtter også innpluggingsmodulene for bilder og tabeller.

  • "sett inn"

    • "bilde"

    • "tabell"

I tillegg kan du bruke radskilletegnet:

  • "/"

Merknad:

Hvis du definerer en hvilken som helst annen verdi i konfigurasjonen av verktøylinjegruppen, fjernes verdien før verktøylinjen for områdebyggeren blir opprettet. Du kan ikke angi "extraPlugins". Bare konfigurasjonen "navn"/"grupper" støttes. Alle "elementer"-oppføringer ignoreres. 

Hvis du for eksempel vil hindre at brukerne kan definere skrifter, farger, stiler eller størrelser, kan du oppdatere verktøylinjekonfigurasjonen slik. For id-verdiene må du angi egendefinerte verdier som er forskjellige fra standardverdiene.

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

Validering

Erstatt filen components.json med den forutgående koden, og rediger deretter området (oppfrisk nettleseren hvis du allerede redigerer).  Når du nå redigerer en tittelkomponent, viser den ikke lenger skriftstilene eller -fargene tilgjengelig for valg.  Avsnittskomponenten fortsetter å vise disse, og listen over tilgjengelige skriftstørrelser er begrenset til 16, 24 og 48.

Standard verktøylinjegrupper

Standard verktøylinjegrupper for tittel og avsnitt er følgende:

  • Tittel

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

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