Richtext editory. Filip Dvořák

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 – , – 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<br /> <br /> • Proč nepoužít rovnou html tagy ? – Bezpečnost, separabilita, jednoduchost<br /> <br /> 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<br /> <br /> • Typická rozšíření – Zvláštní tagy pro smajlíky, javascriptem řízené vkládání tagů, počítadlo znaků (netriviální!), …<br /> <br /> Jak na „RTE“ – 1. • Shrnutí: – Kompatibilita maximální • V základní verzi nám stačí input & textarea<br /> <br /> – Náročnost minimální • „Těžkou“ práci odvede server<br /> <br /> – Bezpečnost snadno zajistitelná • Na serveru lze vstup jednoduše ošetřit<br /> <br /> – Uživatelská přívětivost … nic moc • Vkládání tagů je nepříjemné …<br /> <br /> 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é<br /> <br /> 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 –…<br /> <br /> • designMode a ContentEditable<br /> <br /> Jak na „RTE“ – 3. • Prohlížeč sám implementuje úpravu html – Je to rychlejší než řešení čistě ve skriptovacím jazyce<br /> <br /> • Dává k dispozici interface – execCommand, queryCommandEnabled, queryCommandState, queryCommandValue • createlink, copy, paste, font…, insertimage, inserthtml, undo, redo<br /> <br /> • Typická implementace – textarea + iframe<br /> <br /> Jak na „RTE“ – 4. • Java applety – Robustní, náročné, většinou proprietální a komerční<br /> <br /> • Flash – Pružnější než JavaScript, může si dovolit hezčí efekty, to je ale vykoupeno nižší kompatibilitou<br /> <br /> Zajímavé implementace • YUI-RTE – Vychází z Yahoo UI Library<br /> <br /> • TinyMCE – Šikovný, ale nezvládá zatím Operu<br /> <br /> • FCKEditor – Nenáročný, rychlý, konfigurovatelný, kompatibilní<br /> <br /> • HotEditor – Mnoho funkcí, umí převádět HTML na vlastní tagy (!), kompatibilní<br /> <br /> FCKEditor • Nenáročný – Původně vycházel z jQuery, dnes je odlehčený<br /> <br /> • Rychlý – Odladěná kompatibilita s prohlížeči a využívání jejich interface<br /> <br /> • Konfigurovatelný – Pluginy, toolbary, styly, šablony, spellchecker, filebrowser, pluginy, skiny<br /> <br /> • Kompatibilní – Prakticky se všemi prohlížeči, které podporují RTE<br /> <br /> • Stále vyvíjený – Adobe a Oracle jej integrují do svých řešení<br /> <br /> FCKEditor • Jednoduchá integrace – Nabízí řešení pro integraci na straně serveru • PHP, ASP (.NET), AFP, Java, Python, AdobeAIR, ColdFusion<br /> <br /> • Snadno udržovatelný – Při dobrém návrhu stačí jen „přepnout“ na novou verzi<br /> <br /> Zdroje • Přehled editorů – http://www.geniisoft.com/showcase.nsf/WebEditors<br /> <br /> • YUI – RTE – http://developer.yahoo.com/yui/editor/<br /> <br /> • TinyMCE – http://en.wikipedia.org/wiki/TinyMCE<br /> <br /> • HotEditor – http://www.ecardmax.com/hoteditor/index.html<br /> <br /> • FCKEditor – http://www.fckeditor.net/<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/richtext-editory-filip-dvoak" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Richtext editory. Filip Dvořák"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;">