Richtext editory Filip Dvořák
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
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í
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
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
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
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
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í!),
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é
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é
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
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
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
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í
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í
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
Zdroje Přehled editorů http://www.geniisoft.com/showcase.nsf/webeditors YUI RTE http://developer.yahoo.com/yui/editor/ TinyMCE http://en.wikipedia.org/wiki/tinymce HotEditor http://www.ecardmax.com/hoteditor/index.html FCKEditor http://www.fckeditor.net/