Cómo personalizar los iconos de TinyMCE del campo de texto enriquecido

¿Desea personalizar los iconos de formato que aparecen en sus campos de Texto enriquecido? Por defecto, WPForms muestra dos barras de herramientas con opciones de formato estándar.

Esta guía le mostrará cómo personalizar estas barras de herramientas para incluir exactamente las herramientas que sus usuarios necesitan.

Los campos predeterminados para la barra de herramientas superior son:

• Formato de texto para marcar texto como encabezados o texto de párrafo
• Negrita
• Cursiva
• Lista con viñetas
• Lista numerada
• Cita en bloque
• Alinear a la izquierda
• Alinear al centro
• Alinear a la derecha
• Insertar/editar enlace
• Insertar etiqueta "Leer más"
• Alternar barra de herramientas (esto activa y desactiva la barra de herramientas inferior)

Los campos predeterminados para la barra de herramientas inferior son:

• Tachado
• Línea horizontal
• Color del texto
• Pegar como texto
• Borrar formato
• Carácter especial
• Disminuir sangría
• Aumentar sangría
• Deshacer
• Rehacer
• Lista de atajos de teclado (aparecerá una ventana modal con estos atajos)

En este tutorial, le mostraremos cómo usar PHP para personalizar los iconos que se mostrarán a sus visitantes.

Configuración de tu formulario

Primero, cree un formulario y agregue un campo de Texto enriquecido. Si necesita ayuda para crear su formulario, consulte nuestra guía para crear su primer formulario.

Personalización de iconos de barra de herramientas

Para modificar las opciones de formato disponibles, necesitarás agregar código PHP a tu sitio. Si no estás seguro de cómo agregar código personalizado, por favor revisa nuestra guía sobre cómo agregar fragmentos de código a un sitio de WordPress.

Así es como puedes personalizar ambas barras de herramientas:

Para personalizar las barras de herramientas:

• Para la barra de herramientas superior: Modifica el array en la línea 10
• Para la barra de herramientas inferior: Modifica el array en la línea 42
• Agrega o elimina botones según sea necesario, manteniendo el mismo formato

Eliminar barras de herramientas por completo

Si deseas eliminar las barras de herramientas de formato por completo, puedes hacerlo usando CSS. Si necesitas ayuda para agregar CSS a tu sitio, consulta nuestra guía sobre cómo agregar CSS personalizado a WordPress.

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

Para eliminar barras de herramientas de un formulario específico:

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

Reemplaza 1000 con el ID de tu formulario y field_25 con el ID de tu campo de Texto Enriquecido. Si necesitas ayuda para encontrar estos IDs, consulta nuestra guía sobre cómo encontrar IDs de formularios y campos.

¡Y eso es todo lo que necesitas para personalizar el campo de formulario de Texto Enriquecido! A continuación, ¿te gustaría personalizar los iconos al usar el campo de formulario Valoración? Consulta nuestra guía sobre cómo personalizar la apariencia de los iconos de Valoración para más detalles.