WebToDate/WYSIWYG editor/Funkce editoru podrobně

Z WebToDate
Skočit na navigaciSkočit na vyhledávání

Základní formátování textu

Základní formátování

Jednoduché formátování vybraného bloku textu se provádí pomocí horní palety pro základní formátování.

Na výběr zde máte z následujících možností:

  • Tučné písmo
  • Kurzíva
  • Podtržené písmo
  • Horní index
  • Dolní index

Dále je k dispozici paleta pro řezy písma (opět funguje na vybraný blok textu).

Úprava písma - FCKeditor
Úprava písma - FCKeditor


Úprava písma - CKEditor
Úprava písma - CKEditor

K dispozici jsou v této paletě možnosti:

  • Řez písma (font)
  • Velikost písma
  • Barva textu
  • Barva pozadí

CSS styly

Nabídka Styl může obsahovat předdefinované CSS styly. Tato funkce není ovšem omezena jen na tyto styly, nabídka může obsahovat komplexnější HTML konstrukce, které používají CSS třídy, explicitně definované CSS vlastnosti elementů či jakékoliv jiné další formátování.

Konfigurace je plně v možnostech administrátora serveru, který by měl vydat instrukce ohledně používání této nabídky.

Formátování v této nabídce se vždy aplikuje na text, který byl vybrán myší.

Formátování odstavců

Funkce pro formátování odstavců se aplikují vždy na celý odstavec. To znamená, že není třeba myší označit celý text paragrafu, ale stačí klepnout kamkoliv do paragrafu a pak zvolit z nástrojové lišty vybranou formátovací funkci.

První možnost formátování se skrývá v rozevírací nabídce Formát.

V této nabídce naleznete především možnosti formátování typu Nadpis 1Nadpis 6, dále např. formát Formátovaný (v HTML značka <pre>) apod.

Dále je v horní nástrojové liště část pro zarovnání a odsazení paragrafů.

Možné volby jsou:

  • Zmenšit odsazení
  • Zvětšit odsazení
  • Zarovnat vlevo
  • Zarovnat na střed
  • Zarovnat vpravo
  • Zarovnat do bloku

Odrážky a číslování

Pokud chcete nějaký text opatřit číslovanými nebo nečíslovanými odrážkami, vyberte tento text a použijte jednu z odpovídajících ikon v nástrojové liště.

Navíc můžete po vložení odrážek změnit jejich styl. Klepněte kamkoliv do textu formátovaného odrážkami pravým tlačítkem myši a zvolte Vlastnosti číslovaného seznamu resp. Vlastnosti odrážek.

Zobrazí se okno jako na následujícím otisku obrazovky, v tomto dialogovém okně můžete vybrat styl odrážek.

Chcete-li vytvořit víceúrovňový seznam s odrážkami, umístěte položku, která se má nacházet ve druhé úrovni nejprve do první úrovně, a pak na ní proveďte příkaz Zvětšit odsazení.

Tabulky

Nová tabulka se vkládá do textu tak, že se kurzor umístí na pozici, na kterou chceme tabulku vložit a použijeme v horní nástrojové liště tlačítko pro tabulku . Zobrazí se dialogové okno dle následujícího otisku obrazovky, kde lze specifikovat vlastnosti jako počet řádků a sloupců, ohraničení apod.

Dialog pro vložení tabulky - FCKeditor
Dialog pro vložení tabulky - FCKeditor


Dialog pro vložení tabulky - CKEditor
Dialog pro vložení tabulky - CKEditor

Po potvrzení tlačítkem OK se vloží prázdná tabulka podobně, jak je znázorněno na následujícím otisku obrazovky.

Do buněk tabulky můžete začít vpisovat texty nebo tabulku ještě dále měnit. Pokud je tabulka vybraná, objeví se v rozích tabulky čtverečky ohraničující části tabulky. Tyto čtverečky lze uchopit myší a tažením měnit velikost tabulky. Pokud toto provádíte, mění se interně definice tabulky tak, že se zapisují přímo rozměry tabulky v obrazových bodech – tento způsob je tedy vhodný v případě, že chcete pevné rozměry tabulky.

Tabulka, která plně mění rozměry podle zadávaného textu (není tedy pevně omezena na šířku a výšku) se vloží tak, že se v dialogovém okně pro novou tabulku odstraní obsah pole Šířka (pole se ponechá prázdné).

Pokud chcete změnit vlastnosti celé tabulky, klepněte na ohraničení tabulky pravým tlačítkem myši a z kontextové nabídky zvolte Vlastnosti tabulky. Zobrazí se formulář stejný jako pro vložení nové tabulky.

Chcete-li měnit vlastnosti nějakých buněk (barvu, zarovnání, sloučit buňky apod.), vyvolejte odpovídající funkci pro jednotlivé buňky. Nejprve klepněte levým tlačítkem myši dovnitř vybrané buňky a pak pravým tlačítkem vyvolejte kontextovou nabídku.

V kontextové nabídce máte možnosti vkládat řádky či sloupce a slučovat či rozdělovat buňky. Jednou z možností pod položkou nabídky Buňka je funkce Vlastnosti buňky, která vyvolá následující dialogové okno pro nastavení vlastností vybrané buňky tabulky.

Vlastnosti buňky tabulky - FCKeditor
Vlastnosti buňky tabulky - FCKeditor


Vlastnosti buňky tabulky - CKEditor
Vlastnosti buňky tabulky - CKEditor

Dialogová okna pro tabulky podporují práci s hlavičkovými buňkami tabulky (v HTML kódu <th>). K dispozici jsou následující možnosti:

  • V dialogu pro vložení či úpravy vlastností tabulky je volba Hlavičkové buňky (FCKeditor) resp. Záhlaví (CKEditor) s možnostmi Žádné (všechny buňky tabulky budou <td>), První řádek (buňky v prvním řádku tabulky budou ), První sloupec (buňky v prvním sloupci tabulky budou ), Oba (buňky v prvním řádku a prvním sloupci tabulky budou <th>).
  • V dialogu pro vlastnosti buňky je volba Typ buňky, kde lze zvolit Data (buňka je <td>) či Hlavička (buňka je <td>).

Hypertextové odkazy

Obecné odkazy

Pro vkládání a změny hypertextových odkazů v textu slouží odpovídající část horní nástrojové lišty.

Jsou zde k dispozici následující tlačítka:

  • Vložit / změnit odkaz
  • Odstranit odkaz
  • Vložit / změnit záložku

Prvním tlačítkem se vyvolává dialog pro vložení hypertextového odkazu. Vyberte nejprve text, na kterém má být odkaz umístěn, a pak použijte toto tlačítko.

V tomto dialogovém okně vyplňte především URL, v dalších záložkách pak můžete specifikovat případně další parametry (cílové okno prohlížeče apod.).

Pokud chcete změnit nějaký odkaz, stačí klepnout kamkoliv do textu s odkazem a znovu použít toto tlačítko nebo pravým tlačítkem myši v kontextové nabídce zvolit Změnit odkaz.

Odstranění existujícího odkazu se provádí tak, že se klepne kamkoliv do textu odkazu a použije se druhé tlačítko v liště nebo se z kontextové nabídky vybere Odstranit odkaz.

Záložky

V textu můžete vytvářet i záložky. Vyberte text a použijte tlačítko s kotvou. Zobrazí se dialog, ve kterém je nutno zvolit název záložky.

Záložka je WYSIWYG editorem zobrazována jako ikona přímo v textu tak, jak je zřejmé z následujícího otisku obrazovky.

Chcete-li se na tuto záložku někde v textu odkázat, použijte způsob pro vložení hypertextového odkazu popsaný výše. V dialogu pro vkládání odkazu zvolte Typ odkazu: kotva v této stránce.

Odkazy na jiné zprávy WebToDate

Speciálním případem je vložení odkazu na jinou zprávu do textu upravované zprávy. K dispozici je speciální nástroj, který usnadňuje vložení tohoto odkazu s možností vyhledání odkazované zprávy. Dialog pro vložení tohoto typu odkazy se vyvolá pomocí tlačítka pro odkaz na jinou zprávu v nástrojové liště.

Zobrazí se dialog pro vyhledávání zpráv, výběr zprávy a volbu způsobu vložení odkazu.

V horní části dialogu je formulář pro prohledávání databáze zpráv. Vyplněním formuláře a použitím tlačítka Vyhledat se zobrazí ve spodní části seznam nalezených zpráv. Klepnutím na šipku v levém sloupci tohoto seznamu se vybírá zpráva, na kterou bude vložen odkaz. Tento úkon doplní dvě pole ve spodní části dialogu:

  • URL - URL čerpané z pole Odkaz nadpisu příslušné zprávy
  • WTD tag - klíčové slovo pro jazykové verze, které zastupuje odkaz na zprávu, WebToDate pak při zobrazování upravované zprávy dosadí odpovídající odkaz na zprávu.

Použití tlačítka Vložit URL resp. Vložit WTD tag nakonec vkládá zvoleným způsobem odkaz na zprávu do textu upravované zprávy.

Další HTML značky

Tlačítko vkládá HTML značku <blockquote>.

Tlačítko vkládá HTML značku <div>. Tlačítko otevírá dialogové okno pro vložení této značky pro volbu příslušných parametrů. V konfiguraci editoru může být nastaveno, co má být náplní rozevírací nabídky Styl v tomto dialogu - jde o definici stylů editoru pro element div (konfigurace je popsána v referenční příručce WebToDate).

Obrázky

Tato kapitola pojednává o práci s obrázky, která je analogií funkce Obrázky ve WebToDate. Doporučený postup pro zpracování obrázků je práce s databází zdrojů. Zde popsaný způsob je tudíž ve WebToDate spíše důvodů zpětné kompatibility, funkci nemusíte mít v editoru (dle konfigurace WebToDate) vůbec přístupnou.

Obrázek vložíte pomocí ikony z nástrojové lišty. Zobrazí se dialog dle následujícího otisku obrazovky.

Pomocí tlačítka Vybrat na serveru můžete zvolit obrázek, který již existuje v odpovídajícím adresáři pro obrázky či v některém jeho podadresáři včetně možnosti vložit nový obrázek z lokálního disku. Dále se specifikují vlastnosti obrázku tak, jak je vidět na otisku obrazovky.

Obrázek lze pomocí myši jednoduše přetahovat na jiné místo v textu. Pravým tlačítkem myši se vyvolá kontextová nabídka, kde pomocí funkce Vlastnosti obrázku lze měnit vlastnosti vložení právě vybraného obrázku.

Operace se schránkou

Běžné operace se schránkou

Běžné operace se schránkou jsou přístupné z horní nástrojové lišty pomocí tlačítek dle následujícího otisku obrazovky.

Lze použít následující funkce:

  • Vyjmout
  • Kopírovat
  • Vložit
  • Vložit jako čistý text

Analogicky fungují klávesové zkratky tak jak je obvyklé v aplikacích MS Windows (CTRL+C, CTRL+V apod.)

Vkládání textů z dokumentů MS Word

Poslední ikonou pro práci se schránkou je funkce umožňující čištění kódu pocházejícího z aplikace MS Word. Použití tlačítka vyvolá dialog pro vkládání textu ze schránky. Nejprve v dialogu zvolte požadované čištění (zaškrtávací okénka dole) a následně vložte kód do textového pole (CTLR+V z klávesnice).

Doporučenou metodou je import dokumentů MS Word na straně serveru funkcí, která se volá z formuláře pro úpravy zpráv. Tuto funkci WYSIWYG editoru doporučujeme používat pouze na přenos menších a jednodušších dokumentů.

Vkládání tabulek MS Excel

Tabulky MS Excel vkládejte dialogem pomocí tlačítka přes schránku (CTLR+V z klávesnice). Pokud je to v konfiguraci editoru zapnuto, bude první řádek a první sloupec tabulky formátován pomocí značek <th>.

Speciální znaky

Pokud chcete vložit do textu speciální znak typu &, » apod., použijte tlačítko .

Zobrazí se následující dialog pro výběr speciálních znaků.

Klepnutím na zvolený znak se dialog zavírá a znak je vložen do textu na pozici kurzoru.

Pomocné funkce

Zdroj

Tlačítko Zdroj v levé horní části nástrojové lišty přepíná editor do zobrazení zdrojového HTML kódu editovaného textu. V tomto režimu můžete v textu rovněž provádět změny, žádná tlačítka nástrojové lišty ale nejsou aktivní. Opakovaným klepnutím na tlačítko Zdroj se editor přepíná zpět do WYSIWYG módu.

V režimu zdrojového kódu postupujte maximálně obezřetně. Zatímco ve WYSIWYG módu např. editor brání tomu, aby vznikaly nefunkční HTML značky, v textovém režimu tomu tak není a můžete zde tak způsobit nefunkčnost formátovacího kódu.

Náhled

Tlačítko Náhled otevírá v novém okně náhled editovaného textu. Nejedná se tedy o náhled celé editované zprávy, ale pouze o zobrazení textu aktuálně otevřeného v okně WYSIWYG editoru.x

Hledání a nahrazování

Editor podporuje hledání a nahrazování v textu. První z ikon slouží k hledání, druhá k možným záměnám v textu.

V rámci hledání lze kromě zadání vyhledávaného textu specifikovat, zda hledání rozlišuje malá a velká písmena a zda má vyhledávat pouze celá slova nebo jakýkoliv řetězec v textu.

V rámci nahrazování lze specifikovat podobné volby. Je možné nahradit pouze první výskyt hledaného slova (tlačítko Nahradit) nebo všechny jeho výskyty (tlačítko Nahradit vše).

Tisk

Pomocí ikony pro tisk se vyvolává přímo tisk upravovaného textu. Ikona tedy vyvolá systémový dialog pro spuštění tisku.

Další funkce

Další pomocné funkce v nástrojové liště jsou:

  • Vybrat vše - vybere celý upravovaný text
  • Odstranit formátování - odstraní vybrané HTML formátování z vybraného textu. Jaké HTML tagy a atributy se tímto příkazem odstraňují je definováno v konfiguraci editoru. Pokud není vybrán žádný text, klepnutí na toto tlačítko neznamená žádnou změnu v upravovaném obsahu.
  • Ukázat bloky - vizuálně vyznačí jednotlivé odstavce (<p>), DIV kontejnery (<div>) apod.

Formuláře

Část nástrojové lišty (která je ve výchozí konfiguraci po instalaci WebToDate přístupná pouze administrátorům) obsahuje funkce pro vkládání HTML formulářů a jejich položek.

Tyto funkce jsou:

  • Formulář
  • Zaškrtávací políčko
  • Přepínač
  • Textové pole
  • Textová oblast
  • Seznam (tj. rozevírací nabídka)
  • Tlačítko
  • Obrázkové tlačítko
  • Skryté pole

Použití každého tlačítka vyvolává dialog pro nastavení odpovídajících vlastností, pro vložené položky formuláře je rovněž vždy k dispozici kontextová nabídka pro změnu vlastností prvku či jeho odstranění. Možnosti pro tyto prvky jsou analogické jako v běžných HTML editorech.