Wat is WYSIWYG (wat je ziet is wat je krijgt)?

"What You See Is What You Get" (WYSIWYG) verwijst naar een interfaceontwerp waarmee gebruikers een livevoorbeeld kunnen zien van de content die ze maken of bewerken.

Wat is WYSIWYG?

"What You See Is What You Get" (WYSIWYG, uitgesproken als "wi∙zee∙wig") is een concept in de informatica dat een systeem of interface beschrijft waarbij de visuele weergave van content tijdens het bewerkingsproces nauw aansluit bij het uiteindelijke uiterlijk wanneer het wordt gepubliceerd of afgedrukt. Dit principe is fundamenteel in gebruikersinterface ontwerp, met name in toepassingen met inbegrip van documentcreatie, webontwikkeling en grafisch ontwerp.

Met een WYSIWYG-editor kunnen gebruikers direct de lay-out, opmaak en inhoud manipuleren zonder dat ze onderliggende code, opmaaktalen of opmaakinstructies hoeven te begrijpen of ermee hoeven te interacteren. Terwijl gebruikers tekst, afbeeldingen of andere elementen bewerken, zien ze een nauwkeurige weergave van hoe de inhoud er in de uiteindelijke vorm uit zal zien, wat de kloof tussen de creatie- en de outputfase aanzienlijk verkleint.

Wat is een WYSIWYG-editor?

Een WYSIWYG-editor is een softwaretool waarmee gebruikers content kunnen maken en bewerken met een live visuele preview die nauw aansluit bij hoe de content eruit zal zien als deze eenmaal is gepubliceerd of afgerond. In tegenstelling tot traditionele teksteditors waarbij de gebruiker met ruwe code of opmaaktags kan werken, biedt een WYSIWYG-editor een intuïtieve, grafische interface waarmee gebruikers elementen zoals tekst, afbeeldingen, tabellen en andere media rechtstreeks binnen de lay-out kunnen manipuleren.

Wanneer gebruikers wijzigingen aanbrengen, zoals het aanpassen van lettertypen, kleuren of lay-outs, wordt de editor in realtime bijgewerkt om deze wijzigingen weer te geven, waardoor gebruikers geen code hoeven te begrijpen of te schrijven. Dit maakt WYSIWYG-editors bijzonder waardevol voor taken zoals webdesign, tekstverwerking en het maken van e-mails, waarbij de uiteindelijke visuele presentatie cruciaal is. Ze worden veel gebruikt in contentmanagementsystemen (CMS), websitebouwers en documenteditors, die een gebruiksvriendelijke ervaring bieden die de kloof tussen ontwerp en implementatie overbrugt.

Hoe werkt een WYSIWYG-editor?

Een WYSIWYG-editor werkt door een realtime, visuele interface te bieden waarmee gebruikers content kunnen maken en bewerken zoals deze er in de uiteindelijke vorm uit zal zien. Dit is hoe het doorgaans werkt, stap voor stap:

Initialisatie van de gebruikersinterface. Wanneer een gebruiker een WYSIWYG-editor opent, initialiseert de software een grafische interface die lijkt op de uiteindelijke uitvoer. Deze interface bevat doorgaans een lege werkruimte (die vaak een webpagina, document of e-mail vertegenwoordigt) samen met werkbalken en menu's voor opmaak, het invoegen van media en het beheren van de lay-out.
Creëren en bewerken van content. De gebruiker begint met het typen van tekst, het invoegen van afbeeldingen of het toevoegen van andere inhoudselementen direct in de werkruimte. Terwijl ze dit doen, geeft de editor deze elementen weer zoals ze in het eindproduct zouden verschijnen, compleet met opmaak, kleuren, lettertypen en uitlijning.
Realtime weergave. Terwijl de gebruiker met de content interageert, verwerkt en rendert de WYSIWYG-editor continu de wijzigingen in realtime. Dit houdt in dat gebruikersinvoer, zoals tekstopmaak, plaatsing van afbeeldingen of insluiting van media, wordt omgezet in de juiste HTML, CSS, of andere onderliggende code, terwijl de visuele weergave op het scherm behouden blijft.
Generatie van code achter de schermen. Hoewel de gebruiker met een visuele interface communiceert, genereert en updatet de WYSIWYG-editor voortdurend de onderliggende code of markup op de achtergrond. Deze code dicteert hoe de content op verschillende platforms wordt weergegeven, zoals web browsers of gedrukte media.
Hulpmiddelen voor het manipuleren van inhoud. Gebruikers kunnen verschillende tools gebruiken die de editor biedt om content te wijzigen, zoals het aanpassen van lettergroottes, het toepassen van vetgedrukte of cursieve stijlen, het invoegen van links of het toevoegen van tabellen. Elke toolactie wordt direct weerspiegeld in de werkruimte, zodat de gebruiker precies kan zien hoe zijn wijzigingen eruit zullen zien.
Voorbeeld en aanpassing. Gebruikers hebben vaak de mogelijkheid om te schakelen tussen de WYSIWYG-weergave en een raw code-weergave (indien beschikbaar) om de benodigde fijnafstemmingen aan de onderliggende code te doen. Sommige editors bieden ook een "Preview"-modus, waarin gebruikers kunnen zien hoe de content eruit zal zien in de uiteindelijke omgeving, zoals een webbrowser of afgedrukte pagina.
Eindresultaat genereren. Zodra de gebruiker tevreden is met de inhoud, genereert de WYSIWYG-editor het uiteindelijke uitvoerbestand, zoals een HTML-bestand voor een webpagina, een PDF voor een document of opgemaakte tekst voor een e-mail. Dit bestand bevat de correct gestructureerde code of inhoud die kan worden gepubliceerd of gedistribueerd zoals bedoeld.

Kenmerken van de WYSIWYG-editor

WYSIWYG-editors hebben verschillende belangrijke kenmerken die ze uniek en gebruiksvriendelijk maken. Dit zijn de belangrijkste kenmerken:

Visuele bewerking in realtime. WYSIWYG-editors bieden een live, visuele weergave van content terwijl deze wordt gemaakt of bewerkt. Gebruikers kunnen precies zien hoe hun content er in de uiteindelijke vorm uitziet terwijl ze wijzigingen aanbrengen, zonder dat ze hoeven te schakelen tussen de bewerkings- en previewmodus.
Grafische gebruikersinterface (GUI). Deze editors hebben doorgaans een grafische gebruikersinterface (GUI) met werkbalken, knoppen en menu's voor het opmaken van tekst, het invoegen van afbeeldingen, het maken van tabellen en meer. Deze interface is ontworpen om intuïtief te zijn, zodat gebruikers taken kunnen uitvoeren met minimale technische kennis.
Generatie van onderliggende code. Terwijl gebruikers in een visuele omgeving werken, genereert de WYSIWYG-editor automatisch de benodigde code (bijv. HTML, CSS) op de achtergrond. Hierdoor kunnen niet-technische gebruikers complexe content maken zonder code te hoeven schrijven of begrijpen.
Drag-and-drop-functionaliteit. Veel WYSIWYG-editors bevatten drag-and-drop-functies waarmee gebruikers eenvoudig elementen zoals afbeeldingen, tekstblokken of widgets in hun content kunnen plaatsen. Dit verbetert het gebruiksgemak, met name voor lay-outontwerp en positionering.
Onmiddellijke feedback. Alle wijzigingen die in een WYSIWYG-editor worden aangebracht, worden direct in de visuele werkruimte weergegeven, waardoor de gebruiker direct feedback krijgt. Dit helpt gebruikers om snel de effecten van hun acties te zien en direct aanpassingen te maken.
Op sjablonen gebaseerd ontwerp. WYSIWYG-editors worden vaak geleverd met vooraf ontworpen sjablonen die gebruikers kunnen aanpassen. Deze sjablonen bieden een startpunt voor het maken van documenten, webpagina's of e-mails, waardoor het gemakkelijker wordt om snel professioneel ogende content te produceren.
Toegankelijkheid en bruikbaarheid. Deze editors zijn ontworpen om toegankelijk te zijn voor gebruikers van alle niveaus. De gebruiksvriendelijke interface, gekoppeld aan realtime editing, vermindert de leercurve en maakt het voor iedereen gemakkelijk om visueel aantrekkelijke content te produceren.
Cross-platform compatibiliteit. WYSIWYG-editors zijn vaak gebouwd om compatibel te zijn met verschillende platforms en apparaten. De content die in deze editors wordt gemaakt, is doorgaans ontworpen om consistent te lijken op verschillende browsers, apparaten en schermformaten.
Aanpassing en flexibiliteit. Hoewel WYSIWYG-editors primair zijn ontworpen voor gebruiksgemak, bieden veel editors ook geavanceerde aanpassingsopties. Gebruikers met programmeerkennis kunnen vaak overschakelen naar een codeweergave om de onderliggende code te verfijnen of aangepaste scripts.
Ondersteuning voor multimedia. WYSIWYG-editors ondersteunen vaak het invoegen en manipuleren van multimedia-elementen zoals afbeeldingen, video's en audiobestanden. Gebruikers kunnen deze elementen eenvoudig in hun content insluiten en aanpassen zonder dat ze de technische aspecten van multimedia-integratie hoeven te behandelen.

WYSIWYG-editorfuncties

WYSIWYG-editors bieden een reeks functies die zijn ontworpen om het maken van content te vereenvoudigen door gebruikers in staat te stellen content visueel te manipuleren en te formatteren. Hier is een lijst met veelvoorkomende WYSIWYG-functies, samen met uitleg:

Tekst opmaak. Hiermee kunnen gebruikers het uiterlijk van tekst wijzigen, zoals vet, cursief, onderstrepen en doorhalen. Gebruikers kunnen ook de lettergrootte, het type en de kleur aanpassen, en tekst uitlijnen (links, gecentreerd, rechts of uitgelijnd) en alinea-afstand instellen.
Invoegen en manipuleren van afbeeldingen. Hiermee kunnen gebruikers afbeeldingen in het inhoudsgebied invoegen en worden hulpmiddelen geboden om afbeeldingen te vergroten, bij te snijden, te roteren en uit te lijnen. Gebruikers kunnen ook alternatieve tekst (alt-tekst) toevoegen voor toegankelijkheidsdoeleinden en afbeeldingseigenschappen aanpassen, zoals randen, marges en links.
Hyperlinks. Hiermee kunnen gebruikers hyperlinks maken door tekst of afbeeldingen te selecteren en deze te koppelen aan externe URL's, e-mailadressen of interne secties van het document of de webpagina. WYSIWYG-editors bieden vaak opties om linkgedrag in te stellen, zoals het openen van een nieuw tabblad of venster.
Tabel maken en bewerken. Gebruikers kunnen tabellen maken, het aantal rijen en kolommen definiëren en het uiterlijk van tabelcellen aanpassen. Functies kunnen bestaan uit het samenvoegen of splitsen van cellen, het aanpassen van celvulling en -afstand en het instellen van randen of achtergrondkleuren.
Lijstbeheer. Biedt hulpmiddelen om geordende (genummerde) en ongeordende (opsommingstekens) lijsten te maken en op te maken. Gebruikers kunnen ook lijststijlen aanpassen, zoals het wijzigen van opsommingstekens of lijstnummeringsformaten (bijv. Romeinse cijfers, letters).
Media-insluiting. Hiermee kunnen gebruikers media zoals video's, audiobestanden en interactieve content (bijvoorbeeld kaarten of berichten op sociale media) rechtstreeks in de editor insluiten. Deze functie bevat vaak opties om media-afspeelinstellingen, afmetingen en uitlijning te regelen.
Codeweergave wisselen. Veel WYSIWYG-editors bevatten een functie om te schakelen tussen de visuele editor en een codeweergave. Hierdoor kunnen gevorderde gebruikers de onderliggende HTML, CSS of andere markup rechtstreeks bewerken, wat meer controle biedt over de uiteindelijke uitvoer.
Sjabloonbeheer. Hiermee kunnen gebruikers vooraf ontworpen sjablonen of lay-outs op de content toepassen. Deze functie helpt consistentie te behouden in documenten of pagina's en kan het proces van contentcreatie stroomlijnen door een gestructureerd startpunt te bieden.
Ongedaan maken/opnieuw uitvoeren en revisiegeschiedenis. Biedt de mogelijkheid om recente wijzigingen ongedaan te maken of acties die ongedaan zijn gemaakt opnieuw uit te voeren. Sommige editors bevatten ook een revisiegeschiedenisfunctie waarmee gebruikers eerdere versies van het document of de inhoud kunnen bekijken en ernaar kunnen terugkeren.
Spellingcontrole en grammaticahulpmiddelen. Controleert automatisch op spelfouten en grammaticale fouten terwijl de gebruiker typt, onderstreept fouten en doet suggesties voor correcties.
Interface met slepen en neerzetten. Hiermee kunnen gebruikers inhoudselementen verplaatsen door ze met de muis te slepen en ze op de gewenste locatie neer te zetten. Deze functie verbetert het gemak van lay-outontwerp, met name voor complexe pagina's of documenten.
Formulier maken en beheren. Gebruikers kunnen formulieren maken door velden toe te voegen zoals tekstinvoer, selectievakjes, keuzerondjes en dropdownmenu's. De editor biedt vaak opties voor het instellen van veldeigenschappen, validatieregels en indieningsacties.
Aangepaste stijlen en CSS-integratie. Geavanceerde WYSIWYG-editors stellen gebruikers in staat om aangepaste stijlen toe te passen of externe CSS-bestanden te integreren. Deze functie is handig voor het behouden van merkconsistentie of het naleven van specifieke ontwerprichtlijnen in meerdere documenten of webpagina's.
Real-time samenwerking. Sommige WYSIWYG-editors ondersteunen collaboratieve bewerking, waarbij meerdere gebruikers tegelijkertijd aan hetzelfde document kunnen werken. Deze functie omvat vaak functies zoals commentaar geven, wijzigingen voorstellen en bewerkingen in realtime volgen.
Opties voor exporteren en opslaan. Biedt opties om de inhoud op te slaan in verschillende formaten (bijv. HTML, PDF, DOCX) of te exporteren voor gebruik in andere applicaties of platforms. Deze functie zorgt ervoor dat de inhoud eenvoudig kan worden gedeeld of geïntegreerd in verschillende workflows.

WYSIWYG-voordelen en -nadelen

WYSIWYG-editors bieden aanzienlijke voordelen, met name in het vereenvoudigen van het proces van het maken van content en het toegankelijk maken ervan voor gebruikers met beperkte technische expertise. Ze hebben echter ook bepaalde beperkingen die van invloed kunnen zijn flexcontrole over het eindresultaat.

Voordelen:

WYSIWYG-editors zijn een hoofdbestanddeel geworden in het maken van content vanwege hun gebruiksvriendelijke ontwerp en krachtige functies. Hieronder staan enkele van de belangrijkste voordelen die deze editors een populaire keuze maken voor een breed scala aan gebruikers, van beginners tot professionals:

Gebruiksgemak en toegankelijkheid. WYSIWYG-editors zijn ontworpen om intuïtief te zijn, zodat gebruikers content kunnen maken en bewerken zonder dat ze codering of technische details hoeven te begrijpen. Ze bevatten drag-and-drop-functies waarmee gebruikers eenvoudig elementen, zoals afbeeldingen, tekstblokken en widgetsDoor een grafische interface te bieden die de complexiteit van codering abstraheert, democratiseren WYSIWYG-editors het maken van content, waardoor een breder scala aan personen kan deelnemen.
Visuele feedback in realtime. Een van de belangrijkste voordelen van WYSIWYG-editors is dat ze een live preview van de content bieden zoals deze er in de uiteindelijke vorm uit zal zien. Deze realtime feedback stelt gebruikers in staat om de directe effecten van hun wijzigingen te zien, zodat de output aan hun verwachtingen voldoet.
Snellere contentcreatie. Door de noodzaak om handmatig content te coderen of formatteren te elimineren, versnellen WYSIWYG-editors het proces van contentcreatie. Gebruikers kunnen zich richten op de creatieve aspecten in plaats van vast te lopen in technische details, wat met name gunstig is voor taken zoals webdesign, documentcreatie en e-mailmarketing.
Consistentie tussen platforms. WYSIWYG-editors worden vaak geleverd met ingebouwde sjablonen en stijlgidsen die helpen de visuele consistentie op verschillende pagina's of documenten te behouden. Dit is vooral belangrijk voor bedrijven en merken die een uniforme look en feel moeten garanderen voor hun content.
Integratie met content management systemen (CMS). Veel WYSIWYG-editors zijn naadloos geïntegreerd in populaire CMS-platforms, waardoor gebruikers content rechtstreeks vanuit de editor kunnen maken en publiceren. Deze integratie stroomlijnt workflows en maakt het eenvoudiger om content op websites en andere digitale platforms te beheren en bij te werken.

Nadelen

Hoewel WYSIWYG-editors talloze voordelen bieden bij het vereenvoudigen van het maken van content, hebben ze ook hun beperkingen. Het begrijpen van deze nadelen is cruciaal voor gebruikers die moeten beslissen of een WYSIWYG-editor de juiste tool is voor hun specifieke behoeften. Ze omvatten:

Beperkte precisie en controle. WYSIWYG-editors abstraheren vaak de onderliggende code, wat kan leiden tot een gebrek aan precisie bij het finetunen van content. Geavanceerde gebruikers die specifieke controle over HTML, CSS of andere code nodig hebben, vinden de vereenvoudigingen van de editor mogelijk beperkend, omdat het moeilijk kan zijn om zeer aangepaste lay-outs of gedragingen te bereiken.
Potentieel voor slecht geoptimaliseerde code. De code die door WYSIWYG-editors wordt gegenereerd, is niet altijd geoptimaliseerd voor prestaties of best practices. Dit kan resulteren in opgeblazen of inefficiënte code, die de laadtijd van pagina's kan vertragen, SEO kan beïnvloeden of compatibiliteitsproblemen kan veroorzaken op verschillende browsers of apparaten.
Inconsistente cross-browser/platform output. Hoewel WYSIWYG-editors ernaar streven om content weer te geven zoals deze in de uiteindelijke uitvoer zal verschijnen, kunnen er inconsistenties optreden wanneer de content wordt bekeken in verschillende browsers of platforms. De preview van de editor weerspiegelt mogelijk niet altijd nauwkeurig hoe de content in verschillende omgevingen wordt weergegeven, wat leidt tot onverwachte discrepanties.
Beperkte schaalbaarheid voor grote projecten. Voor grootschalige projecten of complexe contentmanagementsystemen zijn WYSIWYG-editors mogelijk niet goed schaalbaar. Het beheren van uitgebreide codebases, het garanderen van consistentie op meerdere pagina's, of het integreren met aangepaste backend systemen kunnen een uitdaging vormen als je de onderliggende code niet rechtstreeks kunt manipuleren.
Risico op onbedoelde gevolgen. Gebruikers kunnen onbedoeld fouten of ongewenste opmaakwijzigingen introduceren tijdens het gebruik van een WYSIWYG-editor. Bijvoorbeeld, het slepen van elementen of het wijzigen van stijlen kan cascade-effecten hebben die niet direct zichtbaar zijn, wat kan leiden tot problemen die later moeilijk op te lossen zijn.

Voorbeelden van WYSIWYG-editors

Hier zijn enkele populaire voorbeelden van WYSIWYG-editors:

Adobe Dreamweaver. Een uitgebreide webontwikkelingstool die zowel WYSIWYG-bewerking als directe codebewerking biedt. Dreamweaver wordt veel gebruikt door webdesigners en -ontwikkelaars voor het maken en beheren van websites, en biedt robuuste ondersteuning voor HTML, CSS en JavaScript met realtime previews.
KleinMCE. Een populaire open-source WYSIWYG-editor die in veel content management systemen (CMS) en webapplicaties wordt gebruikt. TinyMCE is zeer aanpasbaar en biedt een rijke tekstbewerkingservaring, waardoor gebruikers eenvoudig content kunnen maken en formatteren.
CKEditor. Een andere veelgebruikte open source WYSIWYG-editor, CKEditor staat bekend om zijn flexibiliteit en een breed scala aan functies. Het ondersteunt het bewerken van rijke tekst, het insluiten van afbeeldingen en media en biedt uitgebreide aanpassingsopties, waardoor het geschikt is voor zowel eenvoudige als complexe contentcreatie.
Froala-editor. Een lichtgewicht en snelle WYSIWYG-editor die vaak wordt geïntegreerd in webapplicaties en platforms. Froala Editor staat bekend om zijn responsieve ontwerp, gebruiksgemak en een breed scala aan functies, waaronder inline editing, mediabeheer en realtime samenwerking.
WordPress Gutenberg. De standaard editor voor WordPress, Gutenberg is een op blokken gebaseerde WYSIWYG editor waarmee gebruikers berichten en pagina's kunnen maken en ontwerpen met een visuele drag-and-drop interface. Het vereenvoudigt het proces van het bouwen van complexe lay-outs, waardoor het niet meer nodig is om code te schrijven.
Schacht. Een open-source WYSIWYG-editor die zich richt op het bieden van een eenvoudige en gebruiksvriendelijke interface. Quill is ontworpen om zeer aanpasbaar en uitbreidbaar te zijn, waardoor het een goede keuze is voor ontwikkelaars die een WYSIWYG-editor in hun applicaties willen integreren.