YAML-Stile integrieren

Von: Santscho

Um was gehts? — YAML CSS-Klassen im Editor

Absatz-Stile imFCKeditor benutzen

Der FCKeditor benutzt standardmässig die eigene CSS-Datei. Möchte man jedoch schon beim Erstellen des Content-Parts (z.B. WYSISYG HTML) sehen wie der Artikel in etwa aussehen könnte, kann man den FCKeditor anweisen, die content.css zu verwenden.

Im folgenden Schritt werden die Absatzformate der content.css dem FCKeditor zugänglich gemacht.

1. In einem Texteditor folgende Datei öffnen:
   includeinc_extfckeditorfckconfig.js
2. Die zweite Zeile des eigentlichen Scripts (nach den Linzenzkommentaren) muss heissen:
   FCKConfig.EditorAreaCSS = FCKConfig.BasePath + '../../../../template/inc_css/screen/content.css' ;
3. Im Browser muss nun noch der Cache gelöscht werden, um die Änderungen im Editor wirksam zu machen.
4. Unter Format hat man nun im Editor die YAML-Absatzformate.

Anmerkung: Jetzt werden nicht nur die YAML-Absätze verwendet, sondern auch Formatierungen von Body-Text, Kursiv, Fett, Tabellen, Listen und vielem mehr.

YAML-Absätze in FCKeditor

Stile aus dem Menü "Format" können nur auf ganze Absätze angewendet werden. Fügt man Text im Editor ein (z.B. aus einem Texteditor), fehlen häufig die html-tags für "Absatz Start" und "Absatz Ende" (z.B. <p>Text</p>. Deshalb sollte im eingesetzten Text nach jedem Titel und Absatz eine Absatzschaltung eingefügt werden ("Enter" auf der Tastatur). der Editor wandelt dann den Text in einen Absatz um, welcher dann mit einem Format belegt werden kann. Standardmässig formatiert der Editor neu erstellte Absätze mit dem p-Format für "Normal".

Achtung! Die in YAML definierte CSS-Klasse für die Grundschrift/Bodytext (<p>) besitzt den Befehl "Abstand nach Absatz". Deshalb sollte nur eine Absatzschaltung (ENTER) nach dem Absatz eingegeben werden, um nicht zu grosse Abstände zwischen den einzelnen Absätzen zu bekommen:

Das ist der erste Absatz, das ist der erste Absatz, das ist der erste Absatz
Das ist der erste Absatz. Und hier möchte ich den Absatz beenden. [ENTER]

Das ist der zweite Absatz. Das ist der zweite Absatz, das ist der zweite Absatz
Das ist der zweite Absatz. Und hier möchte ich den Absatz beenden. [ENTER]

Bei importiertem Text (z.B. aus Word) ist häufig eine Leerzeile zwischen zwei Absätzen eingebaut, welche im FCKeditor entfernt werden sollte.

Eigene Absatz-Stile im Editor

Unter "Formate" sind 6 Überschriften vorhanden. Überschriften 1 bis 4 sind für Titel und Untertitel der Artikel und Contentparts von phpwcms reserviert. Bleiben also noch zwei Formate zur freien Verfügung. Diese sollten wirklich nur für Titel und Untertitel verwendet werden.

Praxisbeispiel

1. In der content.css legt man zum Beispiel folgende Klasse an:
   .box_niceframe {
       margin-top: 15px;
       margin-bottom: 15px;
       padding: 15px;
       border: 3px double purple;
       font-weight: bold;
       background-color: silver;
   }
2.  In einem Texteditor öffnet man die folgende Datei:
   includeinc_extfckeditorfckstyles.xml
3. Nach
   <Style name="Superscript" element="sup" />
   -->
   einfügen:
   <Style name="Box: Nice Frame" element="div">
   <Attribute name="class" value="box_niceframe" />
   </Style>
4. Datei sichern. Browsercache löschen und schon hat man "Box: Nice Frame" in der "Stil"-Palette des FCKeditors.

Änderungen dieses Stils werden jetzt nur noch in der content.css vorgenommen. Änderungen wirken sich auf alle Texte aus, die mit diesem Stil formatiert wurden.

Inline-Stile im FCKeditor

Es kommt häufig vor, dass einzelne Textpassagen oder Wörter im Absatz speziell formatiert werden müssen. Das könnte mit unterschiedlicher Schrift, Farbe und Stärke geschehen. In diesem Beispiel sollen ganz wichtige Stellen im Text hervorgehoben werden und zwar in diversen Seiten und Artikel: Andere Schrift, Kapitälchen, Fett, Violett.

Jetzt könnte man die jeweilige Stellen markieren und mit den FCKeditor-Werkzeugen bearbeiten. Und wenn der Kunde plötzlich alle diese Textstellen plötzlich in Grün statt in Violett haben möchte? Kursiv statt fett? — Deshalb legt man in der content.css Textstile an, die dann in die "Stil"-Palette des FCKeditors aufgenommen werden.

Praxisbeispiel

1. In der content.css legt man zum Beispiel folgende Klasse an:
   .auszeichnung_1 {
       color: #820e3b;
       font-family: Georgia, "Times New Roman", Times, serif;
       font-weight: bold;
       font-variant: small-caps;
   }
2.  In einem Texteditor öffnet man die folgende Datei:
   includeinc_extfckeditorfckstyles.xml
3. Nach
   <Style name="Superscript" element="sup" />
   -->
   einfügen:
   <Style name="Auszeichnung 1" element="span">
   <Attribute name="class" value="auszeichnung_1" />
   </Style>
4. Datei sichern. Browsercache löschen und schon hat man "Auszeichnung 1" in der "Stil"-Palette des FCKeditors.

Änderungen dieses Stils werden jetzt nur noch in der content.css vorgenommen. Änderungen wirken sich auf alle Texte aus, die mit diesem Stil formatiert wurden.