Rich text editory ÚVOD - PŘEDMLUVA ÚVOD - RTE A WYSIWYG. Jan Pražma

Transkript

1 Jan Pražma ÚVOD - PŘEDMLUVA Rich text editory Internet v posledních letech prošel bouřlivým vývojem a je o něj čím dál větší zájem. Představa moderního webu, i díky novým technologiím přinášejícím možnosti nad rámec HTML, se dnes značně liší od představy před několika lety. Forma dnes bohužel velmi často vítězí nad obsahem a v tvrdém konkurenčním boji lépe obstojí líbivé stránky, s množstvím grafického pozlátka. Na tvorbě webu se dnes velmi často podílí i samotní uživatelé a věci jako smajlící, barevné písmo a vkládání obrázků jsou dnes neoddiskutovatelným standardem. Rich-text editory nám podávají pomocnou ruku, jak rychle a online vytvořit takovýto moderní web - ať už jsme uživatel, nebo webmaster. ÚVOD - RTE A WYSIWYG Rich-text editor (dále jen RTE) je nástroj, který má uživateli usnadnit vkládání a editování on-line obsahu - převážně textu. V dnešních provedeních se zpravidla jedná o programy, které uživateli poskytnou funkce jakými jsou: změna formátování/barvy písma, podporu vkládání textu z MS Word, vkládání obrázků, jednoduché vytváření HTML tagů apod. Nějaká forma RTE (malé okénko pro vkládání příspěvku, většinou vypadá jako MS Word) se dnes nachází téměř na každém moderním diskusním fóru, v každém dobrém redakčním systému a systému správy obsahu vůbec. Protože koncept RTE není nikterak nový, objevilo se během let několik různých přístupů k realizaci RTE. Pojem RTE je velmi často zmiňován s pojmem WYSIWYG (z anglického What You See Is What You Get). V dnešní době tyto pojmy splývají, protože drtivá většina moderních RTE je zároveň WYSIWYG. Nicméně u WYSIWYG editorů očekáváme, že v průběhu práce s daty vždy vidíme skutečnou podobu a formát dat takovou, jaká se ve výsledku objeví na našem webu. RTE obecně tedy pouze poskytuje uživateli nástroje, jak obohatit práci se surovým textem o další vizuální a formátovací prvky, ale v průběhu práce probíhá samotná editace pomocí značek/tagů (čehokoliv), které nakonec nebudou prezentovány ve výsledném dokumentu. Výhoda WYSIWYG editorů spočívá v tom, že okamžitě vidíme výsledek naší práce, pracujeme rychleji, efektivněji a bez nutnosti ovládat nějakou formu značkovacího jazyka (ať už HTML samotné nebo nějakou jinou formu u čistě RTE editorů). Nevýhodné může být, že nemáme přímo v rukou kontrolu nad tvarem a formou obsahu, který uživatelé vkládají na naše stránky. Kód nemusí být validní a musíme se připravit na to, že čím více síly dáme do rukou uživatelům, tím větší mohou nadělat nepořádek. Spektrum využití RTE je poměrně široké, a tudíž i škála uživatelů, kterým může koncept RTE něco nabídnout je mnoho: webmasteři, redaktoři, prostí uživatelé (přispěvovatelé). Očekávaným standardem je možnost omezit si množinu funkcí nabízených RTE na nezbytné minimum, které dané skupině uživatelů nabídneme. Webmasterovi můžeme s klidným svědomím zpřístupnit celou paletu funkcí, kdežto poskytnout stejný přepych široké veřejnosti nemusí být dobrým krokem.

2 PŘÍSTUP ČISTÉ HTML Způsobů jak implementovat RTE je mnoho. Dá se říct, že každá pokročilejší technologie nad HTML má způsob jakým v ní provést RTE. Ovšem ne všechny možnosti jsou stejně dobré (a používané). Asi nejstarší/nejjednodušší přístup se zabývá využitím HTML tagů <input/> a <textarea/>. Tyto tagy slouží jako prostor pro uživatelský vstup. Samotné značky textarea a input samozřejmě neposkytují žádné speciální formátovací možnosti a proto je třeba je do nich nějakým způsobem přidat. Nabízí se možnost dovolit uživateli vkládat přímo HTML kód. Při použití pro širší veřejnost však vzniká množství rizik, počínaje drobnostmi typu porušení dobrého uzávorkování až po vkládání záškodnických skriptů, navíc mohou být některé značky pro uživatele značně nepohodlné pro psaní ( - stylování odstavců, odkazy ). Častým řešením tak je nadefinovat si vlastní množinu formátovacích znaků. Uživatel napíše text s patřičnými formátovacími tagy a pošle ho na server. Ten znaky rozparsuje a text zformátuje dle zadaných požadavků. Toto řešení tedy zahrnuje vytvoření vlastního parseru (obtížnost závisí na komplexnosti zvoleného jazyka našich tagů mohou se do sebe vnořovat? apod.) a definici potřebných tagů. Výhody: - Maximální kompatibilita - Minimální náročnost (všechnu těžkou práci odvede server). - Bezpečnost snadno zajistitelná. - Snadná realizace pokročilejších služeb v závislosti na cílové skupině uživatelů (někdo ocení nabídku 200 poskakujících smajlíků, jiní uživatelé dají přednost tagům pro chytré psaní matematických vzorců). - Separovanost od zobrazovacího jazyka změna designu stránek, přechod na XML/XSLT, generování PDF - Pomocí skriptovacího jazyka na straně klienta je možné RTE velmi zpříjemnit a přitom na skriptovací jazyk nespoléhat. - Vkládání tagů není moc uživatelsky přívětivé. - Pokud zůstaneme u čistého html, tak uživatel nevidí finální podobu, dokud neodešle svůj vstup na server. Závěr: - Vhodné tam, kde si nemůžu dovolit omezit kompatibilitu. - Implementačně snadné. - Nejpoužívanější současné řešení pro neomezené cílové skupiny uživatelů (není podloženo statistikou, osobní názor). PŘÍSTUP ČISTÝ JAVASCRIPT Javascript sám nám poskytuje dostatek prostředků pro vytvoření RTE/WYSIWYG. Je však třeba začít téměř na zeleném drnu (nebo využít nějakou UI knihovnu) a napsat si vše včetně blikajícího kurzoru v textu. Hlavní příčinou je omezené množství událostí, které mohou různé elementy přijímat a výrazné rozdíly v chování prohlížečů (a to i na jemných rozdílech ve verzích IE 5.0 vs IE 5.5).

3 Výhody: - Teoreticky kompatibilní všude, kde je JavaScript v námi definované úrovni. - Na starších prohlížečích (a počítačích) může mít toto řešení znatelné problémy s odezvou. - Netriviální vytváření více instancí RTE v jednom okně. Závěr: - Používáno velmi řídce a většinou osekané jen na několik formátovacích možností. - Nenašel jsem žádnou implementaci, která by fungovala na rozumném množství prohlížečů. PŘÍSTUP FLASH Flash přináší dynamické prostředí, ve kterém se snadno vytvářejí líbivé efekty a vytvoření RTE, umožňujícího základní formátování textu, je nenáročné. Na druhou stranu napsat ve Flashi WYSIWYG, který by umožňoval např. pokročilejší CSS polohování už by vyžadovalo implementovat ve Flashi nějakou podmnožinu renderovacího jádra, což vzhledem ke koncepci Flashe přestává být smysluplné a efektivní. Výhody: - Uživatelsky příjemné a bohaté dynamické prostředí. - Není třeba řešit kompatibilitu nad prohlížeči (tedy alespoň v rámci použití běžných prohlížečů, třeba na mobilech bývají nějaké odlehčené Flash Playery) - Vyžaduje Flash Player, což občas není průchozí (centrálně administrované počítače ve firmách/institucích) - Nepodporuje clipboard (schránku) - Flash není žádný výpočetní rychlík, je na to třeba brát ohled při bindování událostí na uživatelské vstupy (stisk klávesy ) Závěr: - Pokud už Flash používám v nějaké kritické části webové prezentace (navigace, obsah ), pak mne RTE ve Flashi více neomezí. V opačném případě záleží na cílové skupině. - Pokročilé formátování je z principu omezené (Flash si musí všechno nakreslit sám). PŘÍSTUP JAVA (applety) Java je seriozní programovací jazyk a jako takový nabízí ze současných možností nejlepší WYSIWYG editory z hlediska šíře formátovacích úprav. Jinými slovy v javovských

4 WYSIWYG editorech lze bez přílišných kompromisů navrhovat celé webové prezentace. Tradičním neduhem Javy je pomalejší GUI, což se promítá i do JavaAppletů, odezva je však stále o úroveň výše než Flash. Výhody: - WYSIWYG na úrovni (de facto lze do Appletu přenést v odlehčené podobě zadarmo celé vývojové prostředí pro web, vycházející třeba z eclipse ) - Nezávislé na platformě - Opět jako v případě Flashe je potřeba mít stažený interpret bytekódu JRE. - GUI pomalejší než u nativní aplikace (na poměry webových technologií ale zatím výborné). - Většinou poměrně objemné. Závěr: - RTE v Javě bývají propracované, robustní, datově náročné a povětšinou komerční. Využití bych viděl hlavně na intranetech, kde přenos pár dat navíc nehraje roli a lze zužitkovat koncepci jednotné technologie (webmaster navrhuje webové prezentace v Javovském prostředí, tvůrci obsahu pracují z libovolné platformy prostřednictvím appletů vše nad stejným frameworkem). - RTE odlehčený jen na omezenou množinu formátování pro širší veřejnost by v podobě appletu také mohl přinášet výhody jednotného přístupu ke zprávě zdrojů pro webové prezentace, ale zůstává tu stále strašák kompatibility (a v komerční sféře je těžké říci my nechceme zákazníky, kteří mají předpotopní prohlížeč ). PŘÍSTUP - PODPORA ZE STRANY PROHLÍŽEČŮ Autoři prohlížečů si začali uvědomovat, že podpora online rich-text editace je krok dobrým směrem. Dnes podporují rich-text editaci všechny používanější internetové prohlížeče a velká většina implementací RTE toto využívá. Prohlížeče podporují RTE oficiálně od těchto verzí: IE 5.5 Firefox 1.5 Opera 9.0 Netscape 7.0 Safari 1.3 Prohlížeče nám dávají k dispozici rozhraní, přes které lze rich-text editaci provádět. Funguje to tak, že nějaký element (nebo rovnou celá stránka) je označen jako RT editovatelný a v tomto elementu je pak možno přímo za běhu provádět editaci (a cokoliv s tím spojené, například funkci undo ). Některé prohlížeče, jako například Opera, jdou ještě dál a umožňují RTE provézt přímo uživateli stránek, aniž by bylo nutné RTE nějak programovat (např. v Opeře jsou to klávesové zkratky ctrl+b, ctrl+i a ctrl+u pro tučné písmo, kurzívu a podtržené písmo).

5 RTE rozhraní prohlížeče je dostupné přes atributy designmode a contenteditable. Toto řešení spočívá v tom, že prohlížeč si sám implementuje úpravu HTML, což je rychlejší než přes skriptovací jazyk. Prohlížeč dává k dispozici rozhraní několika metod, které lze použít na element označený jako contenteditable (buď přímo provádějí úpravu dokumentu, nebo jsou to pomocné get-metody) zde je náhled na čtyři z nich: Metoda execcommand - Provede příkaz na aktuálním dokumentu, výběru nebo na zadaném rozsahu. Metoda querycommandenabled - Vrátí boolean indikující, zda lze provézt specifikovaný příkaz použitím execcommand na daný stav dokumentu. Metoda querycommandstate - Vrátí boolean indikující, zda byl daný příkaz na objektu již proveden. Metoda querycommandvalue - Vrátí variant reprezentující hodnotu daného příkazu (např. aktuální velikost písma označeného textu). Vrací false, pokud příkaz nemá definovány žádné rozumné hodnoty/stavy. Všechny metody mají povinný argument scommand (String), který specifikuje konkrétní příkaz. Příkazů je opravdu přehršel, například: AbsolutePosition - Nastaví pozici (vlastnost position ) elementu na absolute". BackColor - Nastaví nebo získá barvu pozadí aktuálního výběru. Bold - Přepíná na aktuálním výběru mezi tučným a normálním písmem. Copy - Zkopíruje výběr do schránky. SaveAs - Uloží aktuální stránku do souboru. Undo - Vrátí zpět poslední provedenou změnu. Unselect - Odznačí aktuální výběr. Metoda execcommand je ještě trochu složitější u některých příkazů je třeba specifikovat další informaci, jako velikost písma, apod. Zájemce odkážu na webové zdroje. Pěkně zdokumentováno je to třeba v Microsoftím MSDN (viz odkazy).

6 A jak se to používá? Vlastnost contenteditable lze použít na libovolný HTML element - obvykle je to div nebo iframe. Atribut document.designmode (= on / off ) se vztahuje k celému dokumentu. Provádět rich-text editaci je tedy možno na elementu, který je označen jako contenteditable a nebo rovnou na celém dokumentu. Dle specifikace by tedy document.body.contenteditable = true mělo mít stejný efekt jako document.designmode = on (většinou to tak opravdu je, ale nemůžeme se na to stoprocentně spoléhat). Zavoláním metody execcommand( parametr ) provedeme (na označeném textu) patřičnou úpravu, jejíž typ je specifikován parametrem. <button onclick="document.execcommand('bold',null,null);"> <strong>b</strong> </button> <div contenteditable="true"> Obsah k editaci. </div> Kód 1: Jednoduchá ukázka použití document.contenteditable. Zmáčknutím tlačítka změníme v označené části písmo na tučné ( a zpět). Dnešní implementace typicky fungují tak, že v hlavním okně dokumentu je umístěna textarea, do které se zapisuje čistý HTML kód. Nad textarea je umístěn element iframe tak, že celý zakrývá textarea. A konečně v iframe je načtena nová stránka přepnutá do design módu. Ve výsledku tedy v iframe vidíme to, co se nakonec zobrazí na stránce a s tímto obsahem ve stylu WYSIWYG pracujeme. Do textarea se píše aktuální kód toho co jsme napsali (který už nevidíme). Protože se contenteditable i designmode chovají na každém prohlížeči trošku jinak, je zdrojový kód těchto RTE plný různých výjimek či hacků pro konkrétní prohlížeče. Back-end obvykle bývá umístěn na serveru, což je výhodné, protože z objemného zdrojového kódu se k uživateli dostane jen malá, na míru ušitá, část určená pro jeho prohlížeč. Výhody: - Prohlížeče odvedou spoustu práce za nás. - Podporováno všemi současnými standardními prohlížeči. - Formátovací příkazy zvládá prohlížeč. - Výborná odezva. - Kompatibilita je sice velká, ale stále není stoprocentní. Na alternativních a/nebo starých prohlížečích narazíme na problémy. - Bohužel, některé implementační detaily se prohlížeč od prohlížeče liší. Ačkoliv se zdá, že se situace zlepšuje, existuje stále řada rozdílů, na které musím při implementaci brát zřetel. Takže se nevyhneme našití implementace na konkrétní typ prohlížeče. Například Firefox donedávna neuměl řádně přepnout stránku do designmode (uměl, ale dělal to jinak než ostatní prohlížeče - od verze 3.0 už to dělá stejně). - Nebezpečná může být práce se schránkou. V některých prohlížečích je možné vysát obsah schránky bez vědomí uživatele, což může být potenciálně nebezpečné. Slušnější prohlížeče zobrazí uživateli varování, že

7 Závěr: se stránka chystá načíst obsah schránky (momentálně na to ale nelze spoléhat). - Dnes se jedná o nejpoužívanější řešení pro - Při implementaci máme ušetřenou práci se samotnou editací, musíme ale bohužel stále řešit rozdíly mezi prohlížeči. Odkazy: - Dokumentace metody execcommand: - Seznam příkazů (scommand): - Šikovný přehled funkčnosti jednotlivých příkazů v závislosti na typu prohlížeče: ZMÍNKA O KVALITNÍCH RTE Nyní uvedu několik konkrétních implementací RTE. Vybral jsem pouze zajímavé (používané) implementace. Všechny využívají poslední zmíněný přístup podporu ze strany prohlížečů. Obsáhlý a relativně aktualizovaný seznam (nikoliv však kompletní) lze najít na adrese: XSTANDARD (http://xstandard.com/) Xstandard je dostupný jak v komerční verzi, tak ve verzi Lite zcela zdarma. Ve své plné komerční podobě se jedná o kvalitní rich-text editor. Pracuje interně na bázi XML struktury a generuje tak naprosto čistý a validní XHTML kód. Veškerá konfigurace editoru se děje pomocí XML souborů a editor je tak možno libovolně přizpůsobit požadavkům redakčního systému. Umožňuje rovněž přímé kopírování textu z Wordu a Excelu s tím, že text je pročištěn a upraven jako validní XML a obrázky jsou zcela automaticky nahrány na server. Bez zajímavosti není ani integrovaný spell-checker, včetně návrhů možných oprav slov. Bohužel, lite verze neobsahuje zmíněný spell-checker, správce obrázků a řadu dalších věcí. FCK (http://www.fckeditor.net/) Další editor, o kterém se zmíním je FCKeditor. Nabízí jednoduché prostředí připomínající vzhled staršího Wordu nebo jakéhokoli textového editoru. Na webu jej zprovozníte za pár minut. Aktuální verze již fungují ve všech běžně používaných webových prohlížečích. Jeho nastavení je bezproblémové, velmi dobře se mění jeho chování pomocí konfiguračních souborů, nabízí několik motivů vzhledu a nabízí rychlé přepínání mezi vizuálním a HTML režimem. Podporuje formátování pomocí CSS, jeho výstup je validní

8 XHTML, dovede automaticky zjistit vkládání textu z Wordu (nebo jiného richtext editoru), obsahuje správce souborů pro snadný výběr obrázků a jiného vkládaného obsahu. Dovede pracovat s tabulkami, formuláři atd. Jediný možný problém, který ale může být natolik nepříjemný, že donutí uživatele změnit FCKeditor, je nešikovné vkládání textu z programu MS Word. FCKeditor při takovém importu neodstraňuje formátovací znaky HTML a v kombinaci s nastavením velikosti písma znemožní aplikovat styly se vzhledem, které máte pro web připravený. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="cache-control" content="private" /> <meta content="cs" http-equiv="content-language" /> <title>test</title> </head> <body> <form action="fcktest.php" method="post"> <?php include_once("fckeditor/fckeditor.php"); $ofckeditor = new FCKeditor("data"); $ofckeditor->basepath = '/prez/fckeditor/'; $ofckeditor->value = (isset($_post['data'])?$_post['data']:""); $ofckeditor->height = '500'; $ofckeditor->create();?> <input type="submit" value="odeslat"/> </form> </body> Kód 2: Ukázka zavedení FCK editoru. TINYMCE (http://tinymce.moxiecode.com/) Vizuální editor TinyMCE je šířen sice pod trošku jinou licencí, než FCKeditor, nicméně i tak je zdarma. Nabízí množství témat a zásuvných modulů. Když jsem tuto jeho vlastnost zkoumal podrobněji, byl jsem docela překvapen, jaké různé doplňkové moduly lze pro TinyMCE najít. Opět, stejně jako v případě FCKeditoru, se nabízí XHTML výstup, podpora různých jazyků i fungování v různých prohlížečích (Safari momentálně experimentálně). Naproti FCK umí lépe zacházet z textem voženým z MS Word. Na druhou stranu, TinyMCE má problémy s uploadováním souborů a se správou obrázků. Na tyto funkce existují vytvořené přídavné moduly, ale všechny jsou zpoplatněné. YAHOO RTE (http://developer.yahoo.com/yui/editor/) Yahoo RTE vychází z YUI knihovny (Yahoo UI library). Jedná se o javascriptovou knihovnu podobnou jquery, doplněnou o nepřeberné množství zlepšovátek a grafických přídavků. Tento RTE není příliš rozšířen a je určen pro zkušenější uživatele. Uživatel si v podstatě může naskládat funkční prvky na svojí stránku dle potřeby. Vývojáři z Yahoo

9 kladou velký důraz na rozšiřitelnost jejich RTE. Tento RTE je momentálně v usilovném vývoji.