Je kent het wel, de WYSIWYG editor waar je tekst mee op de pagina's van je website of webshop plaatst. Ook het CMS gedeelte van Magento bevat de WYSIWYG editor. Heel handig maar de editor wekt vanwege zijn naam vaak de verkeerde indruk. WYSIWYG is namelijk een acroniem voor “What You See Is What You Get”. Maar is dit wel zo? We zien de verwachtingen en het gebruik van de editor vaak verkeerd zijn. Onze e-commerce developer Jasper Zeinstra is expert op het gebied van front-end visualisering en geeft in dit artikel heldere uitleg en insights voor een optimaal gebruik van de editor voor jouw webshop.

WYSIWYG editor & Magento

Magento maakt gebruik van de TinyMCE 3.4.7 javascript WYSIWYG editor. Deze editor maakt het mogelijk om HTML-tags te schrijven in een visuele weergave. Dit is handig voor mensen die weinig tot geen kennis hebben van het schrijven in HTML code. In de editor heb je de mogelijkheid om koppen, paragrafen, links, afbeeldingen, tabellen, etc. te maken zonder enige kennis van HTML nodig te hebben. De opmaak die jij selecteert wordt op de achtergrond omgezet naar nette HTML tags.

In Magento wordt de editor gebruikt bij het schrijven van teksten voor producten, categorieën, pagina’s, statische blokken, op je contentpagina’s, productpagina’s en andere locaties binnen je shop. Daarom is het belangrijk om te weten waar de editor precies in Magento voor bedoeld is. Voor het goed toepassen van alle functionaliteit geef ik je hierbij uitleg en tips.

What you see is NOT what you get

HTML tags

Bij een kreet als “What You See Is What You Get” verwacht je dat alle tekst die je invoerd ook op dezelfde manier getoond wordt in je webshop. Dit is helaas nooit het geval. De styling die binnen de editor wordt toegepast is niet gelijk aan die van de webshop. Hierdoor is deze term niet waar en brengt het vaak verwarring met zich mee. Het werken met de editor vereist dus een andere insteek dan het visueel opmaken van teksten. Je dient aan te geven bij de verschillende teksten wat de juiste HTML-tag hierbij is. De opmaak van je thema bepaalt daarna de styling van deze elementen. Het is dus belangrijk om te weten wanneer je welke kop moet gebruiken, paragrafen juist in te stellen, lijsten en tabellen maken, etc.

Tekst plakken van uit Word

Vaak zien we dat mensen het prettig vinden om eerst de tekst te schrijven in Word of een andere tekstverwerker. Dit soort programma’s geven zelf een bepaalde style mee aan de teksten. Een style kan bijvoorbeeld het gebruikte lettertype, grote of kleur zijn. We willen voorkomen dat deze styles meegenomen worden tijdens het plakken van de tekst in de WYSIWYG editor. Als de style, die bijvoorbeeld Word automatisch toe kent, wel wordt meegenomen met de tekst tijdens het plakken in de Magento WYSIWYG editor wordt de HTML-code vervuild met de styling die bepaald is in Word. Deze styling overschrijft de styling van het thema. Dit zorgt voor onnodig veel extra code en een wir-war van verschillende lettertypes, lettergrotes, kleuren, etc.

Bij het plakken vanuit Word of een andere tekstverwerker adviseer ik dan ook om voor het plakken de daarvoor behorende knop  “Plakken vanuit Word” te gebruiken. Deze zorgt er voor dat tijdens het plakken alleen de tekst geplakt wordt en verwijderd alle styling. Vervolgens dien je opnieuw de tekst technisch op te maken. Stel de juiste koppen in; teksten moeten in een 'Paragraaf style' staan; Bold en Italic style toepassen; links toevoegen; afbeeldingen plaatsen; tabellen aanmaken; etc.

Plakken vanuit word

Afbeeldingen toevoegen

Magento biedt de mogelijkheid om afbeeldingen toe te voegen aan alle teksten die gebruik maken van de editor. Helaas is het proces om dit te doen niet altijd in een keer duidelijk. Bij het klikken op de knop  'Insert / Edit image' wordt namelijk een nieuw venster geopend. Hier kunnen alle eigenschappen van de afbeelding ingevuld worden. Er zal wel eerst een afbeelding gekozen moeten worden. Door het klikken op  'Bladeren' opent zich een 'pop-over' in het initieële browser scherm van Magento. Hierin heb je de mogelijkheid om een afbeelding te kiezen of up te loaden. Zodra je dit doet raak je de focus van het hiervoor verschenen venster kwijt. Nadat je een afbeelding gekozen hebt wordt de URL hiervan toegevoegd aan dit venster. We kunnen de afbeelding daarna toevoegen aan de editor door het vorige venster te bekijken en daar op de knop 'Insert' te drukken. De afbeelding wordt dan, met alle eigenschappen die je eventueel hebt aangegeven, geplaatst in de editor.

Afbeelding toevoegen

De editor versimpelen

Als je de editor bekijkt heb je ontzettend veel knoppen met allemaal verschillende mogelijkheden. De meeste van deze knoppen heb je nooit nodig. Dit zijn namelijk knoppen die het mogelijk maken om je eigen styling toe te passen. De editor is niet verantwoordelijk voor styling, maar het thema van Magento. Via een extensie is het mogelijk deze knoppen uit te schakelen waardoor het beter en overzichtelijker werken is met de editor.

Editor knoppen

Beperkingen WYSIWYG editor

Lange tijd is het zo geweest dat voor het opmaken van aantrekkelijke contentpagina’s of content gedeeltes dit niet mogelijk was zonder uitgebreide HTML of CSS kennis. De WYSIWYG editor heeft dit probleem willen weghalen. Toch blijven de mogelijkheden beperkt en kan enige HTML kennis de opmaak mogelijkheden van je pagina’s en tekst vergroten. Denk hierbij aan het toevoegen van kolommen of andere style gerelateerde elementen. Het is dus niet zo dat de WYSIWYG editor een complete vervanging is. In tegendeel. In een volgende training zal ik je daarom ook wegwijs maken in de ‘principles of html content’.