Adicionar estilos da marca e botões ao editor de texto.

Aprender DXPR BuilderGerir o siteAdaptar à sua marca

Quando os editores clicam num texto no DXPR Builder, aparece uma barra de ferramentas. A lista Styles pode ser preenchida com os estilos da marca, como um parágrafo de abertura ou uma frase destacada. Também pode escolher que botões cada função vê. Os editores aplicam assim um aspeto da marca com um clique, em vez de definirem tamanhos e cores à mão. Os tipos de letra vêm do tema; consulte Tipos de letra personalizados.

Antes de começar

  • Para editar estilos, precisa de Administer DXPR Builder configuration.
  • Para editar botões da barra de ferramentas, precisa de Administer dxpr builder profile.
  • Cada estilo precisa de CSS por trás. Classes do Bootstrap 5 como lead funcionam quando a página carrega o Bootstrap 5. As classes próprias precisam de uma regra no tema; consulte CSS personalizado.

Configuração

  1. Aceda a DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings).
  2. Expanda Text Editor. A caixa Custom styles já enumera os estilos que vêm com o DXPR Builder, um por linha.
  3. Adicione uma linha por estilo na forma Label=element.class e elimine as linhas que não quer.
  4. Clique em Save settings.
  5. Abra uma página no construtor, ou recarregue-a se estiver aberta, e clique num texto.
  6. Clique em Styles na barra de ferramentas e escolha o estilo.

Estas linhas adicionam quatro estilos:

Lead=p.lead
Event date=span.text-primary.fw-semibold
Callout=p.border-start.border-primary.border-4.ps-3
Sassy Title=h1.sassy-title

Cada linha tem três partes:

  • A label antes de = é o nome que os editores veem na lista.
  • O element depois de = decide o que o estilo abrange. Um elemento de bloco como p, h2 ou blockquote formata um parágrafo ou título inteiro. Um elemento em linha como span, mark ou code envolve apenas as palavras selecionadas.
  • Cada class segue um ponto. Adicione mais classes com mais pontos, como em Callout acima.

Os nomes de elementos usam apenas letras e dígitos. Os nomes de classes usam letras, dígitos, hífenes e sublinhados. Para repor a lista de origem, esvazie a caixa e guarde.

Botões da barra de ferramentas por função

  1. Aceda a DXPR Studio > DXPR Builder > User Profiles (/admin/dxpr_studio/dxpr_builder/profile) e clique em Edit junto ao perfil da função.
  2. Expanda Text editor buttons (inline editing). Marque os botões para texto editado na página.
  3. Expanda Text editor buttons (modal editing). Marque os botões para caixas de texto num diálogo de definições.
  4. Clique em Save.

A edição em linha abrange os elementos Text, Alert e Blockquote. Mantenha Font style marcado em ambos os grupos para mostrar os estilos personalizados; é o nome do perfil para a lista Styles. Se desmarcar todos os botões de um grupo, essa barra de ferramentas volta ao conjunto incluído. Perfis de utilizador explica que perfil se aplica a quem.

O que vê

Styles na barra de ferramentas abre um painel com dois grupos. Block styles tem os estilos para parágrafos e títulos inteiros, Text styles os das palavras selecionadas. Depois de escolher um estilo, o botão mostra o nome, ou Multiple styles quando vários se aplicam.

A barra de ferramentas de texto de um elemento Text cujo botão Styles indica Lead, acima do parágrafo com o cursor, já no estilo Lead maior acima de um parágrafo normal

O editor guarda o elemento e as classes no HTML da página, para os visitantes verem o mesmo aspeto. Um estilo de bloco só está ativo no próprio elemento: Sassy Title precisa do cursor num Heading 1.

Definições

Os 36 botões aparecem em ambos os grupos. Um perfil novo começa com estes marcados:

Button Machine name Inline default Modal default
AI Assistant, AI Tone of Voice aiAgentButton, aiAgentToneButton yes yes
Bold, Italic bold, italic yes yes
Underline, Strike through underline, strikethrough yes
Superscript, Subscript superscript, subscript yes
Remove format removeFormat yes yes
Text color fontColor yes yes
Background color fontBackgroundColor
Font size fontSize yes yes
Font family fontFamily
HTML block format heading yes yes
Font style (the Styles list) style yes yes
Align left, Center, Align right, Justify alignment:left, alignment:center, alignment:right, alignment:justify yes yes
Insert/Remove Bullet list bulletedList yes yes
Insert/Remove Numbered list numberedList yes
Outdent, Indent outdent, indent yes
Block quote blockQuote yes
Link, Image, Table link, insertImage, insertTable yes yes
Horizontal rule, Character map horizontalLine, specialCharacters yes
Source code, Show blocks sourceEditing, showBlocks yes
Select all, Replace, Accessibility help selectAll, findAndReplace, accessibilityHelp
Undo, Redo undo, redo yes yes

Os utilizadores cujas funções não correspondem a nenhum perfil ativo recebem as barras de ferramentas incluídas. Em linha, são Bold, Italic, Remove format, HTML block format, Font style, ambas as listas, Link, Image, Table, Undo e Redo. A barra modal adiciona os botões de sublinhado, rasurado, expoente e índice, alinhamento, avanço e recuo, cor e tamanho. Também adiciona Block quote, Horizontal rule, Character map, Source code e Show blocks. Com a IA ligada, ambas recebem os dois botões de IA.

Font family oferece os tipos de letra padrão do CKEditor para a Web, não os tipos do tema.

Se o estilo não aparece

  • The Styles list only shows the shipped styles. Uma linha quebra o formato, ou uma linha em branco entre dois estilos, e o DXPR Builder ignora a lista inteira. Corrija em Text Editor em /admin/dxpr_studio/dxpr_builder/settings e guarde.
  • Your style is greyed out. Um estilo de bloco só funciona no próprio elemento: h1.sassy-title precisa de um Heading 1. Mude primeiro o bloco com a lista de títulos, ou defina o estilo para p.
  • There is no Styles button on the toolbar. O perfil do editor tem Font style desmarcado. Marque-o em ambos os grupos de botões em /admin/dxpr_studio/dxpr_builder/profile.
  • The style applies, but the text looks the same. O tema não tem CSS para a classe, ou o Bootstrap 5 não está carregado. Adicione a regra ao tema, ou defina Sideload Bootstrap files como Bootstrap 5 em Bootstrap na página General Settings.
  • Editors see the style, visitors do not. Apply text format filters to frontend content está ligado em Text Filters, e o formato de texto do campo remove atributos class. Desligue a opção, ou dê ao campo um formato que mantém classes; consulte Os visitantes veem algo diferente.

O que se segue?