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ě
, 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.
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.
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.