Quellcode im Rich Content-Editor bearbeiten
Ändern Sie den HTML- und CSS-Quellcode für alle Elemente in der Canvas oder für ein bestimmtes Element.
Erstellen Sie das Layout mit HTML-Elementen, bearbeiten Sie das CSS für ein Element direkt, um Stile hinzuzufügen, die ansonsten in der Canvas-Oberfläche nicht verfügbar sind, oder kopieren Sie Code und fügen Sie ihn ein, um Inhalte aus anderen Quellen zu migrieren.
Funktionen und Fähigkeiten
- Stellen Sie die Portalsicherheit sicher
- Wenn Sie im Fenster „Code bearbeiten“ auf Übernehmen klicken, entfernt der Code-Editor HTML-Tags, die zur Gefährdung Ihrer Instanz verwendet werden könnten. Weitere Informationen finden Sie unter HTML sanitizer.
- Identifizieren Sie wichtigen Code
- Das Bearbeitungsfenster hebt CSS-Fragmente rot hervor, wenn sie nicht gelöscht werden sollen. Dies gibt entweder eine Einstellung an, die Teil des Portaldesigns ist, oder darauf, dass mehrere Elemente diesen Code verwenden.
- Entfernen Sie unnötigen Code
- Wenn Sie Ihre Änderungen speichern, entfernt der Code-Editor alle nicht verwendeten CSS-Regeln.
- Umgekehrt, wenn der Code-Editor eine CSS-Regel wiederherstellt, die Sie entfernen möchten, markieren Sie diesen CSS-Codeblock und klicken Sie auf die Schaltfläche CSS entfernen, um den Code-Editor zu überschreiben.
Abbildung : 1. Beispiel für die Verwendung der Schaltfläche „CSS entfernen“. Im folgenden Video versucht der Benutzer, eine CSS-Regel mit der Löschtaste zu löschen, aber das System stellt den Code wieder her. Als Nächstes hebt der Benutzer den Code hervor und klickt auf CSS entfernen, wodurch der Code erfolgreich entfernt wird.
Wichtige Überlegungen
- Das Hinzufügen von benutzerdefiniertem HTML und CSS kann Ihr Design beeinträchtigen. Seien Sie vorsichtig, wenn Sie diese Funktion verwenden. Der Rich Content-Editor verfolgt keine Änderungen im Code-Editor, daher macht die Schaltfläche Rückgängig machen die Codeänderungen nicht zuverlässig rückgängig.
- Wir raten davon ab, HTML-Elemente (z. B. div oder p) zum Definieren von CSS-Regeln zu verwenden, da dies unbeabsichtigte Konsequenzen haben kann.
Abbildung : 2. Beispiel für ein unerwartetes Ergebnis bei Verwendung eines HTML-Elements zum Definieren der CSS-Regel Im folgenden Beispiel definiert der Benutzer eine CSS-Regel für das p-Element in einer Zelle. In der Seitenvorschau gelten die Stilregeln jedoch für die p-Elemente in allen Textfeldern sowie in der Fußzeile.