Richtext editory. Filip Dvořák

Transkript

1 Richtext editory Filip Dvořák

2 Průběh referátu Popis problému Přehled přístupů k řešení Od jednoduššího ke složitějšímu Zajímavé implementace FCKEditor Výhody, integrace, aktualizace, bezpečnost Zdroje

3 Popis problému I. Jak odeslat textová data z webového prohlížeče na server tak, aby: Uživateli byla poskytnuta možnost snadno obohatit textová data o formátování Na serveru bylo možné data jednoduše ošetřit pro jejich další použití

4 Popis problému II. Formátování (typografie + html) Tučné, kurzíva, podtržené, Barva, font, velikost písma Odřádkování, odstavce, odrážky, styly, tvrdé mezery (!) Odkazy (reference, url) Obrázky, smajlíci mnoho dalších

5 Popis problému III. K čemu se hodí RTE Obohacení stránek o reflexe uživatelů Diskuzní fóra, kniha návštěv, shoutboard, Plnění stránek obsahem Články, blogy Vlastní tvorba šablonového webu Wysiwyg Webmail Ve všech případech vzniká potřeba formátování vstupu

6 Jak na RTE Analýza Kdo spadá do cílové skupiny uživatelů RTE Webmaster, redaktoři, registrovaní uživatelé, široká veřejnost Volba množin formátování, které budou různé cílové skupiny moci používat

7 Jak na RTE 1. Vždy máme k dispozici <input/>, <textarea/> Ale text v nich bude jen textem bez formátu Můžeme použít vlastní tagy pro formátování a na serveru si je přepsat Např. [b]ahoj[/b] ~ <strong class= bold_std >Ahoj</strong> ~ Ahoj Proč nepoužít rovnou html tagy? Bezpečnost, separabilita, jednoduchost

8 Jak na RTE 1. A jak to na serveru přepsat? V případě povolení složitějšího vnořování tagů si napsat vlastní parser (zdroj inspirace: opensource diskuzní fóra) Použitím regulárních výrazů, v jejich silnější (rekurzivní) verzi lze ošetřovat i vnoření Odstranit potenciálně nebezpečný kód (většinou je ve skriptovacím jazyce na serveru přímo dostupná funkce, např. v PHP htmlspecialchars() ) Vhodné je také hlídat příliš dlouhé řetězce a automaticky doplňovat tvrdé mezery Typická rozšíření Zvláštní tagy pro smajlíky, javascriptem řízené vkládání tagů, počítadlo znaků (netriviální!),

9 Jak na RTE 1. Shrnutí: Kompatibilita maximální V základní verzi nám stačí input & textarea Náročnost minimální Těžkou práci odvede server Bezpečnost snadno zajistitelná Na serveru lze vstup jednoduše ošetřit Uživatelská přívětivost nic moc Vkládání tagů je nepříjemné

10 Jak na RTE 2. Řešení s JavaScriptem JavaScript nám dává dostatek prostředků pro vytvoření RTE Můžeme přidávat/mazat elementy, měnit jejich vlastnosti a obsah Vzniká však množství problémů s odchytáváním vstupu uživatele, které se jsou mezi prohlížeči značně rozdílné

11 Jak na RTE 3. Podpora RTE ze strany prohlížečů: IE 5.5 Firefox 1.5 Safari 1.3 Opera 9.0 Netscape 7.0 designmode a ContentEditable

12 Jak na RTE 3. Prohlížeč sám implementuje úpravu html Je to rychlejší než řešení čistě ve skriptovacím jazyce Dává k dispozici interface execcommand, querycommandenabled, querycommandstate, querycommandvalue createlink, copy, paste, font, insertimage, inserthtml, undo, redo Typická implementace textarea + iframe

13 Jak na RTE 4. Java applety Robustní, náročné, většinou proprietální a komerční Flash Pružnější než JavaScript, může si dovolit hezčí efekty, to je ale vykoupeno nižší kompatibilitou

14 Zajímavé implementace YUI-RTE Vychází z Yahoo UI Library TinyMCE Šikovný, ale nezvládá zatím Operu FCKEditor Nenáročný, rychlý, konfigurovatelný, kompatibilní HotEditor Mnoho funkcí, umí převádět HTML na vlastní tagy (!), kompatibilní

15 FCKEditor Nenáročný Původně vycházel z jquery, dnes je odlehčený Rychlý Odladěná kompatibilita s prohlížeči a využívání jejich interface Konfigurovatelný Pluginy, toolbary, styly, šablony, spellchecker, filebrowser, pluginy, skiny Kompatibilní Prakticky se všemi prohlížeči, které podporují RTE Stále vyvíjený Adobe a Oracle jej integrují do svých řešení

16 FCKEditor Jednoduchá integrace Nabízí řešení pro integraci na straně serveru PHP, ASP (.NET), AFP, Java, Python, AdobeAIR, ColdFusion Snadno udržovatelný Při dobrém návrhu stačí jen přepnout na novou verzi

17 Zdroje Přehled editorů YUI RTE TinyMCE HotEditor FCKEditor