WYSIWYG

Die WYSIWYG-Feld Lässt den vollständigen TinyMCE-Editor, den gleichen Rich-Text-Editor, den WordPress seit Jahren ausgeliefert hat, in das Panel eines benutzerdefinierten Widgets fallen. Redakteure erhalten Fettdruck, Kursivschrift, Listen, Links, Überschriften und den visuellen/Text-Tab-Switch, den sie bereits kennen Ihr Widget erhält formatiertes HTML zum Drucken. In den Master-Addons Widget-builderDies ist das Feld für Inhaltsregionen, in denen eine Ebene vorliegt Textbereich Formatierung aus dem Text abflachen würde.

Das WYSIWYG-Feld unterstützt Bedingungen Wie jede andere Kontrolle und ihr Inhalt durch die Twig-Syntax-Vorlagen-Engine. WYSIWYG-Werte behalten ihr sicheres HTML automatisch, sodass Sie das selten benötigen |raw Filter Beide Ratgeber erläutern die Details und Einschränkungen.

Die Verbindung ist ein Token Drucken {{ your_field_name }} Im HTML-Panel und das dort gespeicherte Markup rendert, gefiltert durch wp_kses_post„Die Formatierung bleibt also erhalten, während unsichere Tags entfernt werden. Keine zusätzlichen Filter, kein Entkommen aus der Gymnastik.

Was das WYSIWYG-Feld tut #

• Rendert den TinyMCE-Editor für Rich-Text im Elementor-Panel des Widgets mit den Registerkarten Visual und Text.
• Speichert die Ausgabe des Editors als HTML-String.
• Druckt das HTML durch {{ your_field_name }}Durchgegangen wp_kses_post auf Ausgabe.
• Hält die Formatierung intakt: Absätze, Fettdruck, Kursivschrift, Listen, Links und Überschriften werden alle gerendert.
• Unterstützt dynamische Werte, sodass der Inhalt von dynamischen Tags stammen kann, wo das Setup sie bereitstellt.

Erstes Widget? Das Übersicht über Widget Builder Deckt die Editor-Grundlagen ab, auf denen diese Seite aufbaut.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
• Ein benutzerdefiniertes Widget, das im Widget Builder-Editor geöffnet ist Unser Beispiel ist ein Teammitgliedskarten-Widget mit einem WYSIWYG-Feld namens member_bio Halten Sie die formatierte Biografie jeder Person.

So fügen Sie ein WYSIWYG-Feld hinzu #

Ziehen Sie die WYSIWYG Feld aus dem Feldfeld in einen Abschnitt unter dem Inhalt Tab, das natürliche Zuhause für Long-Form-Inhalte Seine Optionen öffnen sich links, sobald es landet.

WYSIWYG Feldoptionen erklärt #

Die Optionsliste bleibt klein, da der Editor selbst die Komplexität trägt:

• Etikett: Der über dem Editor in Elementor abgebildete Text, zum Beispiel “Member Bio”.
• Name: Die eindeutige Kennung, auf die sich Ihre Vorlagen beziehen Nur Buchstaben, Zahlen und Unterstriche, zum Beispiel member_bio.
• Standard: Der Startinhalt, und er kann Markup enthalten Ein kurzer formatierter Absatz zeigt Redakteuren, wofür die Region ist und beweist, dass die Formatierung funktioniert.
• Dynamisch: Das Feld akzeptiert dynamische Werte, sodass Inhalte mit dynamischen Tags verknüpft werden können, anstatt sie von Hand einzugeben.

Verbinden Sie das WYSIWYG-Feld mit seinem Token #

Das WYSIWYG-Feld ist ein Token-Feld Ein Token im HTML-Panel platziert die gesamte Inhaltsregion:

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

Bei der Ausgabe geht der Wert durch wp_kses_postDer Filter WordPress gilt für Post-Inhalte Die Tags, die TinyMCE produziert, Absätze, stark und em, Listen, Links, Überschriften, Bilder, stehen alle auf der erlaubten Liste, also was Editoren-Format ist, was rendert Alles Unsichere, was sich durch den Text-Tab einschleicht, wie ein <script>, wird entkleidet.

Pass auf: Nicht hinzufügen |raw Aus Gewohnheit zu einem WYSIWYG-Token Der einfache Token rendert bereits die Formatierung, denn wp_kses_post Ermöglicht das Markup TinyMCE schreibt; |raw Entfernt nur den Sicherheitsfilter, ohne zu ändern, wie eine normale Bio aussieht Wenn die Ausgabe eher entwischt als gerendert aussieht, liegt die Ursache woanders, nicht in einem fehlenden Filter.

Wickeln Sie das Token wie im Beispiel in einen Container mit einer Klasse und gestalten Sie die Region aus dem CSS-Panel:

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

Verwenden Sie die WYSIWYG-Steuerung in Elementor #

Fügen Sie Ihr benutzerdefiniertes Widget zu einer Seite in Elementor hinzu oder laden Sie den Editor neu, wenn die Seite bereits geöffnet war. Das Feld wird als vollständiger TinyMCE-Editor im Bedienfeld gerendert: Symbolleiste oben, Registerkarten Visual und Text in der Ecke, Medien hinzufügen, wo die Einrichtung dies zulässt.

Redakteure schreiben und formatieren genau so, wie sie es in einem Beitrag tun würden: Text auswählen, fett schreiben, einen Link hinzufügen, eine Liste starten Die Vorschau aktualisiert sich beim Tippen und zeigt den Inhalt an, der vom CSS des Widgets gestylt wird.

Wenn eine Biografie seltsam rendert, überprüfen Sie die Registerkarte Text, bevor Sie dem Widget die Schuld geben Eingefügte Inhalte von Word oder Google Docs tragen oft verirrte Spannweiten und Inline-Stile, und sie sind alle dort sichtbar. Wenn Sie das Markup in der Registerkarte Text bereinigen, wird das Layout normalerweise an Ort und Stelle korrigiert.

Häufige Anwendungsfälle #

• Bios und Profile In Team-, Autoren- und Sprecher-Widgets.
• Lange Beschreibungen In Service-, Produkt- und Featurekarten, bei denen eine Überschrift oder Liste in den Text gehört.
• Zeugniskörper Das erfordert Betonung und die Beibehaltung von Zeilenumbrüchen.
• Fußnoten und Haftungsausschlüsse Mit Inline-Links zu Richtlinien.
• Jede vom Kunden bearbeitete Textregion Wo es auf die Formatierung ankommt und der Client niemals HTML sehen sollte.

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

• Drucken Sie den einfachen Token. {{ member_bio }} Rendert die Formatierung so, wie sie ist; |raw Risiko hinzufügt, ohne hier die Fähigkeit hinzuzufügen.
• Stil durch eine Wrapper-Klasse. Ziel .tm-bio p, .tm-bio ul, und Freunde im CSS-Panel, anstatt zu hoffen, dass die Editorausgabe vorgestylt ankommt.
• Legen Sie eine formatierte Standardeinstellung fest. Eine Biografie mit einem fett gedruckten Namen und einem Link dient gleichzeitig als Live-Beispiel dafür, was das Feld unterstützt.
• Ein WYSIWYG pro Inhaltsregion. Geben Sie dem Intro und dem Kleingedruckten separate Felder, anstatt die Redakteure aufzufordern, beide innerhalb eines Editors zu verwalten.
• Wählen Sie das leichtere Feld, wenn Sie können. Eine einzelne unformatierte Zeile gehört in ein Textfeld; Greifen Sie nach WYSIWYG, wenn Absätze, Listen oder Links tatsächlich Teil des Inhalts sind.
• Erwarten Sie kses bei der Ausgabe. Benutzerdefinierte Tags außerhalb der Liste nach dem Inhalt erlaubt wird nicht überleben, von Design. Einfügbare rohe Schnipsel sind die Codefeld's Job.

Häufig gestellte Fragen #

Einwickelnd #

Das Widget Builder WYSIWYG-Feld bietet Redakteuren die Schreiberfahrung, die sie bereits kennen, und gibt Ihnen ein einzelnes bereinigtes Token, das Sie im Markup platzieren können. Inhaltspersonen formatieren Bios und Beschreibungen visuell; Das Widget rendert sie sicher und stylt sie über sein eigenes CSS. Für einfügbare Rohausschnitte verwenden Sie die CodefeldKombinieren Sie WYSIWYG zum Wiederholen formatierter Blöcke mit dem Repeaterfeld. Erkunden Sie den Rest der Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.