FCKeditor a AJAX - problém s GetData a jeho řešení

Sobotní den pro mě byl ve znamení programování, konkrétně jsem se zabýval úpravami FCKeditoru pro použití na stránce Vyplňto.cz. Kromě specifického ukládání souborů do databáze (pochlubím se později) jsem potřeboval zejména zajistit průběžné ukládání editovaného obsahu na server přes ajax, protože to je jedním ze základních pilířů ovládání Vyplňto.cz (minimalizace klikání na jakákoli tlačítka, žádné odesílání formulářů, vymizení problému s expirací seance při psaní delších textů).

Objevil se však nečekaný problém – jakmile jsem pomocí FCKeditorAPI a funkce GetData (popř. starších GetHTML nebo GetXHTML) přečetl obsah FCKeditoru, rázem přestaly v Internet Exploreru (verze 6 i 7) fungovat některé základní formátovací funkce – např. tučné, skloněné a podtržené písmo (core styles - bold, italic, underline). Jako přesvědčený uživatel IE jsem samozřejmě nad tímto problémem nemohl mávnout rukou a rozhodl se ho vyřešit.

Po delším googlení se mi podařilo nalézt jedno vlákno, které dokázalo, že v tomto problému (bug 2156, bug 2092) nejsem sám. Bohužel jsem napoprvé zcela neporozuměl nabízenému řešení, a tak jsem zkusil více či méně krkolomné metody, které k požadovanému cíli nevedly.

Jako první mě napadlo šáhnout na zdroj HTML klasicky přes DOM, respektive pomocí následující konstrukce:

Přestože formátování začalo opět fungovat, nebyl jsem s výsledkem spokojen. Výsledný HTML kód byl totiž dost prasácký a neupravený.

Dále mě napadla ďábelsky hrozná myšlenka – mít FCKeditory na stránce dva, přičemž v jednom by probíhala editace, ve druhém (schovaném) bych prováděl vyčištění kódu a nevadilo by mi, že v něm formátování nefunguje. Prostě překopírovávat periodicky surové HTML z jednoho editoru do druhého a potom volat GetData. Naštěstí se mi to nepodařilo zrealizovat kvůli problémům s FCKeditorAPI – z neznámého důvodu se zaregistroval vždycky jen jeden editor (id měl samozřejmě každý editor svůj).

Až po několika hodinách ladění, během nichž jsem prolezl stovky řádků zdrojového kódu FCKeditoru a postupně zakomentovával jednotlivé příkazy ve snaze identifikovat zdroj chyby, mě napadlo se jednoduše přes výše uvedený kousek kódu podívat na skutečný obsah editovaného dokumentu po zavolání GetData.

Ukázalo se, že zatímco GetData vrací docela hezký HTML kód, skutečný obsah editovaného dokumentu v IFRAME je zaneřáděný pomocnými atributy XHTML parseru _fckxhtmljob. Programátoři zřejmě nepočítali s tím, že by po přečtení obsahu ještě někdo chtěl něco editovat (popř. to jsou IE ignoranti), přítomnost tohoto atributu má bohužel z hlediska další editace dost fatální důsledky.

Řešení

Řešení pomocí jednoduchého a rychlého innerHTML.replace('_fckxhtmljob','') způsobuje zbytečné problémy se ztrátou fokusu kurzoru, pokud se však atributy rekurzivně odstraní pomocí Javascript DOM, funguje vše konečně hladce a s rozumným zatížením procesoru (u mého notebooku méně než 10% u běžně dlouhých textů). Pro získání HTML kódu z FCKeditoru můžete použít následující kód:

Bonusový problém - nefungující event OnSelectionChange v IE

U elementu TEXTAREA jsem si na Vyplňto dopřál ten luxus, že odesílám jeho obsah na server několik desítek milisekund po posledním zdvihu klávesy (onkeyup + timeout). Měl jsem velkou snahu docílit podobného chování i u FCKeditoru, bohužel se ukázalo, že event OnSelectionChange (vyvolaný vždy po jakékoli změně, nebo přesněji jakékoli události myši nebo klávesnice) funguje spolehlivě pouze ve Firefoxu a je tím pádem nepoužitelný. V oficiální dokumentaci se píše, že bylo volání OnSelectionChange pro IE příliš náročné a při rychlejším psaní docházelo k pádům. Proto přistoupili k pouze náhodnému vyvolání této události (dle mého pozorování cca 1:20). Generátor tohoto náhodného mechanismu se mi nalézt nepodařilo a upřímně řečeno jsem ho ani příliš dlouho nehledal – poslední, co potřebuji je, aby FCKeditor padal :-)

Jako nejspolehlivější řešení se nakonec ukázal timer, který každých cca 250 ms proleze všechny FCKeditory na stránce, a v případě zjištěné změny odešle obsah na server. Kód již brzy v praxi uvidíte na Vyplňto...