Schöne Artikel mit scribite

CMS Anleitungen : Ich habe WYSIWYG-Editoren bisher kritisch gegenüber gestanden. Die normalen Java-Script basierten Editoren sind oft überladen mit Funktionen und produzieren dann nicht einmal gutes HTML - und leider ist das ein prinzipielles Problem. Diese Scripte sind auf die Browser-APIs angewiesen. Und solange die nicht die entsprechenden Funktionen anbieten, können die gar nicht besser sein. Es gibt aber einige Tricks und Dinge zu bedenken, mit denen man das Beste aus xinha & Co herausholt. Der folgende Artikel soll vielleicht als Start einer kleinen Diskussion dienen, in dem wir unsere Erfahrungen austauschen können.

Als erstes bauen wir uns eine Testumgebung auf - ich will jetzt aber nicht erklären, wie man die Software installiert. Das steht alles in den Dokus. Ich benutze scribite mit Pagesetter und habe mir xinha als Editor ausgesucht. Einen Grund hat das nicht. Es ist der Default-Editor und er kann ne Menge.

Die Menüleiste
1. Sven hat mit den drei voreinstellbaren Funktionsleisten eine prima Arbeit vorgelegt. Trotzdem muss man sich die Leiste an die eigenen Bedürfnisse anpassen. IMHO sollten die Redakteure nicht zu viel können - sonst fangen die noch an, sich designerisch auszutoben und "schönere" Schriftfarben auszuwählen usw. Also: Meine Funktionsleiste enthält nur die wichtigsten Funktionen: Das Format-Dropdown. Allerdings habe ich es soweit reduziert, dass man nur "normalen Absatz" (p) und "Zwischenüberschrift" (h3) auswählen kann. Alle anderen Formate werden über das Stylist-Plugin geregelt. Dann gibt es noch die nummerieren und nicht-nummerierten Listen und Kursiv- und Fettschrift. Dazu natürlich Hyperlinks und das einfügen von Bildern - per URL oder per Mediashare - ganz nach belieben.

Plugins
2. Ich habe das Plugin zum Einfügen von unformatierten Texten ("Paste Text") und "Smart Replace" aktiviert - das erste verhindert, dass Leute HTML aus Work & Co. importieren, das zweite kümmert sich um die Typographie, so dass korrekte Auführungszeichen (Tütelchen - „“) gesetzt werden usw.

Der Stylist
3. Als letztes benutze ich noch das erwähnte "Stylist"-Plugin auf das Guite mich gebracht hat. Das macht es möglich, bestimmten Elementen eigene CSS-Klassen zuzuweisen. Ist man mit dem Cursor zum Beispiel gerade in einem Absatz (p), werden alle Styles angezeigt, die sich auf ein p-Tag anwenden lassen. Ich hab hier zum Beispiel ein p.zitat angelegt, um bestimmte Absätze speziell als Zitat hervorzuheben - die sind dann etwas eingerückt und kursiv.

Außerdem habe ich für Bilder je eine Klasse, um die Bilder links oder rechts von dem Text umfließen zu lassen. Wenn ich also ein Bild einfüge und es anklicke, zeigt mir der Stylist diese beiden Klassen an. Wenn ich "right" wähle, wird das Bild rechts angeordnet, und links vom Text umflossen.

Um das zu erreichen, müssen die entsprechenden CSS-Klasse zum einen im Style-Sheet der Seite vorhanden sein und zum anderen in einer "editorStylist.css" die ebenfalls im style-Verzeichnis des Themes liegt. Diese sieht bei mir in etwa so aus:



Hier kann man die 2 Klassen für rechts und links erkennen - zusätzlich habe ich noch 3 Klassen, um die Bilder auf eine bestimmte Größe zu schrumpfen. Ich kann also auswählen, ob das Bild rechts oder links angeordnet sein soll und ob es 25, 33 oder 50% der Spaltenbreite einnehmen soll. Natürlich bleibt die Datenmenge in jedem Fall gleich groß - die Bilder werden nur vom CSS kleiner geschoben. Man sollte also schon beim Einfügen der Bilder darauf achten, dass man nicht ein 1600x1200 Bilder einfügt.

HTML
4. JavaScript-Editoren haben alle ein Problem: Wenn man nicht Return drückt, wird der geschriebene Text in in ein p-Tag Paar gefasst. Besteht der Artikel zu aus einem Absatz, speichert der Redakteur einen Text, der in der Seite dann zu einem HTML-Fehler führt.

Um diesem Problem abzufangen gibt es ein kleinen pnRender-Plugin für Scribite: makeParagraph. Dieser Modifier schaut einfach nach, ob die ersten drei Zeichen des Textes ein p-Tag sind und wenn nein, wird der ganze Text in ein p-Tag gefasst. Im Template wird das dann einfach so aufgerufen:



Zur Zeit ist das Plugin leider noch nicht so schlau, auch andere Tags oder p-Tags mit Klassen zu erkennen. Aber vielleicht mach ich mich da ja noch einmal dran, wenn ich auf daraus resultierende Probleme stoße.

Fazit
Mit nur 9 Buttons und einem DropDown ist mein Editor stark abgespeckt, er bietet aber ein Menge Optionen, das Layout nach bestimmten Vorgaben zu beeinflussen.

Habt Ihr selbst Erfahrungen mit scribite, die Ihr weitergeben wollt, oder habt ihr Fragen oder Anregungen? Ich würde mich über Feedback in den Kommentaren freuen. Solltet Ihr Fragen zur konkreten Umsetzung haben, solltet Ihr vielleicht doch lieber einen Thread im Forum eröffnen.