Personalizar Grupos de Barra de Ferramentas no Site Builder

Para componentes personalizados, você pode personalizar cópias de grupos de barra de ferramentas predefinidos exibidos na barra de ferramentas do Site Builder.

Você pode criar sua própria versão de um componente pronto que tenha um conjunto restrito e esteja disponível na tag personalizada. Nenhuma personalização afeta os componentes prontos.

Você pode criar sua própria versão do componente pronto que tenha um conjunto restrito e esteja disponível na tag personalizada, mas não vai afetar qualquer componente pronto.

Os grupos de barra de ferramentas definem o que você vê na barra de ferramentas quando clica no componente Título ou Parágrafo para editá-lo. Você pode remover e reordenar o que é suportado pelo componente Título ou Parágrafo, mas plug-ins adicionais não são permitidos.

Para personalizar grupos de barra de ferramentas no Site Builder, use a mesma sintaxe que o CKEditor usa para sua configuração de toolbarGroups. Consulte https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic.

Os componentes Título e Parágrafo suportam os seguintes grupos:

"basicstyles" - restrito a negrito/itálico/sublinhado https://ckeditor.com/cke4/addon/basicstyles
"styles" - Estilos de Fonte https://docs.ckeditor.com/ckeditor4/latest/guide/dev_styles.html
"colors" - cores do Texto e do Plano de Fundo https://docs.ckeditor.com/ckeditor4/latest/guide/dev_colorbutton.html
"undo" - Desfazer/Refazer a instância atual no CKEditor
"links" - Plug-in Personalizado para vincular caixa de diálogo
"paragraph" - lista com bullets/numerada e suporte a recuo
- "list"
- "indent"
"align" - esquerda/direita/centralizado
"cleanup" - remover qualquer estilo do texto selecionado

O componente Parágrafo também suporta os plug-ins de inserção de imagem e tabela”

"insert"
- "image"
- "table"

Além disso, você pode usar a entrada do separador de linhas:

Nota:

Se você definir qualquer outro valor na configuração de grupo da barra de ferramentas, o valor será removido antes da criação da barra de ferramentas do Site Builder. Você não pode fornecer "extraPlugins". Somente a configuração "name"/"groups" é suportada. Todas as entradas "items" serão ignoradas.

Por exemplo, se você quiser evitar que os usuários definam fontes, cores, estilos ou tamanhos, poderá atualizar a configuração da barra de ferramentas, conforme mostrado a seguir. Para os valores "id", especifique valores personalizados diferentes dos valores predefinidos.

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

Validação

Substitua o arquivo components.json pelo código anterior e, em seguida, edite o site (atualize o browser se já estiver editando). Nesse ponto, quando você editar um componente Título, ele não mostrará mais os estilos de fonte ou as cores para seleção. O componente Parágrafo continuará a mostrá-los e a lista de tamanhos de fonte disponíveis será limitado a 16, 24 e 48.

Grupos de Barra de Ferramentas Padrão

Estes são os grupos de barra de ferramentas padrão para Título e Parágrafo:

Título

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

Parágrafo

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