Textový editor

Editor slúži pre formátovanie textového obsahu v administrácii. Ide o tzv. WYSIWYG (skratka z anglického označenia "What you see is what you get"). Umožňuje vytvárať popisky produktov, texty článkov, formátovať texty, vytvárať tabuľky, vkladať obrázky, videá atď. Pre technicky zdatnejších umožňuje vloženie HTML kódu do stránky.

Textový editor je po načítaní stránky vypnutý. Stránka administrácie sa vďaka tomu načíta rýchlejšie. Preto pokiaľ potrebujete v textovom poli upravovať, je potrebné editor najskôr aktivovať. Stačí kamkoľvek do poľa kliknúť myšou.

Otvorenie textového editora

Pred aktiváciou

Po aktivácii

Vloženie textu

Do textového editora je možné textový obsah pridať:

• ručne,
• vložením skopírovaného obsahu.

Ručne

• Výhodou ručného napísania textov priamo v editore je, že nebude obsahovať nežiaduce formátovanie, ktoré môže spôsobiť zlé zobrazenie textu na e-shope.
• Nevýhodou je samozrejme prácnosť.

Vložením skopírovaného obsahu

• Výhodou je rýchlosť a čiastočné formátovanie obsahu (napr. tučnosť, štýl, nadpisy písmo atď.)
• Nevýhodou je nutnosť dodatočne upraviť vložený obsah (pri vkladaní čistého textu) alebo riziko, že sa pri vkladaní vrátane formátovania vložia tiež skryté štýly. Tie môžu spôsobiť zlé zobrazenie textu na e-shope.

Vkladanie formátovaného textu

Po aktivácii textového editora je štandardne zaškrtnutá voľba Vložiť ako čistý text, aby vkladaný text neobsahoval formátovanie. Pokiaľ si prajete vkladať kopírovaný text vrátane jeho formátovania, túto voľbu odškrtnite.

Odstránenie nežiaduceho formátovania

Máte niekoľko možností, ako sa zbaviť nežiaduceho formátovania pri kopírovanom obsahu.

1. V textovom editore pomocou funkcie Vložiť ako čistý text.
1. V ponuke Úpravy zvoľte príslušné podmenu.
   
2. Pomocou špeciálnej funkcie v textovom editore.
1. Označte celý text v okne pomocou Ctrl + A.
2. V ponuke Formát kliknite na podmenu Vymazať formátovanie.
   
3. Pomocou skopírovania do programu Poznámkový blok.
1. Skopírovaný text najskôr vložte do súboru .txt v programe Poznámkový blok. Prípadne do iného programu, ktorý zruší formátovanie nakopírovaného textu.
   
2. Text zbavený všetkého formátovania označte.
3. Skopírujte označený text.
4. Vložte skopírovaný text do textového editora.
5. Vykonajte nevyhnutné úpravy v textovom editore do zodpovedajúcej podoby.

Späť a dopredu

Nasledujúcim spôsobom môžete vrátiť vykonanú zmenu údajov.

V lište zvoľte ikonky šípok pre krok späť alebo dopredu z pohľadu vykonaných úprav.

Veľkosť písma

Možnosť výberu veľkosti písma a bloku textov ako sú odseky a nadpisy. Texty sa automaticky naformátujú podľa nastavených štýlov e-shopu.

1. Označte text, pri ktorom chcete urobiť zmeny.
2. V lište funkcií rozkliknite pole Odsek a zvoľte požadovaný formát.
3. V lište funkcií kliknite a nastavte požadovanú veľkosť textu.
4. Uložte.

Na základe veľkosti písma v editore textu (8pt, 10pt atd.) sa nastavuje percentuálna veľkosť textu na stránke. Východisková hodnota je 11pt, tzn. má veľkosť 100%.

Štýl písma

Po prvom kliknutí na tlačidlo sa štýl vykoná, po ďalšom sa odstráni. Tieto štýly je možné vzájomne kombinovať.

1. Označte text, pri ktorom chcete urobiť zmeny.
2. V lište funkcií kliknite na ikonu z výberu viď nižšie.
3. Uložte.

• B – tučné písmo, skratka CTRL+B
• I – kurzíva, skratka CTRL+I
• U – podtrhnuté písmo, skratka CTRL+U

Farbenie

Nasledujúcim spôsobom môžete zmeniť farbu písma a podfarbenie textu. Po rozkliknutí výberu sa ponúkne niekoľko základných farieb alebo si z palety všetkých farieb RGB môžete zvoliť farbu vlastnú.

1. Označte text, pri ktorom chcete urobiť zmeny.
2. V lište funkcií kliknite na ikonu z výberu viď nižšie.
3. Uložte.

Zarovnanie

Zarovnanie označeného textu alebo odseku doľava, na stred, doprava alebo do bloku.

1. Označte text, pri ktorom chcete urobiť zmeny.
2. V lište funkcií kliknite na ikonu viď nižšie.
3. Uložte.

Obrázky

Pokiaľ zarovnanie aplikujete na obrázok, dôjde k obtečeniu jeho okolia. V kóderskej terminológii ide o tzv. float.

Odrážky a číslovanie

Nastavenie zoznamu s odrážkami alebo číslovaním z označeného textu.

1. Označte odseky, v ktorých chcete robiť zmeny.
2. V lište funkcií kliknite na ikonu viď nižšie.
3. Uložte.

Vloženie obrázku

Obrázok je možné vložiť tiež priamo do textu pomocou textového editora. 

Nevýhodou je, že taký obrázok nie je možné rozkliknúť na zväčšený formát v slideshow. Jeho rozmery si musíte navyše upraviť tak, aby vyhovovali veľkosti stránky (systém ich automaticky neupravuje). Avšak v grafických šablónach je zaistené, aby šírka obrázku "nepretiekla" šírku miesta, v ktorom sa obrázok nachádza. Veľkosť v kilobitoch však zostane nezmenená, preto ide o nie príliš efektívny spôsob optimalizácie obsahu.

Postup v administrácii

1. Kliknite do miesta, kam chcete obrázok vložiť.
2. Kliknite na ikonku Vložiť / upraviť obrázok.
3. Kliknite na symbol vybratie obrázka za poľom URL.
4. Vyberte zo správcu súborov obrázok. Viac o vložení obrázku do správca súborov v nápovede tu.
5. Uložte.

Na karte Pokročilé je možné podľa potreby nastaviť medzery medzi obrázkom a jeho okolím (pole Vertikálna / Horizontálna medzera). Prípadne ohraničenie obrázka (Šírka / Štýl ohraničenia).

Výsledný kód sa zobrazuje v poli Štýl. Toto pole neslúži na priame zadávanie kódu.

Vloženie videa

Pre vloženie videa do textu použite tlačidlo Vložiť/upraviť médiá. Umožňuje vložiť kód multimédia ako je youtube alebo akýkoľvek iný kód v HTML značke iframe.

Vloženie videa z Youtube

1. V lište funkcií kliknite na ikonu videa "Vložiť / upraviť médiá".
2. Prejdite na záložku "Vložiť".
3. Vložte kód videa. Ako získať kód videa z youtube nájdete tu.
4. Uložte.

Vloženie vlastného video súboru

1. V lište funkcií kliknite na ikonu videa "Vložiť / upraviť médiá".
2. Kliknite na ikonku za poľom URL. 
3. Nahrajte video cez správcu súborov. Viac o vložení obrázka do správcu súborov v nápovede tu.
4. Uložte.

Vloženie odkazu

Možnosť vytvárania textových alebo obrázkových odkazov vnútri textu. Základom je označiť v textovom editore ľubovoľný prvok, napríklad časť textu alebo obrázok. Po označení sa tento nástroj aktivuje a po prekliku na ikonku Vložiť / upraviť odkaz sa dostanete do jeho nastavenia.

1. Označte text alebo objekt, z ktorého chcete urobiť odkaz.
2. V lište funkcií kliknite na ikonu reťaze Vložiť / upraviť odkaz.
3. Vyplňte požadované údaje.
4. Uložte.

• URL - adresa, na ktorú odkaz povedie. Ako písať správne adresy odkazov nájdete tu.
• URL stránky - Napíšte adresu stránky, na ktorú chcete odkazovať (napr. http://www.google.com).
• E-mailová adresa - Zadajte e-mailovú adresu (napr. info@upgates.cz).
• Kotva - Pokiaľ chcete odkazovať na kotvu umiestnenú na stránke, vložte do URL odkazu názov kotvy so znakom mriežky (napr. #kotva1). Kotvu pridáte podľa návodu tu.
• Text na zobrazenie - Viditeľná textová časť odkazu.
• Titulok - Popis odkazu, ktorý sa objaví po nabehnutí myšou. Odporúčame vkladať v prípade, že odkaz je vytvorený na obrázku.
• Otvoriť odkaz v... - Určuje umiestnenie stránky, na ktorú je odkazované.
• Aktuálne okno - Stránka sa otvorí v terajšom okne prehliadača.
• Nové okno (_blank) - Stránka sa otvorí v novom okne prehliadača.

Vloženie tabuľky

Pomocou textového editora je možné vkladať aj tabuľky. Na začiatku si jednoducho určíte počet riadkov a stĺpcov, ktoré bude tabuľka obsahovať.

Následne vyplníte požadovaný obsah tabuľky. Potiahnutím linky stĺpcov je možné upravovať veľkosti samotnej tabuľky a tiež ich prvkov. Pozri oblasti znázornené na obrázku nižšie.



Podobne je možné upravovať výšku tabuľky a jednotlivých riadkov.

Tabuľka sa následne správa responzívne, keď sa na užších mobilných obrazovkách zobrazuje posuvník (scroll bar).

Vloženie kotvy

Nástroj sa využíva pre spresnenie nasmerovania odkazu napríklad na konkrétny nadpis na stránke, prípadne na konkrétny obrázok v texte.

1. Označte text alebo iný objekt v texte.
2. V hornom menu editora textu rozkliknite ponuku Vložiť a podmenu Kotva.
3. V okne do poľa Id zadajte názov kotvy bez medzier, veľkých písmen a diakritiky. Napr. kotva1.
4. Uložte.
5. Teraz môžete do stránok vkladať odkaz na túto kotvu podľa návodu na vytvorenie odkazu.

Pri presunutí na kotvu si je možné zadať posunutie na nižšiu pozíciu, ktorá zohľadňuje výšku horného menu. Pre aktiváciu tohto spôsobu je potrebné v ID prvku, ktorý slúži ako kotva, pridať na koniec text "-scroll". Napr.

<a id="kotva-scroll"></a>

V samotnom odkaze na kotvu sa použije text bez "-scroll" na konci. Napr.

<a href="URL-adresa#kotva">Odkaz pomocí kotvy</a>

Úprava HTML kódu

Obsah textového editora môžete formátovať nielen bežnými funkciami editora kódu, ale aj na úrovni zdrojového kódu. Pre tieto úpravy je potrebné mať znalosti kódovania HTML, prípadne CSS.

1. V lište funkcií kliknite na ikonu Zdrojový kód.
2. Vo vyskakovacom okne upravte obsah textového editora v zdrojovom kóde.
3. Uložte.