Standardně dodáváná instalace Pub-Me CMS obsahuje WYSIWYG CKeditor. Tento editor Vám umožní psát dokumenty v rozhraní ne nepodonmém běžnému textovému editoru (např. MS Word). Funkčně je tento editor pochopitelně jednodušší než plnohodnotný textový procesor, nicméně na úpravu webových stránek bohatě stačí. Pokud Váš prohlížeč CKeditor nepodporuje, zobrazí se Vám html zdroj dokumentu a budete muset do textu vypisovat přímo html značky.
Oficiální nápověda
Editor byl upraven přímo pro potřeby redakčního systému Pub-Me CMS. Nicméně pokud máte zájem o oficiální nápovědu od tvůrců tohoto šikovného udělátka, můžete si (v angličtině) počíst na stránkách projektu.
Základy ovládání
V editoru uvidíte svůj dokument naformátovaný tak, jak bude vypadat na hotových stránkách. Pravým tlačítkem můžete vyvolat kontextovou nápovědu, která se mění podle toho, kde se v dokumentu nacházíte (jiná bude v tabulce, jiná zase nad označeným textem, obrázkem apod.)
Při psaní dokumentu můžete používat klávesové zkratky, které běžně používáte v textovém editoru (podpora záleží na použitém prohlížeči). Popis nejpoužívanejších zkratek naleznete zde (zkratky se týkají systému Windows):
- CTRL+B - tučné písmo
- CTRL+I - kurzíva
- CTRL+A - vybere celý dokument
- CTRL+C - uloží vybraný text do schránky
- CTRL+V - vloží text ze schránky do dokumentu
- ALT+S - uloží dokument (bez opuštění editace - rychlé uložení dokumentu)
Pozn.: ačkoliv je to principielně možné nepoužívejte podtržené písmo - to je na webu vyhrazené pro odkazy. Podtržený text, který není odkazem čtenáře mate.
Funkce WYSIWYG editoru
V následující tabulce se nachází popis funkcí, které můžete spouště pomocí ikon v horním panelu nástrojů.
 Zdroj |
Zobrazí zdrojový kód stránky (používejte pouze v případě, že rozumíte html kódu). |
|---|---|
 Zpět |
Vrátí poslední provedenou úpravu dokumentu. |
 Znovu |
Znovu provede úpravu vrácenou tlačítkem zpět. |
 Vyjmout |
Vyjme vybraný text a uloží jej do schránky. |
 Kopírovat |
Zkopíruje vybraný text do schránky. |
 Vložit |
Vloží text ze schránky. |
 Vložit jako čistý text |
Vloží text ze schránky. Odstraní případné formátování. |
 Vložit text z Wordu |
Vloží a přeformátuje text z Wordu do HTML. Vzhledem k tomu, že první dvě úrovně nadpisů jsou rezervované pro použití systémem, při zaškrtnuté volbě Upravit úrovně nadpisů se o 2 úrovně sníží nadpisy z původního zdroje (nejvyšší úroveň nadpisů v editoru je 3.) |
 Hledat |
Vyhledá v textu zadaný řetězec |
 Nahradit |
Nahradí zadaný řetězec řetězcem novým |
 Vybrat vše |
Vybere celý dokument |
 Odstranit formátování |
Odstraní html formátování z vybraného textu. |
 Vložit vodorovnou linku |
Vloží vodorovnou čáru (hr) |
 Vložit speciální znaky |
Otevře tabulku pro vložení speciálních znaků jako např.ð |
 Celá obrazovka |
Přepne zobrazení editoru do celoobrazovkového módu. |
 Náhled |
Zobrazí náhled právě editovaného dokumentu. |
 O aplikaci CKeditor |
Zobrazí informace o aplikaci CKeditor |
 Formát |
Otevře se seznam s možnostmi formátování odstavců (odstavec, nadpisy, formátovaný, adresa...) |
 Styl |
Otevře seznam s možnostmi stylů. Seznam se aktualizuje podle typu vybraného obsahu. Používá se mimo jiné k formátování obtékaných obrázků (vyberete obrázek a v seznamu dostupných stylů přiřadíte patřičné obtékání). |
 Zarovnat nalevo |
Aktivní odstavec zarovná vlevo |
 Zarovnat na střed |
Aktivní odstavec zarovná na střed |
 Zarovnat napravo |
Aktivní odstavec zarovná vpravo |
 Zarovnat do bloku |
Aktivní odstavec zarovná do bloku |
 Tučné |
Tučné písmo |
 Kurzíva |
Kurzíva (skloněné písmo) |
 Přeškrtnout |
Přeškrtnuté písmo (používejte pro text, který již není aktuální a změnil se, ale chcete, aby čtenáři věděli, jaký původní text byl) |
 Dolní index |
Dolní index |
 Horní index |
Horní index |
 Číslovaný seznam |
Vloží/odstraní číslovaný seznam. Na konci seznamu odřádkujte a stiskněte Backspace - čislování se přeruší a přejdete na běžný odstavec. |
 Vložit/odstranit odrážky |
Vloží/odstraní odrážky (nečíslovaný seznam). Na konci seznamu odřádkujte a stiskněte Backspace - seznam se přeruší a přejdete na běžný odstavec. |
 Zmenšit odsazení |
Zmenší odsazení vybraného obsahu. V případě, že je tato volba použita u seznamů, je vybraný obsah odsazen do vyšší úrovně. |
 Zvětšit odsazení |
Zvětší odsazení vybraného obsahu. V případě, že je tato volba použita u seznamů, je vybraný obsah odsazen do další úrovně. |
 Citace |
Vloží citaci (a zformátuje ji dle nastavených stylů) |
 Div kontejner |
Vloží Div kontejner |
 Vložit/změnit odkaz |
Vloží/upraví odkaz (podrobněji viz níže) |
 Odstranit odkaz |
Odstraní aktivní odkaz |
 Vložit/změnit obrázek |
Vloží/upraví obrázek (podrobněji viz níže) |
 Vložit/změnit flash |
Vloží/upraví flash) |
 Vložit/změnit tabulku |
Vloží/upraví tabluku (podrobněi viz níže) |
Odkazy
Po otevření okna pro editaci odkazů můžete mj. zvolit protokol. Kromě standardních protokolů, jako je http://, https://, ftp:// atd., můžete zvolit i speciální protokoly, které slouží pro interní potřeby systému (používejte tyto pseudoprotokoly namísto pevných adres - umožníte tím přenos systému na jinou adresu bez ztráty funkčnosti). Jednotlivými speciálními protokoly jsou:
- Dokument Pub-Me - umožní vložit odkaz na dokument v systému Pub-Me CMS (odkaz lze vložit pomocí z zvláštního okna se strukturou dokumentů)
- Soubor ke stažení - vloží soubor ke stažení. Odkazu lze přiřadit třídu stylu (na kartě rozšířené), pomocí níž se vedle odkazu zobrazí ikona symbolizující typ patřičného dokumentu. Momentálně podporované třídy jsou: file, doc, rtf, xls, ppt, pps, pdf, txt, html, htm, psd, arj, zip, gzip, rar, jpg, jpeg, gif, png, bmp, js, chm, hlp, mpg, mpeg, mp3, wav, rss, atom, php a css.
- Obrázek - odkaz na obrázek v systému (adresář img)
Na kartě Cíl můžete zvolit otevření odkazu do nového okna (je ošetřena kompatibilita s xhtml). Karta Rozšířené obsahuje podrobnější nastavení parametrů odkazů. Tato nastavení (kromě výše zmíněné třídy stylu) by měli používat pouze zkušenější uživatelé, kteří vědí, co tato nastavení znamenají v html kódu.
Obrázky
V nastavení obrázku můžete používat rovněž rozšířené volby, nicméně v praxi budete většinou potřebovat pouze následující nastavení:
- URL (adresa obrázku) - pomocí tlačítka Vybrat ze serveru si vyberet požadovaný obrázek
- Alternativní text - Text, který se zobrazí místo obrázku před jeho načtením (popř. se přečte na speciálních zařízeních pro zrakově postižené; nezapomeňte jej vkládat - tento text je také registrován vyhledávači, které na základě něj odkazují na vaše sránky)
- Rozměry - upravují se automaticky, ručně je budete muset upravovat, pouze v případě, že změníte soubor s obrázkem, aniž byste jej znovu načetli ze serveru
- Na kartě Odkaz můžete zvolit cílovou adresu, na kterou se čtenář dostane po kliknutí na obrázek.
Plovoucí obrázky
Poté co standardním způsobem vložíte obrázek, můžete z něj udělat obrázek plovoucí na pravé nebo levé straně stránky. Text jej bude obtékat. Klikněte na obrázek v editačním okně a zvolte styl "Image on Right" (pro obrázek na pravé straně), nebo "Image on Left" (obrázek vlevo).
Tabulky
Do dokumentů můžete vkládat rovněž tabulky. Kliknete-li na tabulku pravým tlačítkem zobrazí se vám kontextová nápověda, pomocí niž můžete přidávat či mazat řádky a sloupce, editovat nastavení jednotlivých buňek, seskupovat buňky atd.
Rozdíly v chování CKeditoru oproti jeho základní instalaci
Pokud jste se již někdy s CKeditorem setkali, můžete se bez obav pustit do práce. Pro úplnost je zde uveden seznam některých úprav, kterými editor prošel při adaptaci pro redakční systém Pub-Me CMS (jedná se spíše o informaci pro administrátory ovládající xhtml a css, proto, pokud do této kategorie nespadáte, můžete s klidem v duši přestat číst, aniž byste o něco přišli):
- editor byl provázán na správce souborů a dokumentů Pub-Me
- byla upravena utilita pro vkládání Wordovských dokumentů - výsledný kód by měl být nyní opravdu použitelný pro webové stránky. Inteligentně jsou upraveny i úrovně nadpisů.
- byly odstraněny některé funkce, které znemožňují generování validního a sémanticky čistého kódu - např. volby barev, fonty, velikosti písma atd. Případné požadavky na rozšířené možnosti formátování byste měli konzultovat s html/css kodérem. Na úkor možnosti rozletu redaktora tím je dosaženo konzistentího vzhledu stránek. Speciální požadavky na zvláštní velikost či barvu písma apod. řešte pomocí definice nových stylů.
- kód vygenerovaný systémem je téměř čisté xhtml. Nicméně ne zcela 100%. Při ukládání dokumentu prochází kód ještě dalším zpracováním.
- tag font je z kódu nasilně odstraněn, i pokud jej tam ručně vložíte
- je opraveno možné nesprávné "zapouzdření" seznamů. Z konců odstavců jsou odstraněny tagy br, které tam občas vloží editor běžící na gecku.
- pokud se tabulka omylem vloží do odstavce, je tento odstavec odstraněn a zůstane pouze čistá tabulka
- plovoucí obrázky jsou na výsledné stránce ještě obaleny několika tagy span z důvodů možnosti formátování (překrytí obrázků rámečkem, stín obrázku apod.)