Codeweergave

De codeweergave stelt je in staat de onderliggende HTML van een artikel direct in de Advanced WYSIWYG-editor te inspecteren en te bewerken, waardoor je controle hebt over de opmaak die de visuele editor niet kan blootleggen.

Wanneer kun je Code-weergave gebruiken?

• Voeg aangepaste HTML-elementen in die de visuele werkbalk niet ondersteunt
• Pas inline stijlen toe op specifieke elementen
• Embed FontAwesome of andere pictogramfragmenten
• Los fouten die niet ondersteund worden door de editor gemarkeerd
• Voeg symbolen of iconen toe aan tabelcellen
• Zoeken binnen HTML met behulp van Ctrl + F

Automatische HTML-opmaak

De editor standaardiseert automatisch inspringing en spatiëring elke keer dat je Codeweergave opent. Dit werkt alleen bij invoer — niet bij opslaan of publiceren — en heeft geen invloed op aangepaste HTML- of scriptblokken.

Zoeken in Codeweergave

Gebruik de ingebouwde zoekfunctie om specifieke HTML-elementen of tekst binnen de code te vinden.

Wijzigingen in het opslaan

Wijzigingen in de Codeweergave worden niet automatisch opgeslagen. Druk Ctrl + S voordat je terugschakelt naar de visuele editor of wegnavigeert.

Niet-ondersteunde HTML-tags en attributen

De editor markeert niet-ondersteunde HTML-tags en attributen in plaats van ze te verwijderen, zodat je ze kunt bekijken en corrigeren.

Wanneer gebeurt dit?

• Bij het overschakelen van een artikel van de WYSIWYG-editor naar de Advanced WYSIWYG-editor wordt niet-ondersteunde inhoud automatisch gemarkeerd. Veelgebruikte tags zoals <sup>, <a name="...">, , <select>, <colgroup>en <img> worden automatisch afgehandeld. Deze tags worden genegeerd tijdens het toevoegen van de wrapper en triggeren geen vlag.
• Wanneer je niet-ondersteunde tags of attributen direct in Codeweergave toevoegt, markeert de editor ze bij het parsen.

Wat de redacteur doet

• Detecteert niet-ondersteunde tags (bijv. <marquee>, ) <blink>en attributen (bijv. onmouseover, ) style="text-decoration:blink"
• Markeert gemarkeerde elementen met tooltips en blokmarkeringen zonder de omliggende inhoud te verstoren
• Blokkeert visuele bewerking van gemarkeerde elementen totdat het in Codeweergave is opgelost

Ondersteunde tagcategorieën

Tekstopmaak

• Afkortingen (<abbr>)
• Blockquote (<blockquote>)
• Koppen (<h1>–<h6>)
• Paragraaf (<p>)
• Subscript / Superscript (<sub>, <sup>)
• Inline code (<code>)

Structuur & media

• Afbeeldingen (<img>)
• Links (<a>, <a id="...">, ) <a class="..." href="" target="_blank">
• Tabellen (<table>, <tr>, , <td>, <colgroup>)
• Lijsten (<ul>, <ol>, ) <li>
• Delingen (<hr>)
• Spans en divs met ondersteunde attributen

Inline opmaak

• Vetgedrukt, cursief, onderstreep (<strong>, <em>, <u>)
• Regelbreek (<br>)
• Span (<span>)
• Naam van het anker (<a name="...">)
• Vorm selecteren (<select>)

Best practices

• Gebruik de Codeweergave alleen wanneer de visuele editor de taak niet kan uitvoeren. Direct HTML-bewerken verhoogt het risico op het introduceren van niet-ondersteunde tags of kapotte opmaak.
• Blijf bij het schrijven of plakken van HTML bij ondersteunde tags. Niet-ondersteunde tags triggeren vlaggen en blokkeren visuele bewerking van dat gedeelte totdat het wordt gecorrigeerd.
• Gebruik Shift + Tab om code te formatteren na het uitvoeren van bewerkingen, zodat de opmaak leesbaar en makkelijker te debuggen is.
• Sla vaak op met Ctrl + S, vooral voordat je van modus wisselt. Er is geen automatisch opslaan en geen herstel voor niet-opgeslagen wijzigingen.
• Los gemarkeerde elementen snel op. Als je ze niet oplost, voorkom je visuele bewerking van het getroffen blok en kan het onverwachte renderingsproblemen veroorzaken bij publiceren.**