Textový editor TinyMCE
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.
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
Zarovná odstavec (nebo označený text) vlevo, na střed, vpravo nebo do bloku.
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.
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á.
Označený text se vystřihne (CTRL+X) resp. zkopíruje (CTRL+C). Vložit (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.
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.
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ší (posune doleva) nebo zvětší (posune doprava) odsazení označeného textu. Citace označí text kurzívou a naformátuje.
Označte text, z kterého chcete vytvořit odkaz a stiskněte tlačítko spojeného řetězu.
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. Podrobnější návod najdete níže.
Sousední tlačítko rozpojeného řetězu 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 na pozici kurzoru vloží „záložku“ se zvoleným jménem, na kterou je možné odkazovat hypertextovým odkazem. Podrobnější návod najdete níže.
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. Podrobnější návod najdete níže.
Při vkládání videa na pozici kurzoru se vloží mediální soubor (například na YouTube a pod).
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.
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 Zdrojový kód (viz výše), kde nemáte přístup do veškerého obsahu kódu, máte při vstupu do HTML módu přístup do veškerého kódu obsahu a lze tak snadno i poškodit zdrojový kód.
Můžete vybrat barevnost písma/pozadí písma z předdefinované palety, nebo nastavit požadovanou barvu pomocí RGB/HEXA kódu.
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.
Vloží na pozici kurzoru horizontální dělící čáru.
Odstraní formátování označeného textu (nastavenou velikost, font, odkaz a pod.)
Z označeného textu udělá dolní, případně horní index
Umožňuje vložit speciální symboly, jako např. písmena řecké abecedy, ©, nebo symboly pro euro, libru a mnoho jiných, aniž byste museli znát jejich klávesové zkratky.
Přepíná mezi zobrazením textového pole v původní velikosti a celou obrazovkou.
Řá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í.
Po prokliku na toto tlačítko se dostanete přímo do nabídky pro vkládání obrázku/videa. Máte zde dvě možnosti nastavení – Obecné (1) a Pokročilé (2). Vložit obrázek lze dvěma způsoby, a to buď pomocí vložení jeho 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!
Tato možnost se používá v případě, že je již obrázek uložen někde na internetu a vy znáte jeho URL adresu. Pro ukázku použiji logo vyhledávače Seznam.cz, které má URL https://www.seznam.cz/media/img/logo_v2.svg. Tuto adresu pak pouze vypíšete do kolonky pro URL odkazu nebo ji tam překopírujete.
Po uložení se obrázek zobrazí přímo v textovém editoru. Výhoda této varianty je, že obrázek není fyzicky uložen v našem 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, přestane se na vašem webu zobrazovat.
Tato možnost se využívá v případě, že obrázek chcete nahrát přímo do systému, čehož docílíte přes symbol upload (viz 3 na obrázku výše), který se zobrazuje za kolonkou pro URL odkazu.
→ Po prokliku na tlačítko vás systém přepne do souborového manažeru systému.
→ Zde v pravém horním rohu máte možnost nahrát nový obrázek z počítače:
→ Po prokliku na "nahrát" se zobrazí tlačítko „Přidat soubory“, pomocí kterého se pak zobrazí složky vašeho počítače.
→ Zde obrázek (nebo více obrázků) kurzorem myši označte, vložení potvrďte tlačítkem „Spustit nahrávání“.
→ Poté se obrázky nahrají do systému a budou viditelné přímo v okně souborového manažeru, kde je zvolíte pro vložení do textového editoru.
Využívá se 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 toto tlačítko aktivní a po prokliku se dostanete do jeho nastavení, kde můžete vytvořit odkaz na:
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 se odkaz otevře v aktuálním nebo novém okně.
E-mailovou adresu: Do kolonky URL odkazu se v tomto případě zadává e-mailová adresa s prefixem „mailto:“. Po uložení bude z označeného obrázku nebo textu odkaz na e-mailovou adresu. Pokud budete mít ve vašem PC nainstalovaného poštovního klienta, po prokliku na tento odkaz se otevře přímo okno klienta pro psaní e-mailu s přednastaveným příjemcem, což bude vámi zadaná e-mailová adresa.
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 obrázky, ale i soubory v dalších formátech, například gif, jpg, jpeg, png, swf, xls, xlsx, doc, docx, csv, odb, pdf nebo mobi. Po vložení souboru 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.
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 konkrétní odstavec.
Kotvu je potřeba do stránek vložit. Vyberte tedy kurzorem myši pozici, kde bude kotva uložena, a použijte nástroj Kotva.
Následně se zobrazí nabídka pro zadání názvu kotvy, kam zadáte libovolný název například „kotva1“.
Po zadání nazvu pak vložení potvrdíte tlačítkem Uložit a na pozici kurzoru se zobrazí malý obrázek kotvy (v případě našeho editoru symbol záložky).
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.
Pokud nyní celý článek uložíte a 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 to přímo na pozici kotvy.
Popis nejpoužívanějších funkcí/nástrojů textového editoru
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
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, vložit
Označený text se vystřihne (CTRL+X) resp. zkopíruje (CTRL+C). Vložit (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 tlačítko spojeného řetězu.
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. Podrobnější návod najdete níže.
Sousední tlačítko rozpojeného řetězu 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. Podrobnější návod najdete níže.
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. Podrobnější návod najdete níže.
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 Zdrojový kód (viz výše), kde nemáte přístup do veškerého obsahu kódu, máte při vstupu do HTML mó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
Speciální znak
Umožňuje vložit speciální symboly, jako např. písmena řecké abecedy, ©, nebo symboly pro euro, libru a mnoho jiných, aniž byste museli znát jejich klávesové zkratky.
Zobrazení na celou obrazovku
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/video
Po prokliku na toto tlačítko se dostanete přímo do nabídky pro vkládání obrázku/videa. Máte zde dvě možnosti nastavení – Obecné (1) a Pokročilé (2). Vložit obrázek lze dvěma způsoby, a to buď pomocí vložení jeho 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!
Vložení obrázku pomocí URL adresy
Tato možnost se používá v případě, že je již obrázek uložen někde na internetu a vy znáte jeho URL adresu. Pro ukázku použiji logo vyhledávače Seznam.cz, které má URL https://www.seznam.cz/media/img/logo_v2.svg. Tuto adresu pak pouze vypíšete do kolonky pro URL odkazu nebo ji tam překopírujete.
Po uložení se obrázek zobrazí přímo v textovém editoru. Výhoda této varianty je, že obrázek není fyzicky uložen v našem 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, přestane se na vašem webu zobrazovat.
Nahrání obrázku ze správce souborů
Tato možnost se využívá v případě, že obrázek chcete nahrát přímo do systému, čehož docílíte přes symbol upload (viz 3 na obrázku výše), který se zobrazuje za kolonkou pro URL odkazu.
→ Po prokliku na tlačítko vás systém přepne do souborového manažeru systému.
→ Zde v pravém horním rohu máte možnost nahrát nový obrázek z počítače:
→ Po prokliku na "nahrát" se zobrazí tlačítko „Přidat soubory“, pomocí kterého se pak zobrazí složky vašeho počítače.
→ Zde obrázek (nebo více obrázků) kurzorem myši označte, vložení potvrďte tlačítkem „Spustit nahrávání“.
→ Poté se obrázky nahrají do systému a budou viditelné přímo v okně souborového manažeru, kde je zvolíte pro vložení do textového editoru.
Vložit/upravit odkaz
Využívá se 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 toto tlačítko aktivní a po prokliku se dostanete do jeho nastavení, kde můžete vytvořit odkaz na:
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 se odkaz otevře v aktuálním nebo novém okně.
E-mailovou adresu: Do kolonky URL odkazu se v tomto případě zadává e-mailová adresa s prefixem „mailto:“. Po uložení bude z označeného obrázku nebo textu odkaz na e-mailovou adresu. Pokud budete mít ve vašem PC nainstalovaného poštovního klienta, po prokliku na tento odkaz se otevře přímo okno klienta pro psaní e-mailu s přednastaveným příjemcem, což bude vámi zadaná e-mailová adresa.
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 obrázky, ale i soubory v dalších formátech, například gif, jpg, jpeg, png, swf, xls, xlsx, doc, docx, csv, odb, pdf nebo mobi. Po vložení souboru 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 konkrétní odstavec.
Kotvu je potřeba do stránek vložit. Vyberte tedy kurzorem myši pozici, kde bude kotva uložena, a použijte nástroj Kotva.
Následně se zobrazí nabídka pro zadání názvu kotvy, kam zadáte libovolný název například „kotva1“.
Po zadání nazvu pak vložení potvrdíte tlačítkem Uložit a na pozici kurzoru se zobrazí malý obrázek kotvy (v případě našeho editoru symbol záložky).
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.
Pokud nyní celý článek uložíte a 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 to přímo na pozici kotvy.
Aktualizováno dne: 19/04/2024
Pomozte nám zlepšovat seznam dotazů i pro ostatní zákazníky. Pomohla Vám odpověď při řešení Vašeho požadavku?
Děkujeme Vám za Váš názor.