Der Open Source WYSIWYG- Texteditor “TinyMCE” (http://tinymce.moxiecode.com) kommt bei unseren Projekten immer öfter zum Einsatz – und dementsprechend speziell werden so manche Anwendungsfälle.
Aktuell war eine Formatierungserleichterung von Sonder- Textformaten gefragt: verschiedene Textpassagen sollen rot hinterlegt sein, der Text soll fett, weiß und größer als der restliche Text sein.
Hier war die Drop-Down Auswahl “Format” (im englischen “Styles”) genau richtig!
In dieser Auswahl sind vorgefertigte CSS- Formatierungen zu finden, welche in einer speziellen CSS- Datei hinterlegt sind – somit läßt sich beinahe jede Formatierung schnell hereinladen. Die CSS- Formate müssen als Klasse angelegt werden und werden autom. dem umgebenden Element zugewiesen bzw. ein <span> mit dieser Klasse wird generiert.
Einbinden läßt sich diese Auswahl sehr einfach in den “Settings- Angaben” (tinyMCE.init):
- Angabe der CSS- Datei mit den Sonderformatierungen:
content_css:”spezielle_formate.css”, - Einfügen der “Drop-Down Auswahl”, z.B.:
theme_advanced_buttons1 : “bold,…,styleselect“,
In o.g. Fall stand in der speziellen CSS- Datei u.a.:
.rot_hinterlegt {
background:#c00;
color:#fff;
font-weight:bold;
font-size:1.3em;
}
Der Klassename “rot_hinterlegt” ist in der Format- Auswahl zu finden, eine damit bedachte Textstelle schaut z.B. so aus:
<p>Dies ist <span class="rot_hinterlegt">rot hinterlegter Text</span></p>
Dies zeigt einen weiteren Vorteil dieser Anwendung: es wird eine Klasse zugewiesen und keine Inline- CSS- Anweisungen geschrieben. Soll z.B. das rot später einmal dunkler werden ist nur die Änderung der CSS- Datei nötig (”Trennung von Layout und Inhalt”).
Alles in allem ein sehr praktischer Text- Editor mit einem einzigen Nachteil: er ist mittlerweile schon so umfangreich und mächtig das eine gewisse Ladezeit einkalkuliert werden muss. In Zeiten von immer schnellerem Breitband- Internet sollte dies aber nicht mehr so ins Gewicht fallen…
Timo 20.06.2008 - 21:27 Uhr
Danke für den Tip, erspart viel Abeit
Rico 21.06.2008 - 12:07 Uhr
naja, die klassen-bezeichnung “rot_hinterlegt” spricht nicht gerade für “trennung von layout und inhalt”…
R. Boegl / kick-image.at 21.06.2008 - 12:14 Uhr
Aber sie “spricht mit dem Administrator” – dieser weiß in einigen Monaten sicher nicht mehr welches Format hinter der (neutralen) Bezeichnung z.B. “format_1″ steht. Hier sollte ein Kompromiss zugunsten des Menschen / Bedieners wohl erlaubt sein…
Steve 28.07.2011 - 12:17 Uhr
Danke für die Erläuterung. In Bezug auf den CSS Klassenname wäre da evtl. “text_highlight” besser. Ich vergebe normalerweise eher semantische Namen, die beschreiben, welchen Sinn die Formatierung haben soll. So kann man später aus rot eben auch blau machen, wenn sich z.B. das Corporate Design ändert. Es macht ja wenig Sinn, einen CSS Klassennamen zu vergeben, der genau beschreibt, welche Styles sich dahinter verbergen.