Vad är det? WYSIWYG (Vad du ser är vad du får)

WYSIWYG är en akronym för What You See Is What You Get. Det används för tools där du skapar/editerar content i realtid och ser en live preview medan du arbetar.

Dessa editors är otroligt användbara på nätet, särskilt när du skapar content för websites. Om du skriver ett blogginlägg, utformar ett email eller designar en webbsida, gör en WYSIWYG editor jobbet enklare och mer effektivt.

Varför använda WYSIWYG Editor?

WYSIWYG editors har många funktioner som förbättrar din process för att skapa content. Funktionerna och utseendet är allmänt sett desamma om du har en WordPress website eller använder ett annat CMS (Content Management System).

För det mesta kommer du att upptäcka att de alla har följande funktioner:

Format för text: Dessa editors allow you to bold, italic, underline, and strikethrough your text just like you would in a word processor. Faktum är att dessa ofta anropas som textredigerare eftersom de allow you att editera content på ett bekant sätt, precis som i Microsoft Word.
Links (länkar): You can easily add links to your content by simply clicking a button in a toolbar and pasting the URL. Du behöver inte add to eller edit HTML-kod för att skapa ditt content.
Images: Att lägga till images är en barnlek. Du kan uploada dem direkt från din device eller insert dem från en onlinekälla. Många WYSIWYG editors låter dig till och med klistra in en image direkt inline.
Skapande av tabeller: Behöver du presentera data på ett snyggt sätt? WYSIWYG editors aktiverar dig för att skapa tabeller i ditt content utan att behöva hantera andra webbapplikationer, som Google Sheets, eller behöva speciella embeds.

Men det är inte alltihop. WYSIWYG editors erbjuder också funktioner som gillar stavningskontroll, källkod view, och mer. Alla dessa funktioner gör det lättare för dig att fokusera på att skapa content av hög kvalitet utan att behöva oroa dig för att lära dig PHP, CSS eller webbdesign.

Ytterligare funktioner i WYSIWYG Editors

Förutom ovanstående tenderar WYSIWYG editors att ha en massa funktioner som är utformade för att förenkla och förbättra din process för att skapa content.

De flesta WYSIWYG editors har built-in stavningskontroll. Detta built-in-verktyg är ganska praktiskt, eftersom det automatiskt understryker felaktigt stavade ord, vilket hjälper you att undvika pinsamma stavfel i your content.

En annan mycket viktig del av WYSIWYG är HTML code view. Detta gör att du kan växla mellan den visuella designen och markeringsvyerna sömlöst.

Att titta på HTML-koden är perfekt när du behöver troubleshoota saker.

Det kan vara saker som gillar issues med images eller felaktigt format på text på grund av copy and paste.

Eller ej, många WYSIWYG editors kommer med en robust uppsättning av design tools. Exempelvis är Gutenberg editor för WordPress ett interaktivt drag and drop-designverktyg som låter dig skriva content och använda templates för att skapa vad du än kan föreställa dig framför dina ögon.

Gränssnittet är alltid användarvänligt, så även om du ej är ett tekniskt geni kommer du att kunna få ditt content att se professionellt och polerat ut med bara några clicks.

WordPress Block Editor

Gutenberg Editor introducerades 2018 och har förändrat användargränssnittet för att skapa content med WordPress.

I sin core är Gutenberg en blockbaserad editor som du kan använda på antingen front-end eller back-end på din site.

Istället för att skriva och designa i ett stort textområde, som i en textredigerare som TinyMCE, skapar du ditt content med enskilda block. TinyMCE är en WYSIWYG-editor med open source som används som bas för den tidigare WordPress Content Editor, som nu anropas som den klassiska Editorn.

Dessa kan vara allt från stycken och headings till images, videoklipp, citat eller till och med mer komplexa element som tabeller eller custom HTML markup.

Varje Gutenberg-block kan anpassas individuellt och flyttas runt, vilket ger dig oöverträffad kontroll över ditt innehålls layout och design. Du kan till och med använda förgjorda mönster som kallas Patterns för att ha en mall att arbeta med direkt i block editor.

Du kan flytta runt block i realtid och se exakt hur ditt blogginlägg eller din landing page kommer att se ut innan du publicerar.

Gutenberg är dock inte den enda WYSIWYG-editorn för webbdesign. Webbplatsbyggare som inte är WordPress, som Squarespace, erbjuder WYSIWYG edit, och andra WordPress teman och tillägg som SeedProd och Divi gör det också.

SeedProds WSYIWYG-gränssnitt är enkelt och intuitivt, om du redigerar text eller hela din layout.

Många av dessa tools har mer avancerad funktionalitet och bättre användarupplevelse än Gutenberg, så många Pro-användare börjar använda dem när de fortsätter att förbättra sina färdigheter inom webbutveckling.

Vanliga issues i WYSIWYG Editing

När du börjar använda WYSIWYG editors allt oftare är det oundvikligt att du stöter på några issues eller hinder. Men oroa dig inte för det! De flesta av dessa vanliga problem har enkla lösningar. Låt oss ta en titt på några av dem.

Format Issues

En vanlig issue som du kan stöta på är format. Det kan till exempel hända att din text inte är korrekt justerad eller att storleken på fonten ej justeras som du vill. Detta beror ofta på att kopierad text innehåller ytterligare HTML, CSS eller till och med JavaScript.

För att fixa detta, försök att klistra in din text i en plain text editor först, gillar Notepad ++. Kopiera den sedan därifrån till WYSIWYG-editorn. Detta tar vanligtvis bort all ytterligare kod, vilket tillåter WYSIWYG-redigeraren att bättre formatera texten.

Om du gör detta kommer även länkar och images att tas bort, så du måste infoga dem igen med hjälp av textredigeraren eller HTML code view.

Images visas inte

Ett annat vanligt issue är att images inte visas korrekt eller ej alls. Det kan bero på att URL:en till bilden är felaktig eller att bildfilen inte stöds. Dubbelkontrollera alltid att din URL är korrekt. Om du uppladdar images, se till att de är i ett webbvänligt format, t.ex. .jpg, .png eller .gif.

Om du till exempel använder ett format som .svg behöver WordPress en extra tweak för att fungera korrekt. För mer information kan du kontrollera vår guide om hur du får SVG-filer att fungera säkert med WordPress.

Oväntade ändringar i koden

Ibland kan du upptäcka att koden ändras oväntat efter att du har saved. WYSIWYG-redigerare är inte perfekta och kan add to ytterligare HTML eller CSS som du inte hade tänkt dig. Detta kan ändra utseendet och känslan av your content.

För att åtgärda detta kan du växla till HTML code view och manuellt remove all oönskad kod. Var dock försiktig, eftersom du behöver en grundläggande förståelse för HTML markup för att göra detta på ett säkert sätt.

Kompatibilitetsproblem med webbläsare

Slutligen kan du stöta på issues när du viewar ditt content i olika webbläsare. All webbläsare tolkar ej HTML och CSS på samma sätt, och JavaScript kan fungera olika beroende på dina systeminställningar.

Allt detta kan leda till inkonsekvenser i hur ditt content visas. Testa alltid din site i flera webbläsare, inklusive Chrome, Firefox, Safari och Microsoft Edge, för att vara säker på att ditt content ser bra ut oavsett var det viewas.

Slutliga tankar om WYSIWYG Editors

WYSIWYG-editorer, som WordPress Gutenberg Block Editor eller till och med den äldre, open source TinyMCE klassiska editorn, är viktiga tools som kan förenkla din process för att skapa content avsevärt.

Med funktioner som gillar drag and drop-redigering i realtid, HTML code view och templates, allow these web design tools you to focus more on your content’s quality rather than coding.

Vi hoppas att detta har lärt dig mer om WYSIWYG editors och hur de kan hjälpa dig att förbättra din webbdesign. Du kan också kontrollera våra expertval av de bästa drag and drop page builders för WordPress och vår guide om hur du väljer det bästa webbdesignprogrammet för din site.

Ytterligare resurser

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Vad är: WYSIWYG (Vad du ser är vad du får)