Nun ist es endlich vorbei! Was vorbei? Der Ärger mit WordPress–Post in denen Quellcode eingefügt werden soll. Ist ja nicht so schwierig wirst du jetzt sagen. Dafür gibt es unzählige Plugins von disable-wpautop, wp-unformatted, quickcode usw. Leider hat kein Plugin seinen Dienst so wie von mir gewünscht erfüllt.

Ich schalte beim Schreiben von Posts nämlich recht oft zwischen der HTML und der WYSIWYG-Ansicht (Tinymce) also zwischen der Quelltext-Ansicht und der visuellen Ansicht hin und her. Dabei schluckt der Tinymce-Editor ständig das eine oder andere TAG-Attribut! Lästig, sehr lästig, wenn man bei Posts mit Code ständig auspassen muss immer in der HTML Quelltext Ansicht zu bleiben.

Auf der Suche in den Weiten des Webs bin ich nur teilweise fündig geworden. Aber es hat sich auf jeden Fall gelohnt. Ich bin dabei über das sehr schöne Plugin Syntax Highlighting von Ryan Mcgeary gestolpert bin. Damit lässt sich Programmcode mit einem Syntax Highlight anzeigen. Der anzuzeigende Code muss dafür einfach in ein PRE-Tag eingebackt werden, welches spezielle Attribute erhält.

Beispiel Syntax Highlight:

<pre lang=“html4strict“ line=“1″>
Ich bin ein <span style=“color:#FF0000″>HTML-Quellcode</span>
</pre>

Das schaut dann so aus:

Mit dem Attribut lang wird die Sprache angegeben, wobei folgende Programmiersprachen möglich sind: abap, actionscript, actionscript3, ada, apache, applescript, apt_sources, asm, asp, autoit, avisynth, bash, bf, blitzbasic, bnf, boo, c, c_mac, caddcl, cadlisp, cil, cfdg, cfm, cobol, cpp-qt, cpp, csharp, css, d, delphi, diff, div, dos, dot, eiffel, email, fortran, freebasic, genero, gettext, glsl, gml, bnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, javascript, kixtart, klonec, klonecpp, latex, lisp, lolcode lotusformulas, lotusscript, lscript, lua, m68k, make, matlab, mirc, mpasm, mxml, mysql, nsis, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, pic16, pixelbender, perl, php-brief, php, plsql, povray, powershell, progress, prolog, providex, python, qbasic, rails, reg, robots, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, winbatch, xml, xorg_conf, xpp, z80

Das Attribut line ermöglicht die Anzeige von Zeilennummern, wobei es zugleich den Startwert bestimmt.

Damit WordPress den Code nicht interpretiert, sondern nur anzeigt gebe ich den Quellcode im WYSIWYG-Editor Tinymce ein. Dadurch werden HTML Zeichen maskiert d.h. ein < wird z.B. in die Zeichenfolge &lt; umgewandelt. Nun wäre ein Quelltext schlecht lesbar, wenn sämtliche HTML-Zeichen maskiert darin vorkommen würden, wenn z.B. anstatt der spitzen Klammern &lt; bzw. &gt; stehen würde. Auch dafür hat das Code Visualisierungs-Plugin eine Lösung parat: das Attribut escaped. Durch die Angabe von escaped=“true“ weiß das Plugin, dass die maskierten HTML Zeichen für die Visualisierung wieder zurück zgewandelt werden müssen.

In der HTML Quelltext Ansicht von WordPress schaut nun unser Quellcode wie folgt aus:

Tinymce in WordPress entfernt Tags und Attribute

Nun aber zurück zum ursprünglichen Problem. Sobald ich im WYSIWYG-Editor, also in die visuelle Ansicht von WordPress, umschalte schluckt der Tinymce die beiden Attribute line und escaped. Sehr ärgerlich!

Da ich den Tinymce bereits von diversen CMS kenne und weiß, dass man ihm relativ einfach die erlaubten HTML-Tags und deren Attribute konfigurieren kann ist mein erster Gedanke: FTP-Client starten, im Verzeichnis wp-includes/js/tinymce die Datei tiny_mce.js öffnen, nach valid_elements suchen und entsprechende Änderungen vornehmen.

Ups, die Datei tiny_mce.js wurde scheinbar von Leerzeichen und Zeilenwechsel befreit um Speicherplazu zu sparen, was aber der Übersicht nicht gerade dienlich ist. Außerdem kommt mir der Gedanke: beim nächsten WordPress Update wird diese recht unschöne Lösung einfach überschrieben, was Updates unnötig verkompliziert. Da Sicherheits-Updates bei WordPress immer wieder zu machen sind rudere ich zurück!

Irgend jemand hat sicherlich auch schon mal das gleiche Problem gehabt. Googlen ist wieder mal angesagt. Ich stoße auf das Plugin Tinymce Valid Elements von David J. Engfer. Super, das muss die Lösung sein! Upload ins Plugin Verzeichnis, Aktivierung unter Plugins und dann rein unter Einstellungen.  – Nix zu finden! Leider funktioniert da was zumindest bei mir unter WordPress 2.7 nicht. Der versprochene Konfigurationsbereich unter Einstellungen scheint nach Aktivierung des Plugins nirgend auf 🙁 .

Bleibt nichts anderes übrig als den Quellcode des Plugins zu debuggen. Ich könnte ja einfach den ganzen Konfigurationsbereich streichen. Für mich langt es vollkommen, wenn die Konfiguration hardcodiert ist. Gesagt getan. Ein entsprechendes einfaches Plugin ohne Konfiguration bzw. Einstellungen ist schnell zusammengestellt:

Installation WordPress Plugin Tinymce aufbohren – Tags bzw. Attribute erlauben

Kopiere diesen Code in eine Datei z.B. mit den Namen TinymceAufbohren.php, lade sie ins Plugin-Verzeichnis von WordPress hoch, wenn du willst dann stelle die Dateirechte so ein, dass die Datei von WordPress geschrieben werden kann (dies ermöglicht ein komfortales Editieren direkt von WordPress heraus, somit kannst du recht einfach in WordPress unter Plugins > Editor weitere Tags bzw. Attribute erlauben) und aktiviere anschließend in WordPress unter Plugins das Plugin TinymceAufbohren.

Problem ein für allemal gelöst und somit steht diesem Weblog kein Quellcode mehr das Bein 😉

Mein Dank gilt selbstverständlich den Orginalautoren der Plugins also Ryan für sein Syntax Highlighting Plugin und David J. Engfer für das Tinymce Valid Elements Plugin zum Erweitern der gültigen Tinymce Tags und Attribute! Lob gebührt einzig und allein ihnen beiden! Ich habe nichts selbst programmiert, sondern nur gesucht und gefunden!