WYSIWYG

The WYSIWYG-feltet dropper den fulde TinyMCE editor, den samme rich-text editor WordPress har sendt i årevis, ind i en brugerdefineret widgets panel. Redaktører får fed, kursiv, lister, links, overskrifter og den visuelle / tekstfane switch, de allerede kender. Din widget modtager formateret HTML klar til at udskrive. Inde i Master Addons Widget Builder, er dette feltet for indholdsregioner, hvor en almindelig Textarea ville flade formateringen ud af teksten.

WYSIWYG-feltet understøtter Betingelser som enhver anden kontrol, og dens indhold gengives gennem Twig-syntaks skabelon motor. WYSIWYG værdier holde deres sikker HTML automatisk, så du sjældent har brug for den |raw filter. Begge vejledninger forklarer detaljerne og begrænsningerne.

Forbindelsen er ét token. Udskriv {{ your_field_name }} i HTML-panelet og den lagrede markup gengives der, filtreret igennem wp_kses_post, så formateringen overlever, mens usikre tags strippes. Ingen ekstra filtre, ingen undslippende gymnastik.

Hvad WYSIWYG feltet gør #

• Gengiver TinyMCE-rige teksteditoren i widgettens Elementor-panel med fanerne Visual og Text.
• Gemmer editorens output som en HTML-streng.
• Udskriver den HTML gennem {{ your_field_name }}, passerede igennem wp_kses_post på output.
• Holder formateringen intakt: afsnit, fed, kursiv, lister, links og overskrifter gengives alle.
• Understøtter dynamiske værdier, så indholdet kan komme fra dynamiske tags, hvor opsætningen giver dem.

Første widget? Den Widget Builder oversigt dækker redaktøren grundlæggende denne side bygger på.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
• En brugerdefineret widget åben i Widget Builder editor. Vores eksempel er et team medlem kort widget med et WYSIWYG felt opkaldt member_bio holder hver persons formaterede biografi.

Sådan tilføjes et WYSIWYG-felt #

Træk WYSIWYG felt fra panelet felter til en sektion under Content tab, det naturlige hjem for langformigt indhold. Dens muligheder åbnes til venstre, når den lander.

WYSIWYG feltindstillinger forklaret #

Optionslisten forbliver lille, fordi editoren selv bærer kompleksiteten:

• Etiket: teksten vist over redaktøren i Elementor, for eksempel “Member Bio”.
• Navn: den unikke identifikator, dine skabeloner henviser til. Kun bogstaver, tal og understregninger, f.eks member_bio.
• Standard: startindholdet, og det kan omfatte opmærkning. Et kort formateret afsnit viser redaktører, hvad regionen er til for, og beviser, at formateringen virker.
• Dynamisk: feltet accepterer dynamiske værdier, så indhold kan kobles til dynamiske tags i stedet for at skrive i hånden.

Forbind WYSIWYG-feltet med dets token #

Feltet WYSIWYG er et tokenfelt. Et token i HTML-panelet placerer hele indholdsområdet:

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

Ved output passerer værdien igennem wp_kses_post, filteret WordPress gælder for post indhold. De tags TinyMCE producerer, afsnit, stærk og em, lister, links, overskrifter, billeder, er alle på den tilladte liste, så hvad redaktører format er hvad der gengiver. Alt usikkert, der sniger sig ind gennem fanen Tekst, som en <script>, strippes.

Pas på: tilføj ikke |raw til et WYSIWYG-token af vane. Det almindelige token gengiver allerede formateringen, fordi wp_kses_post tillader markeringen TinyMCE skriver; |raw fjerner kun sikkerhedsfilteret uden at ændre, hvordan en normal bio ser ud. Hvis outputtet ser ud undslap i stedet for gengivet, er årsagen et andet sted, ikke et manglende filter.

Pak tokenet ind i en beholder med en klasse, som i eksemplet, og stil området fra CSS-panelet:

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

Brug WYSIWYG-kontrolelementet i Elementor #

Tilføj din brugerdefinerede widget til en side i Elementor, eller genindlæs editoren, hvis siden allerede var åben. Feltet gengives som en fuld TinyMCE editor i panelet: værktøjslinje øverst, Visual og Text faner i hjørnet, Tilføj medie, hvor opsætningen tillader det.

Redaktører skriver og formaterer nøjagtigt som de ville i et indlæg: vælg tekst, fed den, tilføj et link, start en liste. Forhåndsvisningen opdateres, mens de skriver, og viser indholdet stylet af widgetens CSS.

Når en bio gengives mærkeligt, skal du kontrollere fanen Tekst, før du giver widgetten skylden. Indhold, der er indsat fra Word eller Google Docs, bærer ofte omstrejfende spændvidder og inline-stile, og de er alle synlige der. Rengøring af markeringen i fanen Tekst retter normalt layoutet på stedet.

Almindelige brugstilfælde #

• Bios og profiler i team-, forfatter- og højttalerwidgets.
• Lange beskrivelser i service-, produkt- og funktionskort, hvor en overskrift eller liste hører hjemme i teksten.
• Vidnesbyrdorganer der har brug for at bevare fremhævning og linjeskift.
• Fodnoter og ansvarsfraskrivelser med inline links til politikker.
• Enhver klientredigeret tekstregion hvor formatering betyder noget, og klienten aldrig bør se HTML.

Tips til at arbejde med WYSIWYG feltet #

• Udskriv det almindelige token. {{ member_bio }} gengiver formateringen som den er; |raw tilføjer risiko uden at tilføje kapacitet her.
• Stil gennem en indpakningsklasse. Target .tm-bio p, .tm-bio ul, og venner i CSS-panelet snarere end at håbe editor output ankommer pre-stylet.
• Indstil en formateret standard. En bio med et fed navn og et link fungerer også som et levende eksempel på, hvad feltet understøtter.
• Én WYSIWYG pr. indholdsregion. Giv introen og det med småt separate felter i stedet for at bede redaktører om at administrere begge inde i én editor.
• Vælg det lettere felt, når du kan. En enkelt uformateret linje hører hjemme i et tekstfelt; nå ud til WYSIWYG, når afsnit, lister eller links virkelig er en del af indholdet.
• Forvent kses på output. Brugerdefinerede tags uden for listen over tilladte post-indhold vil ikke overleve, efter design. Indsættelige rå uddrag er Kodefelt's job.

Ofte stillede spørgsmål #

Indpakning #

Widget Builder WYSIWYG-feltet giver redaktører den skriveoplevelse, de allerede kender, og giver dig et enkelt desinficeret token, som du kan placere i opmærkningen. Indholdsfolk formaterer bios og beskrivelser visuelt; widgeten gengiver dem sikkert og styler dem gennem sin egen CSS. Brug de indsættelige rå uddrag til indsættelse Kodefelt, og for at gentage formaterede blokke kombinere WYSIWYG med Repeaterfelt. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.