WYSIWYG

Le champ WYSIWYG place l'éditeur de texte enrichi de WordPress dans un widget personnalisé que vous construisez avec les modules complémentaires principaux Constructeur de widgets. Les éditeurs obtiennent du gras, de l'italique, des liens, des listes et le bouton Ajouter un média, la même barre d'outils qu'ils utilisent lors de l'écriture d'un message Votre widget reçoit du HTML formaté et l'imprime avec un jeton C'est le champ pour toute région de texte où un Textarea simple aplatirait le formatage.

WYSIWYG est l'un des champs que vous pouvez utiliser dans le Widget Builder de la version gratuite Le plugin gratuit comprend un Widget Builder limité, et l'ensemble complet des champs est livré avec Maître Addons Pro.

Ce que fait le champ WYSIWYG #

• Ajoute l'éditeur de texte enrichi au panneau de votre widget dans Elementor, avec des onglets Visuel et Code et un bouton Ajouter un média.
• Enregistre ce que les éditeurs écrivent en HTML.
• L'imprime via un jeton tel que {{ member_bio }}1, a filtré la façon dont WordPress filtre le contenu des publications.
• Conserve le formatage : les paragraphes, les caractères gras, en italique, les liens, les listes et les titres sont tous rendus.
• Prend une valeur par défaut, qui peut inclure un balisage, donc un nouveau widget affiche un exemple concret.

Nouveau au constructeur ? lire le Aperçu du constructeur de widgets tout d'abord, revenez avec un widget ouvert.

Avant de commencer #

• WordPress avec Elementor installé et actif.
• Modules complémentaires principaux pour Elementor installés et actifs. Le guide d'installation couverture configuration.
• Un widget ouvert dans le Widget Builder L'exemple dans ce guide est un widget “Team Member” : Champs de texte pour le nom et le rôle, et un champ WYSIWYG nommé member_bio pour la biographie.

Comment ajouter un champ WYSIWYG #

1. Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
2. Ajouter une section sur le Contenu tab, par exemple “Member”.
3. Type wysi dans le champ champ rechercher box à gauche.
4. Glisser WYSIWYG dans la section Cliquez sur le crayon sur le champ pour ouvrir ses paramètres.

Options de champ WYSIWYG expliquées #

• Étiquette: le texte au-dessus de l'éditeur dans Elementor, par exemple “Bio” Le champ commence par étiqueté “Content”.
• Nom: l'identifiant unique du champ et le nom de son jeton Utilisez uniquement des lettres, des chiffres et des traits de soulignement, par exemple member_bio.
• Description: un indice affiché sous l'éditeur dans Elementor Utilisez-le pour définir des attentes, telles que “Deux ou trois phrases. Gras, les liens et les listes sont fins.”
• Valeur par défaut : le contenu de départ Il s'agit d'une zone de texte brut, alors tapez le HTML vous-même, par exemple un paragraphe avec un strong tag et un lien.

Bloc d'étiquettes est allumé par défaut ici, ce que vous voulez : l'éditeur a besoin de toute la largeur du panneau Laisser Sélecteur vide, puisqu'un bloc de texte n'est pas une valeur CSS.

Le reste des paramètres communs se comporte comme sur d'autres champs, notamment Conditions si la région ne doit apparaître que lorsqu'un autre champ est défini.

Dans nos tests la carte de terrain à l'intérieur du constructeur a montré la valeur par défaut comme HTML brut dans son petit éditeur d'aperçu Ce n'est que l'aperçu propre du constructeur Elementor rend la même valeur par défaut que le texte formaté.

Imprimez le contenu dans votre modèle #

Un jeton place toute la région Enroulez-le dans un conteneur que vous pouvez coiffer, et gardez-le pour qu'un champ vide ne laisse aucun emballage égaré :

<article class="tm">
  <p class="tm-name">{{ member_name }}</p>
  <p class="tm-role">{{ member_role }}</p>
  {% if member_bio %}
  <div class="tm-bio">{{ member_bio }}</div>
  {% endif %}
</article>

Stylez la région à partir du panneau CSS en ciblant les balises écrites par l'éditeur :

.tm-bio p { margin: 0 0 .75em; line-height: 1.6; }
.tm-bio p:last-child { margin-bottom: 0; }
.tm-bio a { color: #4338ca; }
.tm-bio ul { margin: 0 0 .75em 1.1em; }

N'ajoutez pas raw à un jeton WYSIWYG. Le jeton simple rend déjà le formatage, et raw supprime uniquement le filtre de sécurité.

Ce que le filtre conserve et laisse tomber #

La valeur passe par le même filtre que WordPress utilise pour le contenu des publications. Dans nos tests, titres, paragraphes, strong, em, des listes, des liens et même en ligne style les attributs sont passés par inchangés. Un iframe a été supprimé et une balise de script a été supprimée sans exécution.

Un détail à connaître avant de remettre le widget à un client : lorsqu'une balise de script était collée dans l'onglet Code, la balise était supprimée mais le JavaScript qu'elle contenait restait sur la page sous forme de texte brut, donc une ligne de code apparaissait dans le au milieu de la bio. Rien ne vous avertit. Dites aux éditeurs de coller du texte, pas d'intégrer, et vérifiez l'onglet Code si des caractères parasites apparaissent sur une page.

Utilisez le contrôle WYSIWYG dans Elementor #

Ajoutez le widget à une page, ou rechargez l'éditeur si la page était déjà ouverte Le champ affiche l'éditeur complet sous votre étiquette : Ajouter un média, les onglets Visuel et Code, un format de paragraphe déroulant, gras, italique, soulignement, listes, un bouton de lien et plein écran.

Les éditeurs écrivent comme ils le font dans un post L'aperçu se met à jour dès que le focus quitte l'éditeur Le Code l'onglet affiche le HTML sous-jacent, qui est pratique pour nettoyer le formatage collé.

Voici la carte finie sur le front-end, avec la phrase en gras, le lien et la liste tous venant du terrain :

Cas d'utilisation courants #

• Biographies des membres de l'équipe et boîtes d'auteurs.
• Descriptions de fonctionnalités ou de services qui nécessitent une liste ou une phrase en gras.
• Organismes de témoignage avec une citation et une ligne d'attribution.
• Toute région de texte longue forme dans une carte, une boîte ou un widget de panneau.

Conseils pour travailler avec le champ WYSIWYG #

• Donnez-lui une valeur par défaut avec un balisage réel. Les éditeurs voient ensuite le type de contenu attendu par la région et vous savez que le formatage est rendu.
• Définissez la longueur dans la description. “Deux ou trois phrases” enregistre beaucoup de corrections de mise en page plus tard.
• Stylez les balises, pas le texte. Règles pour p, a et ul à l’intérieur de votre classe wrapper, gardez la région cohérente quoi que les éditeurs écrivent.
• Gardez le jeton avec {% if %} donc un champ vide ne laisse pas un wrapper vide sur la page.
• Seulement du texte brut? Le Champ de zone de texte est plus léger Pour le balisage collé ou les extraits intégrés, utilisez le Champ code.

Foire aux questions #

Envelopper #

Déposez un champ WYSIWYG dans une section Contenu, donnez-lui une étiquette claire, une description utile et une valeur par défaut avec un balisage réel, puis imprimez le jeton à l'intérieur d'un {% if %} conservez et stylisez les balises du panneau CSS. Les éditeurs obtiennent la barre d'outils qu'ils connaissent déjà et votre widget obtient du HTML formaté propre Pour le texte brut, utilisez le Champ de zone de texte, pour les extraits collés, le Champ codeet vérifiez tarification pour ce que chaque plan comprend.