WYSIWYG

Das WYSIWYG-Feld fügt den Rich-Text-Editor von WordPress in ein benutzerdefiniertes Widget ein, das Sie mit den Master-Addons erstellen Widget-builder. Editoren erhalten Fettdruck, Kursivschrift, Links, Listen und die Schaltfläche Medien hinzufügen, die gleiche Symbolleiste, die sie beim Schreiben eines Beitrags verwenden Ihr Widget erhält formatiertes HTML und druckt es mit einem Token aus Es ist das Feld für jede Textregion, in der ein einfacher Textbereich die Formatierung abflachen würde.

WYSIWYG ist eines der Felder, die Sie im Widget Builder der kostenlosen Version verwenden können. Das kostenlose Plugin enthält einen begrenzten Widget Builder und der vollständige Satz an Feldern ist im Lieferumfang enthalten Master Addons Pro.

Was das WYSIWYG-Feld tut #

• Fügt den Rich-Text-Editor zum Panel Ihres Widgets in Elementor hinzu, mit Visual- und Code-Registern und einer Schaltfläche Medien hinzufügen.
• Speichert, was Redakteure als HTML schreiben.
• Druckt es über ein Token wie z {{ member_bio }}, gefiltert die Art und Weise, wie WordPress Inhalte filtert.
• Behält die Formatierung bei: Absätze, Fettdruck, Kursivschrift, Links, Listen und Überschriften werden alle gerendert.
• Nimmt einen Standardwert, der Markup enthalten kann, sodass ein frisches Widget ein funktioniertes Beispiel anzeigt.

Neu beim Bauherrn? lesen Sie die Übersicht über Widget Builder Kommen Sie dann zuerst mit geöffnetem Widget zurück.

Bevor Sie beginnen #

• WordPress mit installiertem und aktivem Elementor.
• Master Addons für Elementor installiert und aktiv Die Installationsführung Cover-einrichtung.
• Ein Widget im Widget Builder geöffnet Das Beispiel in diesem Handbuch ist ein “Team Member” - Widget: Textfelder für den Namen und die Rolle, und ein WYSIWYG-Feld benannt member_bio Für die Biographie.

So fügen Sie ein WYSIWYG-Feld hinzu #

1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
2. Fügen Sie einen Abschnitt hinzu Inhalt Tab, zum Beispiel “Mitglied”.
3. Typ wysi Im Feldsuchfeld links.
4. Ziehen WYSIWYG In den Abschnitt Klicken Sie auf den Bleistift auf dem Feld, um seine Einstellungen zu öffnen.

WYSIWYG Feldoptionen erklärt #

• Etikett: Der Text über dem Editor in Elementor, zum Beispiel “Bio” Das Feld beginnt mit der Bezeichnung “Inhalt”.
• Name: Die eindeutige ID des Feldes und der Name seines Tokens Verwenden Sie zum Beispiel nur Buchstaben, Zahlen und Unterstriche member_bio.
• Beschreibung: Ein unter dem Editor in Elementor gezeigter Hinweis Verwenden Sie ihn, um Erwartungen festzulegen, wie zum Beispiel “Zwei oder drei Sätze Fett, Links und Listen sind in Ordnung”
• Standardwert: Der Startinhalt Das ist ein Klartextfeld, also tippe selbst den HTML ein, z.B. ein Absatz mit einem strong Tag und einen Link.

Beschriftungsblock Ist hier standardmäßig on, was man sich wünscht: der Editor benötigt die volle Breite des Panels Lassen Wähler Leer, da ein Textblock kein CSS-Wert ist.

Der Rest der Common Settings verhält sich wie auf anderen Feldern, einschließlich Bedingungen Wenn die Region nur erscheinen soll, wenn ein anderes Feld gesetzt ist.

In unseren Tests zeigte die Feldkarte im Inneren des Builders in ihrem kleinen Vorschau-Editor den Standardwert als rohes HTML an, das ist nur die eigene Vorschau des Builders Elementor rendert die gleiche Voreinstellung wie formatierter Text.

Drucken Sie den Inhalt in Ihrer Vorlage aus #

Ein Token platziert die ganze Region Wickeln Sie es in einen Behälter, den Sie stylen können, und bewachen Sie es so, dass ein leeres Feld keine verirrte Hülle hinterlässt:

<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>

Gestalten Sie die Region aus dem CSS-Panel, indem Sie auf die Tags abzielen, die der Editor schreibt:

.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; }

Nicht hinzufügen raw Zu einem WYSIWYG-Token Der einfache Token gibt die Formatierung bereits wieder, und raw Entfernt nur den Sicherheitsfilter.

Was der Filter behält und fällt #

Der Wert durchläuft den gleichen Filter, den WordPress für Post-Inhalte verwendet In unseren Tests, Überschriften, Absätzen, strong, emListen, Links und sogar Inline style Attribute kamen unverändert durch Eine iframe entfernt wurde, und ein Skript-Tag wurde entfernt, ohne ausgeführt zu werden.

Ein Detail, das Sie kennen sollten, bevor Sie das Widget an einen Client übergeben: Wenn ein Skript-Tag durch die Registerkarte Code eingefügt wurde, wurde das Tag entfernt, aber das JavaScript darin blieb als Klartext auf der Seite, sodass eine Codezeile in der Mitte der Biografie angezeigt wurde Nichts warnt Sie. Sagen Sie den Redakteuren, sie sollen Text und keine Einbettungen einfügen, und überprüfen Sie die Registerkarte Code, wenn auf einer Seite verirrte Zeichen erscheinen.

Verwenden Sie die WYSIWYG-Steuerung in Elementor #

Fügen Sie das Widget zu einer Seite hinzu, oder laden Sie den Editor neu, wenn die Seite bereits geöffnet war Das Feld zeigt den vollständigen Editor unter Ihrem Label: Fügen Sie Medien, die Registerkarten Visual und Code, einen Dropdown im Absatzformat, fett, kursiv, unterstreichen, Listen, einen Link-Button und Vollbild.

Redakteure schreiben in einem Beitrag so wie sie es tun Die Vorschau aktualisiert sich, sobald der Fokus den Editor verlässt Die Code Tab zeigt das zugrunde liegende HTML an, das zum Bereinigen der eingefügten Formatierung praktisch ist.

Hier ist die fertige Karte auf dem Frontend, mit der fett gedruckten Phrase, dem Link und der Liste, die alle aus dem Feld kommen:

Häufige Anwendungsfälle #

• Teammitgliedsbiografien und Autorenboxen.
• Feature - oder Servicebeschreibungen, die eine Liste oder eine fett gedruckte Phrase benötigen.
• Zeugniskörper mit Zitat und Zuschreibungszeile.
• Jeder Langformtextbereich in einem Karten-, Box- oder Panel-Widget.

Tipps für die Arbeit mit dem WYSIWYG-Feld #

• Geben Sie ihm einen Standardwert mit echtem Aufschlag. Die Redakteure sehen dann die Art von Inhalten, die die Region erwartet, und Sie kennen die Formatierungsrenderings.
• Legen Sie die Länge in der Beschreibung fest. “Zwei oder drei Sätze” spart später viele Layout-Fixes.
• Style die Tags, nicht den Text. Regeln für p, a und ul Halten Sie innerhalb Ihrer Wrapper-Klasse die Region konsistent, unabhängig davon, was Redakteure schreiben.
• Bewachen Sie den Token mit {% if %} Ein leeres Feld hinterlässt also keinen leeren Wrapper auf der Seite.
• Nur Klartext? Die Textarea-feld Leichter ist Für eingefügte Markup - oder Einbettungsschnipsel verwenden Sie die Codefeld.

Häufig gestellte Fragen #

Einwickelnd #

Geben Sie ein WYSIWYG-Feld in einen Inhaltsbereich, geben Sie ihm eine klare Beschriftung, eine hilfreiche Beschreibung und einen Standardwert mit echtem Markup und drucken Sie dann das Token in einen {% if %} Bewachen und stylen Sie die Tags aus dem CSS-Panel Editoren erhalten die bereits bekannte Symbolleiste und Ihr Widget erhält sauber formatiertes HTML. Für Klartext verwenden Sie die Textarea-feldFür eingeklebte Schnipsel ist die Codefeldund überprüfen Preisbildung Für das, was jeder Plan beinhaltet.