WYSIWYG

WYSIWYG-feltet sætter WordPress's rige teksteditor i en brugerdefineret widget, du bygger med Master Addons Widget Builder. Redaktører får fed, kursiv, links, lister og knappen Tilføj medie, den samme værktøjslinje, som de bruger, når de skriver et indlæg. Din widget modtager formateret HTML og udskriver det med et token. Det er feltet for enhver tekstregion, hvor et almindeligt Textarea ville udjævne formateringen.

WYSIWYG er et af de felter, du kan bruge i den gratis versions Widget Builder. Det gratis plugin indeholder en begrænset Widget Builder, og det fulde sæt af felter leveres med Master Addons Pro.

Hvad WYSIWYG feltet gør #

• Tilføjer rich text editor til din widgets panel i Elementor, med Visual og Code faner og en Tilføj medie knap.
• Gemmer det, redaktører skriver som HTML.
• Udskriver det gennem et token som f.eks {{ member_bio }}, filtreret den måde, WordPress filtrerer post indhold.
• Bevarer formateringen: afsnit, fed, kursiv, links, lister og overskrifter gengives alle.
• Tager en standardværdi, som kan omfatte markup, så en frisk widget viser et udført eksempel.

Ny hos bygherren? Læs den Widget Builder oversigt først, så kom tilbage med en widget åben.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Den installationsvejledning covers opsætning.
• En widget åben i Widget Builder. Eksemplet i denne vejledning er en “Teammedlem” widget: Tekstfelter til navnet og rollen, og et WYSIWYG-felt navngivet member_bio til biografien.

Sådan tilføjes et WYSIWYG-felt #

1. Gå til Master Addons > Widget Builder og åbn din widget.
2. Tilføj et afsnit om Content fane, for eksempel “Medlem”.
3. Type wysi i feltsøgefeltet til venstre.
4. Drag WYSIWYG ind i sektionen. Klik på blyanten på feltet for at åbne dens indstillinger.

WYSIWYG feltindstillinger forklaret #

• Etiket: teksten over editoren i Elementor, for eksempel “Bio”. Feltet starter ud mærket “Indhold”.
• Navn: feltets unikke id og navnet på dets token. Brug kun bogstaver, tal og understregninger, f.eks member_bio.
• Beskrivelse: et tip vist under redaktøren i Elementor. Brug det til at indstille forventninger, såsom “To eller tre sætninger. Fed, links og lister er fint.”
• Standardværdi: startindholdet. Dette er en almindelig tekstboks, så skriv HTML selv, for eksempel et afsnit med en strong tag og et link.

Etiketblok er tændt som standard her, hvilket er hvad du vil: editoren har brug for panelets fulde bredde. Forlad Vælger tom, da en tekstblok ikke er en CSS-værdi.

Resten af Fælles indstillinger opfører sig som på andre felter, herunder Betingelser hvis regionen kun skal vises, når et andet felt er indstillet.

I vores test viste feltkortet inde i bygherren standardværdien som rå HTML i sin lille preview-editor. Det er kun bygherrens egen preview. Elementor gengiver den samme standard som formateret tekst.

Udskriv indholdet i din skabelon #

Én token placerer hele regionen. Pak det ind i en beholder, du kan style, og bevogt det, så et tomt felt ikke efterlader nogen vildfaren indpakning:

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

Style regionen fra CSS-panelet ved at målrette de tags, redaktøren skriver:

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

Tilføj ikke raw til et WYSIWYG-token. Det almindelige token gengiver allerede formateringen, og raw fjerner kun sikkerhedsfilteret.

Hvad filteret holder og taber #

Værdien går gennem det samme filter, WordPress bruger til postindhold. I vores tests, overskrifter, afsnit, strong, em, lister, links og endda inline style attributter kom uændret igennem. En iframe blev fjernet, og et script-tag blev fjernet uden at køre.

En detalje at vide, før du afleverer widget til en klient: når et script-tag blev indsat gennem fanen Kode, blev tagget strippet, men JavaScript inde i det forblev på siden som almindelig tekst, så en linje kode dukkede op i midten af bio. Intet advarer dig. Fortæl redaktører at indsætte tekst, ikke indlejrer, og tjek fanen Kode, hvis omstrejfende tegn vises på en side.

Brug WYSIWYG-kontrolelementet i Elementor #

Tilføj widgetten til en side, eller genindlæs editoren, hvis siden allerede var åben. Feltet viser den fulde editor under din etiket: Tilføj medie, fanerne Visual og Code, en rulleliste i afsnitsformat, fed, kursiv, understregning, lister, en link-knap og fuldskærm.

Redaktører skriver, som de gør i et indlæg. Forhåndsvisningen opdateres, så snart fokus forlader editoren. Den Code faneblad viser den underliggende HTML, som er praktisk til oprydning af indsat formatering.

Her er det færdige kort på forenden, med den fede sætning, linket og listen, der alle kommer fra feltet:

Almindelige brugstilfælde #

• Teammedlemsbiografier og forfatterbokse.
• Funktions- eller servicebeskrivelser, der har brug for en liste eller en fed sætning.
• Vidnesbyrdorganer med et citat og en tilskrivningslinje.
• Ethvert tekstområde i lang form i et kort, en boks eller en panelwidget.

Tips til at arbejde med WYSIWYG feltet #

• Giv det en standardværdi med ægte markup. Redaktører ser derefter den slags indhold, som regionen forventer, og du kender formateringsgengivelserne.
• Indstil længden i beskrivelsen. “To eller tre sætninger” gemmer en masse layoutrettelser senere.
• Style mærkerne, ikke teksten. Regler for p, a og ul inde i din indpakningsklasse skal du holde regionen konsekvent, uanset hvad redaktører skriver.
• Bevogt tokenet med {% if %} så et tomt felt efterlader ikke en tom indpakning på siden.
• Kun almindelig tekst? The Tekstområdefelt er lettere. For indsatte markup eller indlejre uddrag, bruge den Kodefelt.

Ofte stillede spørgsmål #

Indpakning #

Slip et WYSIWYG-felt i en indholdssektion, giv det en klar etiket, en nyttig beskrivelse og en standardværdi med ægte markering, og udskriv derefter tokenet inde i en {% if %} bevogte og style tags fra CSS-panelet. Redaktører får værktøjslinjen de allerede kender og din widget får ren formateret HTML. For almindelig tekst brug den Tekstområdefelt, for indklæbede uddrag den Kodefelt, og kontrollere prissætning for hvad hver plan indeholder.