Wysiwyg je zkratka, která znamená "what you see is what you get", tedy "co vidíš, to dostaneš". Wysiwyg editor slouží k tvorbě html textu, přičemž uživatel nemusí znát html kód vůbec. Pokud třeba máte svůj redakční systém, můžete pak opravdu jednoduše umožnit uživateli, aby si svůj vkládaný článek naformátoval dle libosti. Dnes bude řeč o wysiwyg web editoru TinyMCE.

TinyMCE

Tento produkt si můžete stáhnout na stránkách http://tinymce.moxiecode.com/ v sekci download. TinyMCE je opensource projekt a je k dispozici i český překlad. Žádná instalace není nutná, neboť aplikace se přímo integruje do vašich stránek. Proto stažený soubor pouze rozbalte na místo, odkud budete aplikaci volat. Vzniknou tak 3 složky. Složka docs obsahuje kompletní dokumentaci, postup instalace a konfigurace aplikace. Stačí z této složky spustit soubor index.html. Ve druhé složce examples jsou tři příklady nastavení a zobrazení aplikace. Poslední a jediná pro chod aplikace potřebná složka se jmenuje jscripts. V ní jsou uloženy všechny skripty aplikace.

Integrace do webu

Představme si, že máme někde na našem webu stránku s formulářem a s textovým polem:

<html>


        <head>


        </head>





        <body>


                <form method="post">


                        <textarea name="_taClanek" cols="60" rows="20"></textarea>


                </form>


        </body>


</html>

Toto je samozřejmě nepoužitelný kód a slouží nám pouze jako příklad. Do takového kódu integrujeme TinyMCE velice jednoduše:

<html>


        <head>


                <script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>


                <script language="javascript" type="text/javascript">


                        tinyMCE.init({


                                mode : "textareas"


                        });


                </script>


        </head>





        <body>


                <form method="post">


                        <textarea name="_taClanek" cols="60" rows="20"></textarea>


                </form>


        </body>


</html>

Přidali jsme tedy tučně zvýrazněný kód. Ano je to opravdu tak jednoduché. Jediné, na co si musíme dát pozor, je nastavení cesty ke skriptu tiny_mce.js (atribut src). Od tohoto momentu se vaše textová plocha změní a bude vypadat nějak takto:

V konfiguraci si můžete nastavit, jak má menu vypadat, tzn. jaké pluginy se použijí. Pokud formulář (doplněný o patřičné údaje) odešlete, bude proměnná _taClanek obsahovat HTML formátovaný text tak, jak si jej uživatel vytvořil.

Závěr

Tímto končí lehké představení TinyMCE. Pokud vás zajímají další podobné produkty, můžete se poohlédnout po FCKEditor, Xinha nebo komerční Innova Studio.

Autor: Radim Poloch

Facebook Twitter Topčlánky.cz Linkuj.cz

Sdílet