No-Break-Spaces in WordPress (TinyMCE)

UPDATE 22:54 Ich habe eine Lösung gefunden, um alles automatisch zu ersetzen. Hier geht’s zum fertigen Plugin.

Mann, war das ein nerviges Problem, aber endlich habe ich es eliminieren können: Immer wenn ich einen Artikel schrieb, wurde im Text plötzlich ein Zeilenumbruch eingefügt, obwohl ein kurzes Wort noch locker mit in die Zeile gepasst hätte – manchmal sogar mehrere Worte.

Irgendwann hatte ich zumindest einen Lösungsansatz: In den Developer Tools von Chrome sah ich im Code die mir schon bekannte Entity   für das sogenannte geschützte Leerzeichen. Das nimmt man, damit z.B. eine Zahl und ihre Mengeneinheit immer auf einer Zeile stehen.

Das ist vor allem bei responsiven Seiten wichtig, denn da kann man nie vorhersagen, an welcher Stelle im Text umbrochen wird.

 

1. Den Übeltäter finden

Komischerweise wurde dieses   nur in den Developer Tools, nicht aber im Quelltext oder im Text-Editor von WordPress angezeigt. Auch die Suchfunktion nach genau dieser Stelle zeigte mir einfach mal alle Leerzeichen auf der Seite an. Ich kam nicht mehr weiter…

Gestern Abend fiel mir das Problem bei einer neueingerichteten Seite auf und ich habe mich mal drangemacht, das Problem endlich final zu lösen: Ich konnte in der Datenbank mit stümperhaftem SQL alle Vorkommen des geschützten Leerzeichens durch normale Leerzeichen ersetzen.

 

Jetzt kommt der Gag: Ich habe es natürlich gleich bei meinen anderen WordPress-Installationen versucht, bin dort aber kläglich gescheitert! Ich habe keine Ahnung, warum dort nichts gefunden wurde, obwohl es auch dort mehrfach vorkommt.

Ich brauchte also einen anderen Ansatz: Fakt ist, dass es mit TinyMCE – dem WYSIWYG-Editor von WordPress – zu tun hat. Also schaute ich mich etwas im Netz um und fand heraus, dass der das beim Eintippen von mehreren Leerzeichen hintereinander einbaut.

 

Ansich schlau, denn mehrere normale Leerzeichen hintereinander zeigt ein Browser immer als ein einziges Leerzeichen an. Wenn man abwechselnd Leerzeichen und geschütztes Leerzeichen im Code hat, wird die richtige Anzahl gezeigt. Ist natürlich typographische Kackscheiße.

Wenn man nun ein Textstück kopiert und woanders wieder einfügt, passiert es: Zwei Leerzeichen hintereinander und TinyMCE schlägt zu. Wenn man es nicht weiß (weil man es nicht sieht), löscht man das normale statt des geschützten Leerzeichens.

Zwei damit verbundene Wörter werden nun wie eins gesehen und rutschen in die nächste Zeile. Genau das war mein Problem.

 

2. TinyMCE per Plugin zum Anzeigen zwingen

Ich fand über Umwege heraus, dass man TinyMCE mit einer eingebauten Filter-Funktion von WordPress zwingen kann, dass er die sogenannten Entities (sozusagen den „Maschinen-Code“ für bestimmte Zeichen in lesbarer Form) anzeigt.

Ich bastelte also ein kleines Plugin zum Test und … BÄNG! Es geht! Wenn man von WYSIWYG- auf Text-Editor umschaltet, zeigt er alle   an. Das will ich Euch natürlich nicht vorenthalten.

 

3. Plugin erstellen

Zuerst legt Ihr im Plugin-Ordner von WordPress (/wp-content/plugins) ein neues Verzeichnis mit dem Namen tinymce-nbsp an. Darin wird nun eine Datei index.php erstellt und in die kommt der folgende Code:

Code entfernt. Siehe Plugin-Artikel.

Zur Erläuterung: In Zeile 12 wird festgelegt, welche Zeichen nicht in ihrer finalen Form (in meinem Fall als Leerzeichen), sondern als Entity gespeichert werden sollen. Zeile 13 weist TinyMCE an, die Entity entweder namentlich ( ), als Zahlencode ( ) oder roh zu verarbeiten.

Die Einstellung „named“ führt dazu, dass man jetzt jedes geschützte Leerzeichen als   angezeigt bekommt und ganz einfach durch ein normales Leerzeichen ersetzen kann.

 

4. Anwendung

Artikel im „Visuell“-Modus tippen, dann auf „Text“ umschalten und per STRG+F bzw. CMD+F (Mac) nach   suchen lassen. Ja, so habe ich auch geschaut! Jetzt jedes Vorkommen markieren und per Druck auf die Leertaste zu einem normalen Leerzeichen umwandeln.

 

5. Aber Obacht!

TinyMCE hat die Angewohnheit, Absätze (erreicht man durch „zweimal Enter“) zu basteln, indem eine Zeile nur mit   erstellt wird. Das darf man keinesfalls anfassen, damit die Absätze erhalten bleiben – uns interessiert wirklich nur, was zwischen zwei Worten auftritt.

Hinterlasse einen Kommentar





Alle mit * gekennzeichneten Felder müssen ausgefüllt werden. Die eMail-Adresse wird nicht offen dargestellt.

Ich erlaube mir, reine Werbeeinträge oder persönliche Beleidigungen zu löschen. Anonyme Kommentare werden generell nicht mehr freigeschaltet: Ich schreibe hier als reale Person und darf erwarten, dass jeder zu der Meinung steht, die er äußert.