kre8tiv – Ben Jopen

Häufig tritt das Problem auf, dass Texte auf der Website ziemlich wüst aussehen. Andere Farben, Schriftarten, Größen. Oftmals sogar mehrfach wechselnd. Das sieht nicht nur oft einfach mies aus, bringt auch so einige Probleme mit sich. Unter Umständen zerhaut es einem die Website, wenn man unvollständigen oder fehlerhaften HTML-Code kopiert. Dann ist die Website unbenutzbar und die Aufregung in der Regel groß.

Die Ursache

Zu bestimmt 90% kann man die Ursache des Problems konkret benennen: Microsoft Word oder Microsoft Outlook (das ja gerne mal Word als Editor nutzt). Kopiert man nämlich Texte direkt aus Word, wird gleichzeitig ein Wust an Angaben mitkopiert, die der Redakteur erstmal gar nicht sieht. Diese Angaben sind nicht nur unnötig, sondern auch teilweise haarsträubend. Abstandsangaben in cm – auf einer Website! Dazu gesellt sich das Problem, dass Microsoft sich natürlich wenig an geltenden Standards orientiert. Aber auch das kopieren von Inhalten von anderen Websites kann die gleichen Ursachen hervorrufen. Nicht jede Website trennt strikt den Inhalt von der Gestaltung oder auch dort hat ein Redakteur versehentlich wunderbaren Microsoft-Code auf die Website geklatscht.

Betroffen sind davon solche Inhalte, in denen ein Rich-Text-Editor verfügbar ist, der eine erweiterte Formatierung der Inhalte zulässt. Zwar ist dieser bereits so programmiert, dass er den gröbsten Unfug filtert – aber oft rutscht trotzdem etwas durch.

Lösungsansätze

Um das Problem zu Umgehen, gibt es mehrere Lösungsansätze. Die zwei gängisten beschreibe ich hier.

Umweg über den Editor

Viele Redakteure wählen den Weg über einen Editor, der keine Formatierungen zulässt. In Windows ist das der z.B. der mitgelieferte Editor, der in der Regel unter Start » Zubehör » Programme zu finden ist. Einmal den gesamten Text in den Editor kopieren, wieder alles markieren und kopieren – schon sind wir alle Formatierungen los. Dafür leider auch solche logischen Auszeichnungen wie Aufzählungen und Überschriften, die nun per Hand nachgetragen werden müssen.

Eigene Säuberungsfunktion des RTE

Der zweite Anatz nutzt eine bereits im TYPO3-RTE vorhandene Funktion zur Säuberung des Codes. Dazu wird der Text direkt aus Word, Outlook und Co. direkt in den RTE eingefügt. Danach muss die Option Formatierungen entfernen ausgewählt werden, in der Symbolleiste passenderweise durch einen Besen symbolisiert.

Im darauf erscheinden Pop-Up wählen wir HTML-Formatierungen (im Beispiel nicht markiert) und MS-Word-Formatierungen aus, sowie dass die Säuberung im gesamten Bereich durchgeführt werden soll.

In den meisten Fällen führt das zum gewünschten Ergebnis, wenn nicht hilft entweder nur der oben beschriebene Weg über den Editor oder eine Säuberung per Hand, wenn man den Editor auf den HTML-Modus umschaltet.

Erkennen ob ungewollte Formatierungen vorliegen

Aber wie erkennt man, ob die Säuberung erfolgreich war oder überhaupt eine nötig ist? Wenn man die gröbsten Schnitzer nicht sofort erkennt (rote Schrift in Comic Sans), hilft uns die Statuszeile von TYPO3 weiter. Hier wird angezeigt, in welchem HTML-Element wir uns gerade befinden. Das p steht dabei für Paragraph, also einen Absatz.

Die im Beispiel angezeigte Klasse MsoNormal ist allerdings ein klares Indiz für Formatierungen aus dem Hause Mircrosoft. Auch Font-Tags haben im Editor nichts zu suchen und sollten entsprechend bereinigt werden.