Nebojte se WYSIWYG editoru

WYSIWYG je anglická zkratka pro slovní spojení What You Seen Is What You Get. V překladu to znamená “co vidíš to dostaneš”. Ačkoliv je zkratka opravdu strašidelná a špatně zapamatovatelná jedná se o nástroj, který přináší veliké zjednodušení při editaci obsahu na Vaší www stránce. Pokud umíte naformátovat text například v programu Microsoft Word, tak zvládnete i práci s WYSIWYG editorem.

Mezi nejrozšířenější editory patří TinyMCE a CKEditor. V článku se budeme především věnovat CKEditoru, který je v nových administracích používán častěji. Oba editory si samozřejmě můžete vyzkoušet na následujících adresách http://www.tinymce.com/tryit/full.php a http://ckeditor.com/demo. Pro lepší pochopení článku si můžete otevřít ukázku CKEditoru z adresy uvedené výše. Protože se jedná o ukázku v editoru jsou zapnuty všechny možné ovládací prvky. Pro základní formátování textu budeme potřebovat pouze pár z nich. Po otevření ukázkové stránky se zobrazí samotný editor.

V horní části se nacházejí ovládací prvky, následovány samotným obsahem editoru kde je předdefinovaný naformátovaný text, vidíme na něm použití zarovnaného obrázku, nadpisu první úrovně, obyčejného textu v odstavci, odkazu, tučného textu, zarovnané tabulky a kurzívy. Tento ukázkový text můžeme smazat, vytvoříme si vlastní. Smazání provedeme označením a vymazáním celého obsahu (u této varianty si zkontrolujte zda-li Vám nezůstalo na prvním řádku formátování z minulého příkladu). Nebo si na prvním řádku ovládacích prvků najdeme ikonku prázdného listu s popiskem “Nová stránka” a kliknutím si založíme novou čistou stránku.

Začneme vložením obrázku, ten můžeme vkládat pomocí internetové adresy s umístěním obrázku nebo jeho nahráním z Vašeho počítače do úložiště. Obrázek vložíme tak, že na prostředním řádku ovládacích prvků klikneme na ikonku obrázku (nachází se hned jako první a znázorňuje jí krajinka s domem). Otevře se okno pomocí kterého můžeme vložit obrázek.

Do pole URL můžeme vložit výše zmiňovanou adresu (např.: http://cesta_k_obrazku.png). Další možností je nahrání obrázku z Vašeho počítače přes odkaz “Vybrat na serveru”. Otevře se průzkumník úložiště kde můžeme nahrát obrázek z počítače do úložiště nebo si dvojklikem vybereme již nahraný obrázek. Po vybrání obrázku nás průzkumník nasměruje na počáteční formulář vkládání obrázku kde vidíme jeho náhled. Důležitým prvkem je “Zarovnání” kde nastavíme například vlevo. Náhled se automaticky upraví podle volby zarovnání. Můžeme dále nastavit okraje obrázku, horizontální mezeru (obrázek nebude natěsnaný na obsahu), vertikální mezeru, výšku, šířku a další volby, které nejsou až zas tak podstatné. Pokud máme nastavení hotovo klikneme na “OK” a obrázek se vloží do editoru. K tomuto nastavení se můžeme kdykoliv vrátit, stačí kliknout pravým tlačítkem na obrázek a zvolit “Vlastnosti obrázku”.

Nyní vedle obrázku vložíme text. Pokud jste zvolili zarovnání vlevo obrázek bude zarovnán doleva a text ho bude “obtékat” zprava. Je jedno jaký text vložíme, v ukázce je vidět náhodně generovaný Lorem ipsum text. V textu si nyní zkusíme část zvýraznit pomocí tučného písma. Označíme si kurzorem text co chceme zvýraznit a v druhém řádku ovládacích prvků hned na začátku klikneme na písmeno B. Označený text by se měl ztučnit. Stejně si můžeme odzkoušet i kurzívu, podtržený text, přeškrtnutý text a psaní indexů. Typy textů můžeme mezi sebou kombinovat. Pokud již nechceme používat zvýraznění dalším klepnutím na jeho ovládací prvek ho deaktivujeme.

Toto jsou opravdu základní dovednosti editoru. Pokud se podíváme do další buňky ovládání, uvidíme možnost tvorby seznamů, nastavení odsazení, zarovnání textu, vložení odkazu, obrázku, tvorbu tabulek a samozřejmě mnoho dalších možností. Na dalším řádku pak především formát textu, kde si můžeme nastavit nadpisy, font písma, velikost písma, barvu textu a barvu pozadí.

Na závěr si můžete sami naformátovat text jako na příkladu. Nejde nám o výsledný vzhled či obsah, ale pouze o procvičení zarovnání textu, vložení obrázku a tučné či jinak upravené písmo.