Internetservice - Blog

bit4you präsentiert einen Blog rund um die Themen TYPO3, MySQL und PHP

Source Code in WordPress posten und Probleme mit dem TinyMCE-Editor eliminieren

Ziel:

  1. Source Code in WordPress posten
  2. Syntax Highlighting soll verfügbar sein
  3. WYSIWIG-Editing mit TinyMCE soll weiter verfügbar sein

Lesen Sie wie welchen Workarrounds dieses Ziel bei WordPress 2.3.2 ereicht werden kann:

Syntax Highlighting: Plugin WP-Syntax installieren

Das Plugin wrappt den Code standardmäßig in ein HTML-Tag dieser Art:
<pre lang=”LANGUAGE” line=”1″> Dein Programmcode </pre>

Folgende Probleme treten nun auf:

TinyMCE ersetzt in HTML/XML-Code wichtige Zeichen, wie z.B. eckige Klammern gnadenlos durch HTML-Entitäten. Dies passiert auch innerhalb von <pre> </pre> Blöcken. Die Internet-Browser zeigen dann aber die HTML-Entitäten im Klartext an, nicht als das Zeichen für das sie stehen. Der Code wird als unlesbar.

Workarround: man bringt den Syntax-Highliter GeSHi dazu div- statt pre-Tags zu verwenden.

Neues Problem: Dummerweise ersetzt TinyMCE nun die div-Tags gnadenlos durch a-Tags.

So lassen sich die Probleme lösen:

1) TinyMCE dazu bringen die div-Tags in Frieden zu lassen

Datei wordpress_webroot/wp-includes/js/tinymce/tiny_mce_config.php patchen
Zeile 25 alt:

$valid_elements = 'p/-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]';

Zeile 25 neu:

$valid_elements = '-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]';

2) wp-syntax / GesHi dazu bringen mit DIV-Headern zu arbeiten

Analog wie von Felho beschrieben modifizieren um GeSHi auf die Verwendung von div-Tags umzuschalten
http://blog.felho.hu/posting-source-code-in-wordpress-escaping-and-syntax-highlighting-the-inserted-code.html

Zeilen 74/75:

$geshi = new GeSHi($code, $language);
$geshi-&gt;enable_keyword_links(false);

ersetzen durch:

define("GESHI_HEADER_DIV", 1);
$geshi = new GeSHi(htmlspecialchars_decode($code), $language);
$geshi-&gt;enable_keyword_links(false);
$geshi-&gt;set_header_type(GESHI_HEADER_DIV);
$geshi-&gt;set_tab_width(4);

Hinweis: Bei php4 die Funktion htmlspecialchars_decode weglassen!
3) In den Code-Editor d eine neue Schaltfläche “Source-Code” einfügen,

die es auf elegante Weise erlaubt den eingefügten Code in ein Steuertag für das
Plugin WP-Syntax einzufügen

wordpress_webroot/wp-includes/js/quicktags.js
modifizieren, wie Felho dies in seinem Blog beschrieben hat:
http://blog.felho.hu/posting-source-code-in-wordpress-escaping-and-syntax-highlighting-the-inserted-code.html

Kommentare sind zur Zeit geschlossen.

Internetservice - Blog läuft unter Wordpress 2.3.2
Anpassung und Design: bit4you :: Waldseer Str. 14 :: 88250 Weingarten