Jak na TinyMCE a AJAX

1. Ledna 2010

V dnešní době, jsou WYSIWYG editory velmi populární nástroj, který najde využítí, téměř na kadžém webu. Mezi nejpopulárnější editory určitě patří tinyMCE od společnosti Moxiecode. Já osobně pomavužji tento editor za velice kvalitní a když je někde třeba použít WYSIWYG editor tinyMCE je pro mě jasnou volbou. Kdo s tímto editorem někdy dělal, tak mi zajisté dá zapravdu, že práce s nim je velice jednoduchá ať už základní nastavení nebo implementace. Když člověk potřebuje nastavit opravdu nějakou vychytávku tak musí nahlédnout do dokumentace a trošku se do toho zavrtat, nicméně stále je nastavování editoru velice snadné, byť celkem robustní. Sečteno a podrtženo je práce s tinyMCE velice jednoduchá, až do té doby než přijde na řadu AJAX.

Ani nastavení AJAXu pro tinyMCE není nijak obtížné když, člověk ví jak na to. Nedávno jsem tento problém musel řešit a to tak že jsem měl formulář, který se odesílal metodou POST, ale kdykoliv během psaní mohl člověk uložit tzv. draft , který se ukládal v pozadí přes AJAX. Problém nastane ve chvili kdy zjistíte že když formulářová data odešlete pomocí AJAXu ale do "cíle" dorazí vše, kromě obsahu tinyMCE.

V čem je problém ?

TinyMCE si při načetení stránky nebo po specifickém triggeru (záleží jak si editor nastavíte) vytvoří speciální objekt nad vaší textareaou a jakékoliv změny do editoru děláte tak se ukládají pouze jako value tinyMCE objektu a nikoliv do vaší textarea, takže přístupem na hodnotu vašeho pole získáte prázdný string. Když formulář odesíláte klasickou metodou, tak se nic neděje protože tinyMCE přichází s pageUnload triggerem kdy celý obsah tinyMCE objektu přelije do vašeho pole a tak se data z vašeho formuláře pošlou všechny. Způsobů jak toto řešit je učitě více já vám nabízím dva způsoby řešení a je na vás, který z nich si vyberete.

První způsob

První způsob je, že před odesláním dat AJAXem tinyMCE schováte "ručně" a tudiž vyplní vaší textareu, odešlete data a následně necháte tinyMCE opět zobrazit. Jednoduché a efektivní.

function ulozAjax() {
  // vypni tinyMCE a nahraj obsah do #content
    tinyMCE.execCommand("mceRemoveControl", false, "content");
 
    // AJAXové volání napřklad přes JQuery
  $.post("ajaxova-stranka.php", $("#content").serialize(), callback() )  }
 
    // zapni tinyMCE editor
     tinyMCE.execCommand("mceAddControl", false, "content");
 

Toto řešení není uplně vhodné, protože může nastat prodleva druhé a podle mě efektivnější řešení je zde.

Druhé řešení

Načteme data z objektu a ručně je přiřadíme našemu poli pro tinyMCE textareau

function ulozAjax() {
 
    // načteme instanci tinyMCE pro naší textareu
  ed = tinyMCE.getInstanceById('content');
 
    // pokud exituje tak do naší area #content nahrajeme jeji obsah.
    if (ed) {
    $("#content").val(ed.getContent());
  }
 
    // a pošleme...
    // Ajaxové volání přes JQuery
  $.post("ajaxova-stranka.php", $("#content").serialize(), callback() ) }
 

Stoprocentně existují i jiné způsoby, ale myslím že způsob 2 je efektivní a dostačující a v některých případech se může hodit případ 1, pokud například po odeslání ajaxem už nechcete tinyMCE zobrazovat. Proto jsem uvedl tyto dva rozdilné postupy na stejnou věc a doufám že by tento článek mohl někomu pomoci.

Ohodnoť článek