Article Details
Text mit CSS formatieren - Stiele für den Editor vordefinieren

Mit den Standardeinstellungen produziert der Editor Inline-Styles, die heute als schlechtes Design gewertet werden, da sie die Seiten unnötig vergrößern (Style-Definitionen sind mitten im Inhalt anstatt in einer externen CSS-Datei und dadurch auch die Lesbarkeit für Suchmaschinen und Lesehilfen von Sehbehinderten deutlich verschlechtern.

Wie bringe ich den FCK-Editor dazu, CSS-Klassen zum Formatieren von Text zu verwenden?

Zuerst müssen die CSS-Klassen vordefiniert werden, die in der Dropdown "Stil" verfügbar sein sollen. Man erstellt hierzu eine CSS-Datei:

FCK Editor

Damit die Dropdown "Stil" weiß, was sie auflisten soll, erstellt man eine XML-Datei mit einer Liste der zuvor definierten Stile:

Die beiden Dateien können beliebig benannt werden. Anschließend klickt man im Editor auf "Individuelle Einstellungen", wählt "Portal" und klappt "Liste verfügbarer Stile" auf. Hier stellt man oben rechts "Datei-Url" ein, darunter "Datei", lädt die zuvor erstellte XML-Datei ins Root des Portals hoch und stellt sie ein.
Anschließend klappt man "CSS für den Eingabebereich" auf. Hier stellt man ebanfalls oben rechts "Datei-Url" ein, darunter "Datei", lädt die zuvor erstellte CSS-Datei ins Root des Portals hoch und stellt sie ein.
Unten im Fenster wählt man "Portal", klickt auf "übernehmen" und bestätigt die Rückfrage mit "Ja". Um die gefüllte Stil-Dropdown zu sehen, muss man zuerst den Browser-Cache leeren.

Nun werden Formatierungen aus der Stile-Liste im Editor-Bereich bereits angezeigt, auch das korrekte HTML wird produziert. Allerdings sieht man nach dem Speichern nach wie vor keine Formatierungen im Text, da die zuvor erstellte CSS-Datei nur für den Editor-Bereich verwendet wird. DotNetNuke bezieht seine CSS-Klassen unter Anderem aus der Datei "Portal.css" im Root des Portals. Daher kopiert man alle zuvor definierten CSS-Klassen auch in die Datei "Portal.css". Nun werden die Formatierungen auch richtig auf der Seite angezeigt.

Zu beachten bei Formatierungen mit B, I, U...
Wenn man diese Formatierungen mit in die CSS-Klassen mit hinein nimmt, wird die Anzahl der möglichen Kombinationen ziemlich unübersichtlich. Es reicht, wenn man Schriftgrößen und Farben kombiniert. Um eine Stil-Formatierung fett zu bekommen wählt man als erstes "B" und anschließend den Stil, da das "Fett" in umgekehrter Reihenfolge meiner Erfahrung nach nicht angenommen wird.

Der "Red Title" Trick
Alles hat geklappt, die eigenen CSS-Klassen werden in der Stil-Dropdown angezeigt, aber eine Zeile "Red Title", die keine Eigen-Definition ist, wird angezeigt. Sie ist in der (den) mit dem Editor ausgelieferten Datei(en) fckconfig.js enthalten und muss aus beiden entfernt werden. Diese Datei gibt es zweimal unter: HtmlEditorProviders\FCK\Custom und HtmlEditorProviders\FCK\FCKEditor.

Es gibt unterschiedliche Ansätze, um Stile mit CSS-Klassen vorzugeben, hier ist beschrieben, wie man es pro Portal konfiguriert. Anstelle einer eigenen CSS-Datei könnte man auch die "Portal.css" direkt verwenden.
 

 

 



Kommentare
Nur angemeldete Benutzer können Kommentare abgeben.

Zurück