Como Personalizar os Ícones TinyMCE do Campo Rich Text

Gostaria de personalizar quais ícones de formatação aparecem nos seus campos de Texto Rico? Por defeito, o WPForms exibe duas barras de ferramentas com opções de formatação padrão.

Este guia irá mostrar-lhe como personalizar estas barras de ferramentas para incluir exatamente as ferramentas de que os seus utilizadores necessitam.

Os campos padrão para a barra de ferramentas superior são:

• Formato de Texto para marcar texto como títulos ou texto de parágrafo
• Negrito
• Itálico
• Lista com Marcadores
• Lista Numerada
• Citação em bloco
• Alinhar à Esquerda
• Alinhar ao Centro
• Alinhar à Direita
• Inserir/Editar Ligação
• Inserir Etiqueta Ler Mais
• Alternar Barra de Ferramentas (isto ativa e desativa a barra de ferramentas inferior)

Os campos padrão para a barra de ferramentas inferior são:

• Rasurado
• Linha Horizontal
• Cor do Texto
• Colar como Texto
• Limpar Formatação
• Caractere Especial
• Diminuir Recuo
• Aumentar Recuo
• Anular
• Rever
• Lista de Atalhos de Teclado (uma janela modal aparecerá com estes atalhos)

Neste tutorial, vamos mostrar-lhe como usar PHP para personalizar os ícones que serão exibidos aos seus visitantes.

Configurar o Seu Formulário

Primeiro, crie um formulário e adicione um campo de Texto Rico. Se precisar de ajuda para criar o seu formulário, consulte o nosso guia sobre como criar o seu primeiro formulário.

Personalização de ícones da barra de ferramentas

Para modificar as opções de formatação disponíveis, precisará de adicionar código PHP ao seu site. Se não tem a certeza de como adicionar código personalizado, reveja o nosso guia sobre como adicionar snippets de código a um site WordPress.

Veja como personalizar ambas as barras de ferramentas:

Para personalizar as barras de ferramentas:

• Para a barra de ferramentas superior: Modifique o array na linha 10
• Para a barra de ferramentas inferior: Modifique o array na linha 42
• Adicione ou remova botões conforme necessário, mantendo o mesmo formato

Remover Barras de Ferramentas Completamente

Se pretender remover as barras de ferramentas de formatação por completo, pode fazê-lo utilizando CSS. Se precisar de ajuda para adicionar CSS ao seu site, consulte o nosso guia sobre como adicionar CSS personalizado ao WordPress.

.wpforms-field .wp-editor-tabs, .wpforms-field .quicktags-toolbar {
    display: none !important;
}

Para remover barras de ferramentas de um formulário específico:

div#qt_wpforms-1000-field_25_toolbar, #wp-wpforms-1000-field_25-editor-tools {
    display: none;
}

Substitua 1000 pelo ID do seu formulário e field_25 pelo ID do seu campo de Rich Text. Se precisar de ajuda para encontrar estes IDs, consulte o nosso guia sobre como encontrar IDs de formulários e campos.

E é tudo o que precisa para personalizar o campo de formulário Rich Text! Em seguida, gostaria de personalizar os ícones ao usar o campo de formulário Rating? Consulte o nosso guia sobre como personalizar a aparência dos ícones de Rating para mais detalhes.