Die Code-Ansicht ermöglicht es Ihnen, das zugrundeliegende HTML eines Artikels direkt im Advanced WYSIWYG-Editor zu inspizieren und zu bearbeiten, wodurch Sie die Kontrolle über das Markup haben, das der visuelle Editor nicht offenlegen kann.
Wann kann man die Code-Ansicht verwenden?
- Fügen Sie benutzerdefinierte HTML-Elemente ein, die die visuelle Symbolleiste nicht unterstützt
- Wenden Sie Inline-Stile auf bestimmte Elemente an
- BeckenAwesome oder andere Icon-Schnipsel einbetten
- Beheben Sie nicht unterstützte Tag-Fehler, die vom Editor markiert werden
- Fügen Sie Symbole oder Symbole in Tabellenzellen hinzu
- Suche innerhalb von HTML mit
Ctrl + F
Automatische HTML-Formatierung
Der Editor standardisiert automatisch Einzüge und Abstände jedes Mal, wenn du die Code-Ansicht öffnest. Dies läuft nur beim Eintragen – nicht beim Speichern oder Veröffentlichen – und wirkt sich nicht auf benutzerdefinierte HTML- oder Skriptblöcke aus.
Suche in der Codeansicht
Verwenden Sie die integrierte Suche, um bestimmte HTML-Elemente oder Texte im Code zu finden.
| Aktion | Abkürzung |
|---|---|
| Offene Suche | Ctrl + F |
| Nächstes Ergebnis | Enter |
| Vorheriges Ergebnis | Shift + Enter |
| Auto-Einzug / Formatcode | Shift + Tab |
Speicheränderungen
Änderungen in der Code-Ansicht werden nicht automatisch gespeichert. Drücke, Ctrl + S bevor du wieder zum visuellen Editor wechselst oder wegnavigierst.
Nicht gespeicherte Änderungen in der Code-Ansicht gehen verloren, wenn du wegnavigierst, ohne auf Speichern zu klicken.
Nicht unterstützte HTML-Tags und Attribute
Der Editor markiert nicht unterstützte HTML-Tags und Attribute, anstatt sie zu entfernen, sodass du sie überprüfen und korrigieren kannst.
Wann passiert das?
- Beim Wechsel eines Artikels vom WYSIWYG-Editor zum Advanced WYSIWYG-Editor werden nicht unterstützte Inhalte automatisch markiert
- Wenn du nicht unterstützte Tags oder Attribute direkt in der Code-Ansicht hinzufügst, markiert der Editor sie beim Parsen
Was der Redakteur macht
- Erkennt nicht unterstützte Tags (z. B.
<marquee>, )<blink>und Attribute (z. B.onmouseover,style="text-decoration:blink") - Markiert markierte Elemente mit Tooltips und Block-Highlights, ohne den umliegenden Inhalt zu stören
- Blockiert visuelle Bearbeitung markierter Elemente, bis sie in der Codeansicht gelöst werden
Markierte Elemente können direkt in der Code-Ansicht geändert, entfernt oder korrigiert werden.
Unterstützte Tag-Kategorien
Textformatierung
- Abkürzungen (
<abbr>) - Blockquote (
<blockquote>) - Überschriften (
<h1>–<h6>) - Absatz (
<p>) - Index / Hochstell (
<sub>,<sup>) - Inline-Code (
<code>)
Struktur & Medien
- Bilder (
<img>) - Links (
<a>) - Tabellen (
<table>,<tr>, )<td> - Listen (
<ul>,<ol>, )<li> - Teiler (
<hr>) - Spans und Divs mit unterstützten Attributen
Best Practices
- Verwenden Sie die Code-Ansicht nur, wenn der visuelle Editor die Aufgabe nicht erledigen kann. Direkte HTML-Bearbeitung erhöht das Risiko, nicht unterstützte Tags oder defektes Markup einzuführen.
- Bleib beim Schreiben oder Einfügen von HTML bei unterstützten Tags. Nicht unterstützte Tags lösen Flags aus und blockieren die visuelle Bearbeitung dieses Abschnitts, bis sie korrigiert werden.
- Ich nutze
Shift + Tabes, um Code nach Bearbeitungen zu formatieren, damit das Markup lesbar und leichter zu debuggen ist. - Speichere häufig mit
Ctrl + S, besonders bevor du den Modus wechselst. Es gibt kein automatisches Speichern und keine Wiederherstellung für nicht gespeicherte Änderungen. - Lösen Sie markierte Elemente umgehend. Wenn sie ungelöst bleiben, verhindert das visuelle Bearbeiten des betroffenen Blocks und kann unerwartete Rendering-Probleme beim Veröffentlichen verursachen.**