Personalizzare i gruppi della barra degli strumenti in SiteBuilder

Per i componenti personalizzati è possibile personalizzare copie dei gruppi integrati visualizzati nella barra degli strumenti di SiteBuilder.

È possibile creare la propria versione di un componente integrato che disponga di un set limitato e sia disponibile nella tag personalizzata. Tutte le personalizzazioni effettuate non hanno effetto sui componenti integrati.

È possibile creare la propria versione di un componente integrato che disponga di un set limitato e sia disponibile nella tag personalizzata, ma questa operazione non avrà effetto sui componenti integrati disponibili.

I gruppi della barra degli strumenti definiscono i comandi visibili nella barra degli strumenti quando si fa clic su un componente Titolo o Paragrafo per modificarlo. È possibile rimuovere e riordinare tutto ciò che il componente Titolo o Paragrafo supporta, ma non è consentito aggiungere nuovi plugin.

Per personalizzare i gruppi della barra degli strumenti in SiteBuilder, è necessario utilizzare la stessa sintassi utilizzata da CKEditor per la configurazione di toolbarGroups. Vedere https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic.

I componenti Titolo e paragrafo supportano i gruppi riportati di seguito.

Il componente Paragrafo supporta anche i plugin di inserimento di immagini e tabelle:

  • "insert"

    • "image"

    • "table"

È inoltre possibile utilizzare il carattere di separazione delle righe:

  • "/"

Nota:

Se si imposta un altro valore qualsiasi nella configurazione dei gruppi della barra degli strumenti, il valore verrà rimosso prima della creazione della barra degli strumenti di SiteBuilder. Non è possibile fornire "extraPlugins". È supportata solo la configurazione "name"/"groups". Eventuali voci "items" verranno ignorate. 

Ad esempio, se si desidera impedire che gli utenti definiscano caratteri, colori, stili o dimensioni, è possibile aggiornare la configurazione della barra degli strumenti come riportato di seguito. Per i valori "id" è necessario specificare valori personalizzati diversi da quelli dei valori integrati.

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

Convalida

Sostituire il contenuto del file components.json con il codice precedente, quindi modificare il sito (aggiornare il browser se è già attiva una sessione di modifica).  A questo punto, durante la modifica, il componente Titolo non mostrerà più gli stili o i colori dei caratteri per consentire la selezione.  Il componente Paragrafo continuerà invece a mostrarli e la lista delle dimensioni di carattere sarà limitata a 16, 24 e 48.

Gruppi della barra degli strumenti predefiniti

Di seguito vengono indicati i gruppi della barra degli strumenti predefiniti per i componenti Titolo e Paragrafo.

  • Titolo

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

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