Como Personalizar os Ícones do TinyMCE do Campo de Texto Rico

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

Este guia mostrará como personalizar essas barras de ferramentas para incluir exatamente as ferramentas que seus usuários precisam.

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
• Centralizar
• Alinhar à Direita
• Inserir/Editar Link
• Inserir Tag Leia Mais
• Alternar Barra de Ferramentas (isso ativa e desativa a barra de ferramentas inferior)

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

• Tachado
• Linha Horizontal
• Cor do Texto
• Colar como Texto
• Limpar Formatação
• Caractere Especial
• Diminuir Recuo
• Aumentar Recuo
• Desfazer
• Refazer
• Lista de Atalhos de Teclado (uma janela modal aparecerá com esses atalhos)

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

Configurando Seu Formulário

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

Personalizando ícones da Barra de Ferramentas

Para modificar as opções de formatação disponíveis, você precisará adicionar código PHP ao seu site. Se não tiver certeza de como adicionar código personalizado, revise nosso guia sobre como adicionar trechos de código ao 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

Removendo barras de ferramentas completamente

Se você quiser remover as barras de ferramentas de formatação inteiramente, você pode fazer isso usando CSS. Se precisar de ajuda para adicionar CSS ao seu site, confira 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 Rich Text. Se precisar de ajuda para encontrar esses IDs, confira nosso guia sobre como encontrar IDs de formulários e campos.

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