YUI editor jako inline content Thickboxu

Co je co?

Nejdříve s laskavým dovolením popíšu, co jsem vlastně chtěl docílit. V práci píšu interní Trouble ticket systém. V něm chci otevřít WYSIWYG editor prostřednictvím thickboxu, což je widget pomocí něhož se dá cokoliv zobrazit v kompaktním dialogovém okně. Pro ilustraci se můžete podívat třeba na fotogalerii na stránkách firmy Krby Urban.

Kde je problém?

Idea je taková, že editor se nahraje už při načítání stránky. Bude-li chtít uživatel přidat záznam, klikne na k tomu určený odkaz. Ten otevře dialogové okno thickboxu, v kterém se objeví editor - já jsem zvolil Rich Text Editor (RTE), který je součástí velice zajímavé knihovny YUI od Yahoo (Thickbox je naopak napsán pod konkurenční jQuery). Trik je v tom, že editor je ukrytý v DIVu, který má nastavený CSS parametr display:none. Thickbox pak dokáže takto oparametrovaný DIV zobrazit v dialogovém okně. Potud v pořádku. Zakopaný pes je v tom, že editor se pak chová nestandardně - ve Firefoxu se chová jako neaktivní a nejde editovat - to znamená, že do něj nejde nic napsat. Což je u editoru poměrně nepříjemná vlastnost.

Jak z toho?

Vývojáři editoru na tuto situaci pamatovali a do knihovny začlenili metody show() a hide(). Metodu hide je v popisovaném případě vhodné zavolat při načítání stránky, kdy nechceme aktivní editor. Metodu show potom v momentu, kdy thickbox otevírá dialogové okno.

Vyřešit se to dá takto:

<body class="yui-skin-sam" onLoad="myEditor.hide();">

 <a href="#TB_inline?height=800&amp;width=800&amp;inlineId=Editor" class="thickbox">Otevřít editor</a>

<div id="Editor" style="display:none;">
  <form action="index.php" method="post" onMouseOver="myEditor.show();">
    <textarea id="okno_edidoru" name="okno_edidoru" cols="50" rows="10"></textarea>
    <input type="submit" name="odeslat" id="odeslat" value="Odeslat" />
  </form>
</div>

<script>
var myEditor = new YAHOO.widget.SimpleEditor('editor', {
    height: '250px',
    width: '745px',
});

myEditor.render();
</script>

</body>

Závěrem

Jak vidíte, metoda hide se volá při načtení stránky. Metodu show jsem nahrál pomocí onMouseOver u tagu form. Jestli si myslíte, že jednodušší je použít onClick u odkazu na otevření editoru, pak vězte, že to nefunguje.

Nahoru ↑

Přidáno: 11. června 2008

Užitečné ... uzitecne.mpelikan.com