Konečně „opravdové“ WYSIWYG editory!

Klávesnice psaní

Provozujete redakční systém nebo jiný web, kam mohou uživatelé psát texty? Nebo děláte weby na zakázku a říkáte si, že by bylo dobré dát zákazníkům možnost přepisovat části textu tak, aby s každou změnou nemuseli otravovat vás? Zdají se vám pro tyhle účely klasické WYSIWYG neohrabané? Zde jsou alternativy.

Před několika lety se staly javascriptové WYSIWYG editory téměř povinnou součástí všech redakčních systémů či diskusních fór. Editory jako FCKEditor nahradily postupně různé „pomocné lišty“ a člověk téměř nenašel textarea, která by nebyla ozdobená nějakou tou „Word-like“ lištou.

Ačkoli nejsou WYSIWYG editory nejlepší (natož jedinou možnou) cestou, jak umožnit uživatelům vkládat data s bohatším formátováním, aniž by se museli učit nějaký značkovací jazyk (HTML či různé nadstavby), je jejich použití pro vývojáře dostatečně jednoduché a dostanou tak „za málo peněz hodně muziky“. Práce s nimi je totiž pro vývojáře velmi snadná a uživateli dává pocit, že má dostatečný počet nástrojů k vyjádření svých myšlenek. A pocit je to, co prodává (kdyby tomu tak nebylo, vedly by WYSIWYM editory – ale u nich je problém, že uživatel musí vědět, co že to píše; u WYSIWYG stačí jen aby věděl, jak chce, aby to vypadalo)

Pravděpodobně nejpoužívanějším JS WYSIWYG editorem dneška je TinyMCE – jeden z prvních, který pracoval i s prohlížečem Opera. Naleznete jej jako „možnost první volby“ v různých CMS i frameworcích. Je dostatečně mocný, dobře upravitelný pro konkrétní použití a je k dispozici pod přijatelnou licencí.

Pokud bychom si pomůcky pro zadávání textů na webové stránky rozdělili do „generací“, můžeme se shodnout zhruba na takovémto dělení:

  • Nultá generace – prostá TEXTAREA
  • První generace – nástrojová lišta k TEXTAREA, která do textu vkládala speciální značky
  • Druhá generace – plné náhrady TEXTAREA editačním oknem s WYSIWYG schopnostmi (FCKEditor, TinyMCE, …)
  • Třetí generace – ?

Existovaly například i editory coby ActiveX komponenty, ale to není předmětem článku. V tomto článku zůstaneme u JavaScriptových editorů.

Třetí generace

Jako třetí generaci bychom mohli označit editory, založené na plném využití možností HTML atributu contentEditable na webové stránce. ContentEditable atribut je tu už hezkou řádku let a verzí prohlížečů. Ve stručnosti a zjednodušeně řečeno: libovolný HTML element, který má tento atribut, by mělo být možné v prohlížeči měnit a upravovat. Pro upřesnění dodejme, že s atributem contentEditable pracují i klasické WYSIWYG editory („druhá generace“). V čem je tedy hlavní rys nové generace?

Editory předcházející generace nahrazovaly obsah elementu textarea. Formátování textu v nich ale neodpovídá zcela přesně tomu, jak vypadá text na výsledné stránce, naopak okolo editačního okna je spousta prvků, které na výsledné stránce nejsou (prvky redakčního systému) a i text samotný může vypadat jinak (např. jiné písmo apod.). Uživatel tak byl často zmatený, ptal se „a kde mám to, co je na té mojí stránce?“, popřípadě měl tendenci v editovaném textu opakovat informace, které už ve výsledné stránce byly, nebo „stylovat nastylované“.

Třetí generace přináší „WYSIWYG editaci na místě“ (in-place). Uživatel vidí stránku v její finální podobě, a po kliknutí na oblast, kde povolil webdesignér úpravy, může měnit její obsah. Editory k tomu zobrazí nevtíravou „kontextovou nástrojovou lištu“ s editačními možnostmi, a po skončení editace pomohou s uložením změn.

Mercury

Ukažme si příklad takového postupu na editoru Mercury. Na první pohled vypadá jeho domovská stránka jako jakákoli jiná HTML stránka:

Domovská stránka editoru Mercury

Po kliknutí na tlačítko Test it out (na screenshotu není) se na vrcholu stránky objeví lišta s editačními nástroji a okolo oblastí, které může uživatel měnit, se ukáže jemný okraj. V těchto místech lze obsah měnit dle libosti.

Tatáž stránka v „editačním módu“

Editor Mercury je open source (MIT licence) a je k dispozici jako samostatná JS knihovna či jako gem pro Rails. Pro zajímavost – samotný editor je napsaný v CoffeeScriptu. Umožňuje „in-place“ editaci obsahu. Neřeší jeho ukládání, to je na vývojáři; Mercury předá pouze JSON podobu textu.

Oblast, která má být editovatelná, se označuje pomocí třídy mercury-region s udáním typu oblasti. Mercury totiž umožňuje pracovat buď v módu HTML, nebo v módu Markdown.

Aloha

Asi nejznámějším příkladem těchto „editorů s novým přístupem“ je editor s poetickým názvem Aloha. Nabízí možnost in-place editace s nastavitelnou nástrojovou lištou a mnohé další funkce (příklady). K dispozici je pod licencí AGPL či pod komerční licencí.

Lištu editoru Aloha lze libovolně přemístit či „připnout“

Editor Aloha se zaměřuje především na rychlost a na kompatibilitu s (x)HTML5. Nabízí velké množství pluginů, velmi detailní možnosti konfigurace nebo množství jazykových verzí (čeština mezi nabízenými jazyky nechybí).

Kde použít in-place editaci?

Kdekoli, kde bude mít smysl. Možná nebude úplně vhodná pro redakční systémy, ale určitě nalezne použití například na webech pro menší firemní zákazníky. Pro freelancera či studio, které vytváří takový „statický web“, bude možná snazší a ve výsledku efektivnější dát zákazníkovi jednoduchou možnost, jak si může sám změnit některé informace (např. sezónní slevy či kontaktní informace), než se starat o každou požadovanou změnu sám, byť za nějaký obolus. Pro podobné „drobné změny“ platí víc než kde jinde pravidlo: „přepsání zabere fakt jen pět minut – ale máte s tím dvacet minut práce okolo a hodinu a půl dohadování, co se vlastně přesně má změnit a jak…

Užitečné odkazy

Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 15

Přehled komentářů

martin posledni generace editoru contenteditable nepouziva
aa Re: posledni generace editoru contenteditable nepouziva
maryo Re: posledni generace editoru contenteditable nepouziva
maryo Re: posledni generace editoru contenteditable nepouziva
JakubS Contenteditable pro zančkovací jazyky
Franta Re: Contenteditable pro zančkovací jazyky
JakubS Re: Contenteditable pro zančkovací jazyky
Bohuš Re: Contenteditable pro zančkovací jazyky
František Kučera Re: Contenteditable pro zančkovací jazyky
patrik.sima Re: Konečně "opravdové" WYSIWYG editory!
kostelnik Poslední generace je editor Google Docs
pje Re: Poslední generace je editor Google Docs
Bubak Naprd
František Kučera Re: Naprd
Nox CushyCMS
Zdroj: https://www.zdrojak.cz/?p=3544