WYSIWYG

Le Champ WYSIWYG dépose l'éditeur TinyMCE complet, le même éditeur de texte enrichi que WordPress a expédié depuis des années, dans le panneau d'un widget personnalisé Les éditeurs sont en gras, en italique, en listes, en liens, en titres et le commutateur d'onglets visuel/texte qu'ils connaissent déjà Votre widget reçoit du HTML formaté prêt à imprimer À l'intérieur des modules complémentaires principaux Constructeur de widgets: c'est le champ des régions de contenu où une plaine Zone de texte aplatirait le formatage du texte.

Le champ WYSIWYG prend en charge Conditions comme tout autre contrôle, et son contenu passe par le Moteur de modèles de syntaxe Twig. Les valeurs WYSIWYG conservent automatiquement leur HTML sécurisé, vous avez donc rarement besoin de |raw filtre. Les deux guides expliquent les détails et les limites.

La connexion est un jeton Imprimer {{ your_field_name }} dans le panneau HTML et le balisage stocké y est rendu, filtré wp_kses_post« Ainsi, le formatage survit tandis que les balises dangereuses sont supprimées. Pas de filtres supplémentaires, pas d'échappatoire à la gymnastique. ».

Ce que fait le champ WYSIWYG #

• Rend l'éditeur de texte riche TinyMCE dans le panneau Élémenteur du widget, avec les onglets Visuel et Texte.
• Stocke la sortie de l'éditeur sous forme de chaîne HTML.
• Imprime ce HTML via {{ your_field_name }}(, passé par là wp_kses_post sur sortie.
• Maintient le formatage intact : les paragraphes, les caractères gras, en italique, les listes, les liens et les titres sont tous rendus.
• Prend en charge les valeurs dynamiques, de sorte que le contenu peut provenir de balises dynamiques où la configuration les fournit.

Premier widget? Le Aperçu du constructeur de widgets couvre les bases de l'éditeur sur lesquelles cette page s'appuie.

Avant de commencer #

• WordPress avec Élémenteur installé et actif.
• Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
• Un widget personnalisé s'ouvre dans l'éditeur Widget Builder Notre exemple est un widget de carte de membre de l'équipe avec un champ WYSIWYG nommé member_bio la tenue de la biographie formatée de chacun.

Comment ajouter un champ WYSIWYG #

Faites glisser le WYSIWYG champ du panneau des champs dans une section sous le Contenu tab, la maison naturelle pour le contenu long-form Ses options s'ouvrent sur la gauche une fois qu'il atterrit.

Options de champ WYSIWYG expliquées #

La liste d'options reste petite car l'éditeur lui-même comporte la complexité suivante :

• Étiquette: le texte affiché ci-dessus l'éditeur dans Elementor, par exemple “Member Bio”.
• Nom: l'identifiant unique auquel vos modèles font référence Lettres, chiffres et soulignements uniquement, par exemple member_bio.
• Par défaut: le contenu de départ, et il peut inclure le balisage Un court paragraphe formaté montre aux éditeurs à quoi sert la région et prouve que le formatage fonctionne.
• Dynamique : le champ accepte les valeurs dynamiques, de sorte que le contenu peut être câblé à des balises dynamiques au lieu d'être tapé à la main.

Connectez le champ WYSIWYG avec son jeton #

Le champ WYSIWYG est un champ de jeton Un jeton dans le panneau HTML place toute la région de contenu :

<article class="tm-card">
  <h3 class="tm-name">{{ member_name }}</h3>
  <div class="tm-bio">
    {{ member_bio }}
  </div>
</article>

En sortie, la valeur passe par wp_kses_post[traduction], le filtre WordPress s'applique au contenu de publication Les balises que TinyMCE produit, les paragraphes, forts et em, les listes, les liens, les titres, les images, sont toutes sur la liste autorisée, donc quel format d'éditeur est ce qui rend Tout ce qui est dangereux qui se faufile par l'onglet Texte, comme un <script>: est dépouillé.

Attention: n'ajoutez pas |raw à un jeton WYSIWYG par habitude Le jeton simple rend déjà le formatage, car wp_kses_post permet le balisage que TinyMCE écrit ; |raw supprime uniquement le filtre de sécurité sans changer à quoi ressemble une bio normale Si la sortie semble échappée plutôt que rendue, la cause est ailleurs, pas un filtre manquant.

Enroulez le jeton dans un conteneur avec une classe, comme dans l'exemple, et stylisez la région à partir du panneau CSS :

.tm-bio p { margin: 0 0 0.75em; }
.tm-bio a { color: inherit; text-decoration: underline; }

Utilisez le contrôle WYSIWYG dans Elementor #

Ajoutez votre widget personnalisé à une page dans Elementor, ou rechargez l'éditeur si la page était déjà ouverte Le champ se rend comme un éditeur TinyMCE complet dans le panneau : barre d'outils en haut, onglets Visuel et Texte dans le coin, Ajouter un média là où la configuration le permet.

Les éditeurs écrivent et formatent exactement comme ils le feraient dans un message : sélectionnez du texte, mettez-le en gras, ajoutez un lien, démarrez une liste Les mises à jour de l'aperçu au fur et à mesure qu'elles tapent, en affichant le contenu stylisé par le CSS du widget.

Lorsqu'une biographie se rend bizarrement, vérifiez l'onglet Texte avant de blâmer le widget Le contenu collé depuis Word ou Google Docs comporte souvent des travées et des styles en ligne parasites, et ils y sont tous visibles. Le nettoyage du balisage dans l'onglet Texte corrige généralement la mise en page sur place.

Cas d'utilisation courants #

• Bios et profils dans les widgets d'équipe, d'auteur et d'orateur.
• Longues descriptions dans les cartes de service, de produit et de fonctionnalités où un titre ou une liste appartient à l'intérieur du texte.
• Organismes de témoignage cela nécessite de préserver l’accent et les sauts de ligne.
• Notes de bas de page et clauses de non-responsabilité avec des liens en ligne vers les politiques.
• Toute région de texte éditée par le client où le formatage compte et le client ne devrait jamais voir HTML.

Conseils pour travailler avec le champ WYSIWYG #

• Imprimez le jeton simple. {{ member_bio }} rend le formatage tel quel ; |raw ajoute le risque sans ajouter de capacité ici.
• Stylez à travers une classe wrapper. Cible .tm-bio p, .tm-bio ul« Et des amis dans le panneau CSS plutôt que d'espérer que la sortie de l'éditeur arrive pré-stylisée ».
• Définir un format par défaut. Une biographie avec un nom gras et un lien sert également d’exemple en direct de ce que soutient le domaine.
• Un WYSIWYG par région de contenu. Donnez à l'intro et aux petits caractères des champs séparés au lieu de demander aux éditeurs de gérer les deux dans un seul éditeur.
• Choisissez le champ plus léger quand vous le pouvez. Une seule ligne non formatée appartient à un champ Texte ; atteindre WYSIWYG lorsque des paragraphes, des listes ou des liens font véritablement partie du contenu.
• Attendez-vous à des kses sur la sortie. Les balises personnalisées en dehors de la liste autorisée après le contenu ne survivront pas, de par leur conception. Les extraits bruts collables sont les Champ code's travail.

Foire aux questions #

Envelopper #

Le champ WYSIWYG de Widget Builder donne aux éditeurs l'expérience d'écriture qu'ils connaissent déjà et vous donne un seul jeton aseptisé à placer dans le balisage Les personnes de contenu formater les bios et les descriptions visuellement ; le widget les rend en toute sécurité et les stylise via son propre CSS. Pour les extraits bruts collables, utilisez le Champ codeet pour répéter des blocs formatés, combine WYSIWYG avec le Champ répéteur. Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.