Comment personnaliser les icônes du champ de texte enrichi TinyMCE

Souhaitez-vous personnaliser les icônes de mise en forme qui apparaissent dans vos champs Texte enrichi ? Par défaut, WPForms affiche deux barres d’outils avec des options de mise en forme standard.

Ce guide vous montrera comment personnaliser ces barres d’outils pour inclure exactement les outils dont vos utilisateurs ont besoin.

Les champs par défaut pour la barre d’outils supérieure sont :

• Format de texte pour marquer le texte comme titres ou paragraphe
• Gras
• Italique
• Liste à puces
• Liste numérotée
• Citation
• Aligner à gauche
• Centrer
• Aligner à droite
• Insérer/modifier un lien
• Insérer la balise Lire la suite
• Afficher/Masquer la barre d’outils (cela active ou désactive la barre d’outils inférieure)

Les champs par défaut pour la barre d’outils inférieure sont :

• Barré
• Ligne horizontale
• Couleur du texte
• Coller comme texte
• Effacer la mise en forme
• Caractère spécial
• Diminuer le retrait
• Augmenter le retrait
• Annuler
• Rétablir
• Liste des raccourcis clavier (une fenêtre modale apparaîtra avec ces raccourcis)

Dans ce tutoriel, nous vous montrerons comment utiliser PHP pour personnaliser les icônes qui s’afficheront à vos visiteurs.

Configuration de votre formulaire

Tout d’abord, créez un formulaire et ajoutez un champ Texte enrichi. Si vous avez besoin d’aide pour créer votre formulaire, consultez notre guide pour créer votre premier formulaire.

Personnalisation des icônes de la barre d’outils

Pour modifier les options de mise en forme disponibles, vous devrez ajouter du code PHP à votre site. Si vous ne savez pas comment ajouter du code personnalisé, veuillez consulter notre guide sur l'ajout d'extraits de code à un site WordPress.

Voici comment personnaliser les deux barres d'outils :

Pour personnaliser les barres d'outils :

• Pour la barre d'outils supérieure : Modifiez le tableau à la ligne 10
• Pour la barre d'outils inférieure : Modifiez le tableau à la ligne 42
• Ajoutez ou supprimez des boutons selon vos besoins, en conservant le même format

Suppression complète des barres d'outils

Si vous souhaitez supprimer complètement les barres d'outils de mise en forme, vous pouvez le faire en utilisant CSS. Si vous avez besoin d'aide pour ajouter du CSS à votre site, consultez notre guide sur l'ajout de CSS personnalisé à WordPress.

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

Pour supprimer les barres d'outils d'un formulaire spécifique :

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

Remplacez 1000 par l'ID de votre formulaire et field_25 par l'ID de votre champ Rich Text. Si vous avez besoin d'aide pour trouver ces ID, consultez notre guide sur comment trouver les ID de formulaire et de champ.

Et voilà tout ce dont vous avez besoin pour personnaliser le champ de formulaire Rich Text ! Ensuite, souhaitez-vous personnaliser les icônes lors de l'utilisation du champ de formulaire Rating ? Consultez notre guide sur la personnalisation de l'apparence des icônes de notation pour plus de détails.