Rozšírenia ktoré budem opisovať v tomto zápisku sú rozšíreniami pre doplnky redakčného systému Joomla. Konkrétne sa jedná o preelementfix, čo je zásuvný modul (plugin) pre TinyMCE (WYSIWYG editor). Vhodný je najmä pre programátorov nakoľko odstraňuje tvrdohlavosť TinyMCE pri úprave vzorky predformátovaného textu uvádzaného v (X)HTML elemente

. Spomínaná vzorka predformátovaného textu je častokrát kód, alebo skript napísaný v programovacom jazyku ktorý má svoju syntax. Jej farebné zvýraznenie nám zabezpečí doplnok Code Highlighter ktorý využíva GeSHi (Generic Syntax Highlighter). Tento doplnok sa štandardne nachádza v balíku redakčného systému Joomla, avšak dodávatel riadne osekal množstvo podporovaných jazykov a zameral sa iba na pár vyvolených, súvisiacich s web technológiami. Mojim cieľom bolo napraviť toto nešťastné rozhodnutie a zároveň odstrániť všeobecný problém s interpretáciou ampérsandu, ktorý vzniká pri špecifickej kombinácii TinyMCE a GeSHi.

TinyMCE

Tí ktorí sa už pokúsili o vloženie formátovaného textu uzavretého do (X)HTML elementu pre v editore TinyMCE už určite narazili na problém s automatickým doplnením elementov

alebo¹
, prípadne iných absurdít. Toto úspešne rieši zásuvný modul preelementfix, ktorý pridáva aj ďaľšie zaujímavé funkcie pre prácu s formátovaným textom v pre elemente.

¹ - podľa nastaveného zlomu riadkov v konfigurácii red. sys. Joomla

Balík rozbalíme do umiestnenia /plugins/editors/tinymce/jscripts/tiny_mce/plugins pod názvom preelementfix
Následne nájdeme riadok // Plugins, malo by sa jednať o riadok č. 207 v súbore /plugins/editors/tinymce.php
Do pola plugins[] vsunieme náš nový plugin nasledovne:

    // Plugins

    // preelementfix
    $plugins[]              = 'preelementfix';

Skontrolujeme prístupové práva nových súborov a pokial je všetko v poriadku, preelementfix sa načíta s ďalším spustením, alebo obnovením TinyMCE.

Code Highlighter - GeSHi

Ako som už spomenul v úvode, GeSHi dodávané v balíku s redakčným systémom Joomla je poriadne osekané. V prípade že chceme túto situáciu zmeniť, stiahneme si kompletné GeSHi vo verzii ktorá bola dodaná s Joomlou. O akú verziu sa jedná zistíme z /libraries/geshi/geshi.php
Budeme hladať riadok:

/** The version of this GeSHi file */
define('GESHI_VERSION', '1.0.8.6');

Vaša verzia sa od mojej môže líšiť, keďže som naposledy stiahol a aktualizovall GeSHi včera (aj to už stihli vydať novú verziu 1.0.8.8).

Na výber máme teda dve možnosti. Buď iba doplníme chýbajúce súbory (ostatné jazyky) rovnakej verzie, alebo si GeSHi rovno aj aktualizujeme.

Doplnenie spočíva v prekopírovaní obsahu adresáru geshi/ zo stiahnutého balíku zistenej pôvodnej verzie GeSHi. V tomto adresári už nie sú žiadne iné podadresáre, len súbory PHP (s príponou .php).

Aktualizácia je totožná s doplnením až na to že použijeme najvnošiu aktuálnu verziu GeSHi a pôvodné súbory nahrádzame kopírovanými. Nahradiť musíme aj /libraries/geshi/geshi.php aktuálnou verziou zo stiahnutého balíku.

Ako aktivovať zvýraznenie

V atribúte xml:lang špecifikujeme jazyk podľa ktorého pravidiel sa bude syntax zvýrazňovať. V uvedenom prípade sa jedná o PHP.

Chybná interpretácia ampérsandu

Pri napísaní ampérsandu (&) v TinyMCE sa tento znak zmení na HTML entitu & a tak sa aj odošle formulárom do databázy. GeSHi pri spracovaní vezme iba '&' a spraví z neho znova HTML entitu &. Túto potom ofarbí (vloží do span elementu s nastaveným priamym štylopisom) a nasledujúci text amp; čiže pôvodná HTML entita ostane bez zmeny. Vo finále to potom vyzerá nasledovne:

    if (TRUE && TRUE) { echo "Hello World!"; }

namiesto

    if (TRUE && TRUE) { echo "Hello World!"; }

GeSHi pracuje nad výstupom z databázy, to znamená že text sa zvýraznený do databázy neukladá. Spracovanie teda prebieha vždy on-line na strane serveru. Problémom opísaným vyššie sa už niekto zaoberal a síce komunita drupal projektu. Spočíva v upravení /libraries/geshi/geshi.php nasledovne:

Nájdeme

        // Replace all newlines to a common form.
        $code = str_replace("\r\n", "\n", $this->source);
        $code = str_replace("\r", "\n", $code);

a pridáme

        // Addition - replace all malformed entities
        $code = str_replace(">", ">", $code);
        $code = str_replace("<", "<", $code);
        $code = str_replace("'", "'", $code);
        $code = str_replace(""", "\"", $code);
        // Replace function of ampersand entity must be always last!
        $code = str_replace("&", "&", $code);

výsledok by mal vyzerať nasledovne:

        // Replace all newlines to a common form.
        $code = str_replace("\r\n", "\n", $this->source);
        $code = str_replace("\r", "\n", $code);
        // Addition - replace all malformed entities
        $code = str_replace(">", ">", $code);
        $code = str_replace("<", "<", $code);
        $code = str_replace("'", "'", $code);
        $code = str_replace(""", "\"", $code);
        // Replace function of ampersand entity must be always last!
        $code = str_replace("&", "&", $code);

Originál nájdete tu: WYSIWYG - GeSHi bridge

Dôležité: len nedávno som zistil že v originálnom návode a taktiež v mojom článku bola chyba. Jedná sa o poradie funkcie str_replace(), ktorá nahrádza entitu & znakom & - musí byť uvedená ako posledná! Tento dodatok je zo dňa: 29.05.2010?

---

Blogpost pochádza z cyberasylum.eu