CSS abhängig vom Editor

Die Darstellung über CSS lässt sich abhängig davon definieren, ob man sich im Editor, also Bearbeitungsmodus, befindet, oder im Frontend.

Vergleich Frontend- und Editor-Ansicht
Vergleich Frontend- und Editor-Ansicht

Zum einen gibt es die Möglichkeit, über die editor.css speziell für den Editor per CSS zu formatieren.

Eine andere Möglichkeit ist die Definition über entsprechende Klassenangaben, wie im Beispiel (siehe Screen) und Quelltext-Beispiel unten aufgezeigt.
Über die Klasse weditor bezieht man sich auf die Definition innerhalb der Seitenbearbeitung (im Editor) und über no-weditor für die Anzeige im Frontend, z.B. für Seitenbesucher.

/*@wCssFragment{class:elementHeadline;variant:0;caption:Standardüberschrift;caption-en:Default;livepreview:yes}*/
.elementHeadline_var0 {

  /* ... */
  
  .weditor & {
    border:2px dotted $baseColorPrimary2;
  }

  .no-weditor & > h1{
    background-color:$baseColorPrimary1;
  }  
}