Textový editor Tiny MCE slouží k vytváření popisků produktů, psaní příspěvků na blogu, psaní info článků v textovém menu, tabulek, formátování textu, ale i k vkládání odkazů, tzv. kotev na rychlý přesun v obsahu, obrázků a videí. Pokročilejším uživatelům umožňuje také přímé vkládání různých prvků pomocí zdrojového kódu.
Popis nejpoužívanějších funkcí / nástrojů textového editoru
Rozvržení prvků v editoru TinyMCE 5.0.8
Styl písma
Může se aplikovat na označený text. B – tučné písmo, zkratka CTRL+B I – kurzíva, zkratka CTRL+I U – podtržené písmo, zkratka CTRL+I S – přeškrtnuté písmo
Zarovnání textu
Zarovná odstavec (nebo označený text) vlevo, na střed, vpravo nebo do bloku.
Formát textu
Nastaví označený text na vybraný předdefinovaný formát. Dodržujte logické členění nadpisů tzn. hlavní nadpis H1, by měl být na stránce zahrnut pouze jednou (H1 je důležitý nadpis také pro SEO). Ostatní nadpisy H2, H3 atd. čleňte rovněž dle důležitosti. Z palety můžete volit také fonty písma, nebo se vrátit na systémové písmo, které se vezme automaticky z designérem předvoleného písma šablony e-shopu. Ve většině případů doporučujeme využít právě tuto možnost pro jednotný vzhled vašeho e-shopu. Velikost písma se na šablonách 4.0 nastavuji v tzv. rem jednotkách. 1rem (1 root em) obsahuje výchozí velikost písma nastavenou autorem pro dokument a případně ještě upravenou uživatelem nebo prohlížečem. Pokud ji na dokumentu nezměníte, platí, že 1rem = 16px. Na šablonách 3.0 a starších se velikost písma nastavuje v jednotkách PX – pixel.
Krok zpět / dopředu
Umožňuje vrátit poslední krok zpět, nebo ho znovu vykonat. Pokud například vložíte obrázek, a zjistíte, že ho tam nechcete, použijete ZPĚT a poslední vykonaný krok se stornuje (vložení obrázku). Když si pak vzápětí uvědomíte, že tam ten obrázek vlastně chcete, použije krok DOPŘEDU a naposledy odvolaný krok se zase vykoná.
Vystřihnout, kopírovat, přelepit
Označený text se vystřihne (CTRL+X) resp. zkopíruje (CTRL+C). „Přilepit“ (CTRL+V) vloží vystřihnutý nebo zkopírovaný text na pozici kurzoru. Nefunguje v prohlížeči Mozilla Firefox – je třeba použít klávesové zkratky.
Najít a nahradit
Snadno a rychle vám tato funkce pomůže v dlouhém textu najít a nahradit požadovaný obsah. Klávesová zkratka CTRL+F
Seznam a styl
Umožňuje vytvoření odrážek nebo číslovaného seznamu. Možno použít jak od pozice kurzoru, tak aplikovat na označený text. Nastaví styl označeného seznamu – typ odrážek nebo číslování podle typu použitého seznamu. Použije se na seznam odrážek.
Zmenšit / zvětšit odsazení a citace
Zmenší (posune doleva) nebo zvětší (posune doprava) odsazení označeného textu. Citace označí text kurzívou a naformátuje.
Vložit / upravit odkaz
Označte text, z kterého chcete vytvořit odkaz a stiskněte toto tlačítko. Zadejte www adresu (včetně počátečního https://) nebo jméno záložky, na kterou má odkaz směrovat, případně další parametry, a potvrďte stisknutím tlačítka VLOŽIT v levém dolním rohu dialogového okna.
Sousední tlačítko odstraní hypertextový odkaz z označeného textu (není třeba označovat celý text, ze kterého vede odkaz, stačí kliknout kamkoliv v textu s odkazem).
Kotva
Kotva na pozici kurzoru vloží „záložku“ se zvoleným jménem, na kterou je možné odkazovat hypertextovým odkazem. Zde najdete podrobnější popis a nastavení funkce
Vložit obrázek/video
Do pole „URL odkazu“ zadejte cestu k obrázku, emailovou adresu, vazební číslo článku nebo url adresu jiné stránky, kam chcete odkaz nasměrovat.
Při vkládání videa na pozici kurzoru se vloží mediální soubor (například na YouTube a pod).
Zdrojový kód
Umožňuje přímou editaci/vkládání zdrojového kódu (nejčastěji HTML a CSS), pomocí kterého můžete vkládat vlastní obsah např. tlačítka, rozdělovníky apod.
HTML mód
Umožňuje přímou editaci HTML kódu vloženého obsahu v textovém editoru. Editace pomocí přímého zásahu do kódu a vstup do tzv. HTML módu se doporučuje zkušenějším uživatelům, kteří se dokáží orientovat ve zdrojovém kódu! Na rozdíl od editace kódu pomocí tlačítka viz.výše, kde nemáte přístup do veškerého obsahu kódu, máte při vstupu do HTML kódu přístup do veškerého kódu obsahu a lze tak snadno i poškodit zdrojový kód.
Barva písma a pozadí písma
Můžete vybrat barevnost písma/pozadí písma z předdefinované palety, nebo nastavit požadovanou barvu pomocí RGB/HEXA kódu.
Vložit tabulku
Můžete vložit tabulku, upravit řádek, upravit buňku, vložit řádek na začátek tabulky, vložit řádek na konec tabulky, odstranit řádek, vložit sloupec na začátek, vložit sloupec na konec, odstranit sloupec, rozdělit spojené buňky, spojit buňky atd.
Vodorovný oddělovač
Vloží na pozici kurzoru horizontální dělící čáru.
Odstranit formátování
Odstraní formátování označeného textu (nastavenou velikost, font, odkaz a pod.)
Dolní / horní index
Z označeného textu udělá dolní, případně horní index
Přepíná mezi zobrazením textového pole v původní velikosti a celou obrazovkou.
Pevná mezera
Řádek textu se v této mezeře nezalomí. Pevná mezera se používá tam, kde je rozdělení dvou slov (čísel, symbolů) na různé řádky nežádoucí.
Podrobný návod na vkládání mediálních souborů, odkazů a kotev
Vložit obrázek
Tento nástroj se používá, jak již samotný název napovídá, na vkládání obrázků přímo do textů. Po prokliku se dostanete přímo do nabídky pro vkládání obrázku. Máte zde dvě možnosti nastavení Obecné (1) a Pokročilé (2). Vložit obrázek lze dvěma způsoby buď pomocí vložení URL adresy (3), nebo nahrání z galerie (4).
Náš tip: Častou chybou bývá vkládání obrázků se zbytečně velkým rozlišením a velkým datovým objemem, které zhoršuje rychlost načítání webu. Jak vhodně zpracovávat obrázky naleznete v článku Zrychlete svůj eshop – optimalizujte obrázky!
1 – Vložení obrázku pomocí URL adresy
Tato možnost se používá v případe, že je již obrázek někde na interenetu uložen a Vy znáte jeho url adresu. Pro ukázku použiji logo vyhledávače Seznam.cz, které má url http://www.seznam.cz/st/img/logo-2.gif. Tuto adresu pak pouze vypíšete do kolonky pro url ( 3 obr. výše) odkazu nebo ji tam překopírujete.
Po uložení se obrýzek zobrzí přímo v textové editoru. Výhoda této vyrianty je, že obrázek není fyzicky uložen v tomto systému, takže ušetříte prostor, který máte k dispozici. Nevýhoda je, že pokud v našem případě server Seznam toto logo smaže nebo přemístí pod jinou adresu, nebude se na vašem webu zobrazovat.
2 – Obrázek nahrát
Tato možnost se využívá v případě, že obrázek chcete přímo do systému uložit, čehož docílíte přes symbol upload , který se zobrazuje za kolonkou pro url odkazu.
-> Po prokliku na tlacitko vás system přepne do obrázkového manageru systému
-> zde v pravém horním rohu máte možnost nahrát nový obrázek přes symbol
-> po prokliku na nahrát se zobrazí tlačítko „Přidat soubory“, pomocí kterého se pak zobrazí přímo váš počítač
-> zde obrázek nebo více obrázku kurzorem myši označíte vložení potvrdíte tlačítkem „Spustit nahrávání“
->poté se obrázky nahrají do systému a budou viditelné přímo v okně obrázkového manažeru
Vložit / upravit odkaz
Nástroj se využívá pro vytváření textových nebo obrázkových odkazů v textu. Základem je označit v textovém editoru vložený libovolný prvek například část textu nebo vložený obrázek. Po označení bude tento nástroj aktivní a po prokliku se dostanete do jeho nastavení, kde můžete vytvořit odkaz na:
1 – URL adresu
Do kolonky url odkazu zadáte celou url adresu stránky včetně https (např. https://www.eshop-rychle.cz). Pokud nevyplníte úplnou url adresu, nebude odkaz funkční. Po uložení bude z označeného textu nebo obrázku odkaz na tuto adresu. V roletce Otevřít okno v…můžete určit, zda bude otevřené nové okno.
2 – Emailovou adresu
Do kolonky url odkazu se v tomto případě zadává emailová adresa s prefixem „mailto:“ a za to až název emailu viz obrázek níže. Po uložení bude z označeného obrázku nebo textu odkaz na emailovou adresu. Pokud budete mít ve vašem PC nainstalovaného poštovního klienta, po prokliku se otevře přímo okno klienta pro psaní emailu s přednastaveným příjemcem, což bude vámi zadaná emailová adresa.
3 – Obrázek / Soubor ke stažení
V tomto případě se postupuje naprosto stejně jako při vkládání obrázku do textu viz návod na vložení výše, ale nemusíte nahrávat pouze soubory formátu obrázku, ale je možné nahrát soubory formátu například gif, jpg, jpeg, png, swf, xls, xlsx, doc, docx, csv, odb, pdf nebo mobi. Po vložení soubor se v kolonce url odkazu zobrazí cesta uloženého souboru. UPOZORŇUJEME, že maximální velikost takto vložených souboru je 5 MB! Pomocí této nabídky je možné nastavit například v textu malý obrázek, z kterého se po prokliku zobrazí velký obrázek v originální velikosti a nebo odkaz na stažení specifikace v PDF či jiném podporovaném formátu.
Kotva
Nástroj KOTVA se využívá pro upřesnění nasměrování odkazu například na konkrétní obrázek na stránce, případně na konkrétní část textu například odstavec v obsáhlém textu.
1 – Kotvu je potřeba do stránek vložit. Vyberte tedy kurzorem myši pozici, kde bude kotva uložena a použíjte nástroj Kotva.
2 – Následně se zobrazí nabídka pro zadání názvu kotvy, kam zadáte libovolný název například „kotva1“.
3 – Po zadání nazvu pak vložení potvrdíte tlačítkem Uložit a na pozici kurzoru se zobrazí malý obrázek kotvy
4 – Nyní už jen stačí na libovolnou pozici vložit textový nebo obrázkový odkaz, který Vás po prokliku přesměruje na kotvu, která může být buďto v ten tomtéž článku, v jiném článku na té samé stránce nebo v úplně jiném článku v jiné kategorii.
Samotný odkaz se tvoří pomocí nástroje Vložit / upravit odkaz, kde se vám v rolovacím menu Kotvy (1)nabídnou existující kotvy a v poli URL se automticky vygeneruje příslušná adresa viz. obrázek (2).
Pokud nyní celý článek uložíte na odkaz na vašem webu kliknete, měl by Vás odkaz přesměrovat na danou pozici/stránku, kde je kotva vložená a přímo na pozici kotvy.
Zadejte www adresu (včetně počátečního https://) nebo jméno záložky, na kterou má odkaz směrovat, případně další parametry, a potvrďte stisknutím tlačítka VLOŽIT v levém dolním rohu dialogového okna.
, který se zobrazuje za kolonkou pro url odkazu.
