VIO.Matrix Support - Effizienz für Entwickler

Wie definiere ich im Layout Styles für die Styleauswahl in der editor.dll?

Die editor.dll liest automatisch beim Starten des Editors im Content-Manager alle Layouts ein, welche die CSS-Klasse ".editor" enthalten. IN diesen Layouts wird zeilenweise ausgelesen, was dort zur Klasse ".editor" hinterlegt ist. Steht direkt über einer Zeile die mit ".editor" beginnt ein VIO.Matrix-Kommentar mit einem bestimmten Aufbau, dann wird diese Definition als Style-Definition ausgelesen.

Beispiel:

#! Bezeichnung: "Überschrift 1" BackColor:"clWhite"
.editor h1.default {}

Hier wird ein Style namens "Überschrift 1" definitiert, der im Editor die Hintergrundfarbe "weiß" erhält. Sobald ein Text im Editor so definiert wird sieht die Ausgabe aus dem Editor im Quellcode der Webseite so aus:

<h1 class="default">Überschrifttext</h1>

Der VIO.Matrix-Kommentar für die Style-Definition ist folgendermaßen aufgebaut:

#! Bezeichnung: "[Titel]"[ BackColor:"[Farbe]"][ Color:"[Farbe]"]

Die Platzhalter haben folgende Bedeutung:

[Titel] - Bezeichnung des Styles wie er bei der Styleauswahl im Editor ausgegeben wird
[Farbe] - Ausgabe einer Farbe (siehe unten)
BackColor - Festlegung einer Hintergrundfarbe für die Darstellung im Editor
Color - Festlegung einer Schriftfarbe für die Darstellung im Editor

Farben

Die folgende Tabelle enhält alle möglichen Farbwerte. Daneben kann man die Farbe auch als RGB-Wert in der Form

Color:"255,255,0"

angeben.

Wert	Bedeutung
clAqua	Aqua
clBlack	Schwarz
clBlue	Blau
clCream	Creme
clFuchsia	Fuchsia
clGray	Grau
clGreen	Grün
clLime	Lime
clMaroon	Maroon
clMedGray	Mittelgrau
clMoneyGreen	Mint
clNavy	Marineblau
clOlive	Olivgrün
clPurple	Purpur
clRed	Rot
clSilver	Silber
clSkyBlue	Himmelblau
clTeal	Teal
clWhite	Weiß
clYellow	Gelb

Komplette Beispiele:

#! Bezeichnung: "Trennlinie blau" BackColor:"clSilver" Color:"clSilver"
.editor p.separator {
padding-top: 0.5em;
margin-bottom: 0.5em;
border-bottom: 1px solid rgb(150,150,150);
}
#! Bezeichnung: "Text: rot" BackColor:"clWhite" Color:"clRed"
.editor span.rot {
color: rgb(255,0,0);
}

Weiterführende Links: