Textový editor

Vlastní text článku píšeme v textovém editoru. Editor funguje podobně jako textový procesor — píšeme běžný text a tlačítky na liště mu dodáváme formátování, vkládáme obrázky, odkazy, tabulky a další prvky. Na rozdíl od klasického editoru je ale uzpůsobený webu: většina prvků rovnou vkládá připravené Bootstrap komponenty, aby výsledek ladil se vzhledem webu.

Kde editor najdeme

Editor je součástí detailu článku — otevřeme článek k úpravě a zůstaneme na výchozí záložce Obsah článku. Nad plochou pro psaní je nabídka (menu) a pod ní lišta nástrojů (toolbar) s tlačítky.

Horní nabídka

Nad lištou je klasická nabídka, která obsahuje i méně časté příkazy: Soubor (nový dokument), Úpravy (zpět/znovu, vyjmout/kopírovat/vložit, hledat a nahradit), Zobrazit (zdrojový kód, náhled, celá obrazovka), Vložit (vkládané prvky), Formát (formátování včetně nadpisů, písma, řádkování a odstranění formátování) a Nástroje. Poslední dvě nabídky Bootstrap a Fenomio sdružují tytéž speciální nástroje jako stejnojmenné skupiny na liště.

Lišta nástrojů

Lišta je rozdělená do skupin oddělených svislými čárami. Zleva doprava obsahuje:

  • Zpět / Znovu — vrácení a opakování posledních úprav.
  • Tučně1687934a3801429b96a95bac2fcb6f55.png, kurzíva, podtržení — základní formátování písma.
  • Zarovnání — doleva, na střed, doprava, do bloku.
  • Odrážky a číslování — seznamy, včetně zvětšení a zmenšení odsazení.
  • Barva písma a barva pozadí textu.
  • Obrázek, odkaz, kotva — vložení obrázku, odkazu a kotvy (cíle pro odkazování v rámci stránky).
  • Speciální znak, emotikona, ikona FontAwesome, vodorovná čára, pevná mezera.
  • skupina Bootstrap nástrojů (verze, tabulka, sloupce, panel, vlastní třídy) — viz níže,
  • skupina Fenomio nástrojů (galerie, YouTube, dynamické položky) — viz níže,
  • Čištění obsahu z Wordu a Zdrojový kód.

Vkládání obrázků

Obrázek vložíme tlačítkem Obrázek. Můžeme buď zadat adresu, nebo přes ikonu otevřít Správce souborů Fenomio a obrázek vybrat či nahrát do složky článku. Obrázek jde do textu i jednoduše přetáhnout, případně vložit ze schránky.

Po kliknutí na už vložený obrázek se u něj objeví malá kontextová lišta se dvěma nástroji:

  • Bootstrap Obrázek — nastaví obrázku připravené třídy (responzivní velikost, obtékání zleva/zprava), případně vlastní CSS třídu.
  • Fenomio Image Editor — otevře editor obrázků pro ořez a úpravy.

Odkazy

Odkaz vytvoříme tlačítkem Odkaz. Po kliknutí na existující odkaz se objeví kontextová lišta s nástrojem Bootstrap Odkaz, kterým z odkazu uděláme tlačítko v některém z bootstrapových stylů (barva, velikost).

Bootstrap nástroje

Tato skupina vkládá hotové stavební prvky webu:

  • Bootstrap Tabulka — vloží tabulku; nabízí prázdnou tabulku, import z Excelu i volbu stylu. Po kliknutí do tabulky máme navíc kontextovou lištu pro práci s řádky, sloupci a buňkami.
  • Bootstrap Sloupce — rozdělí obsah do sloupců (na poloviny, třetiny, čtvrtiny…).
  • Bootstrap Panel — vloží zvýrazněný panel / kartu v barevných variantách (primary, info, warning, success, danger…).
  • Vlastní CSS třídy — přiřadí označenému prvku libovolnou vlastní třídu.

První tlačítko skupiny přepíná verzi Bootstrapu (3 nebo 5), se kterou editor pracuje; aktivní verzi ukazuje přímo ikona.

Verzi Bootstrapu volíme podle toho, na jaké verzi stojí náš web — při pochybnostech se řídíme tím, co používají naše šablony, nebo se domluvíme s vývojářem. Přepnutí znovu načte editor.

Fenomio nástroje

Skupina Fenomio vkládá dynamické prvky, které se naplní obsahem až při zobrazení stránky na webu:

  • Fenomio galerie — vloží fotogalerii; vybíráme z existujících galerií, nebo rovnou založíme novou.
  • YouTube video — vloží přehrávač videa z YouTube.
  • Dynamické položky Fenomio — vloží připravený dynamický prvek (token), např. formulář nebo jiný blok definovaný v systému.

Tyto prvky se v editoru nezobrazují jako hotový obsah, ale jako barevný štítek s názvem (a případnými parametry). Po kliknutí na štítek se objeví lištička s tlačítky Upravit a Smazat.

Vkládání textu z Wordu

Když do editoru vložíme text zkopírovaný z Wordu, přinese si s sebou spoustu skrytého formátování, které kazí vzhled na webu. Proto máme tlačítko Čištění obsahu z Wordu: odstraní wordovské styly a prázdné odstavce, převede „falešné“ seznamy na skutečné odrážky a zachová Fenomio prvky. V jeho nabídce navíc volíme, jak se má obsah čistit automaticky rovnou při vložení, a před potvrzením si můžeme zobrazit náhled před/po.

Text z Wordu doporučujeme vždy nechat vyčistit — jinak se do stránky dostane balast, který se může na webu projevit rozbitým vzhledem.

Zdrojový kód a náhled

Tlačítkem Zdrojový kód (a též přes nabídku Zobrazit) otevřeme okno se surovým HTML obsahu — hodí se, když potřebujeme zasáhnout do kódu ručně. V nabídce Zobrazit najdeme i Náhled a přepnutí do celé obrazovky.

Úpravy přímo ve zdrojovém kódu dělejme jen tehdy, když HTML rozumíme — snadno se jím vzhled rozbije. Běžně vystačíme s tlačítky na liště.
Změny v editoru se do článku uloží teprve tlačítkem Uložit (nebo Uložit a zavřít) v záhlaví detailu — samotné psaní v editoru článek neukládá.