Za´kladnı´m principem, na ktere´m jsou postaveny JavaScriptove´ WYSIWYG editory, je vyuzˇitı´ renderovacı´ho ja´dra prohlı´zˇecˇe pro zobrazenı´ editovane´ nebo tvorˇene´ webove´
stra´nky a za´rovenˇ vyuzˇitı´ specia´lnı´ch funkcı´ ja´dra pro mozˇnost editace dokumentu.
Vy´sledkem je pak rozhranı´, ve ktere´m je mozˇno za´rovenˇ videˇt na´hled dokumentu a soucˇasneˇ jej editovat. Dı´ky tomu je na´hled generova´n renderovacı´m ja´drem prohlı´zˇecˇe, cozˇ zajisˇt’uje pozdeˇjsˇı´ shodne´ zobrazenı´ stra´nky v norma´lnı´m webove´m rezˇimu prohlı´zˇecˇe.
2.2.1 Zacˇleneˇnı´ editoru do stra´nek
Aby bylo mozˇne´ editor pouzˇı´t pouze v urcˇene´ oblasti vyhrazene´ editoru, je nutno edito-vanou oblast uzavrˇı´t do urcˇite´ho elementu. Editaci pouze vybrane´ho elementu je mozˇne´
docı´lit s pouzˇı´tı´m atributu contenteditable vytvorˇene´m spolecˇnostı´ Microsoft a zakompo-novane´m od prohlı´zˇecˇe Microsoft Internet Explorer 5.5. Tento atribut vsˇak nenı´ podpo-rova´n ja´drem Gecko. Neexistenci tohoto atributu vsˇak v tomto ja´drˇe nahrazuje vlastnost designMode, ktera´ nabı´zı´ obdobnou funkcionalitu jako atribut contenteditable.
Z tohoto du˚vodu musı´ vsˇechny nejpouzˇı´vaneˇjsˇı´ editory tento proble´m specia´lneˇ ob-cha´zet. Vytvorˇı´ se pomocna´ webova´ stra´nka s minima´lnı´m obsahem, u ktere´ se zapne editacˇnı´ mo´d. Na´sledneˇ v cı´love´m dokumentu s WYSIWYG editorem je pouzˇit element
<frame>, <iframe> nebo <object> podporujı´cı´ vkla´da´nı´ externı´ho dokumentu jako svu˚j obsah, cˇı´mzˇ vznikne vy´sledny´ efekt vyhrazene´ editovatelne´ oblasti.
Mozˇnost editova´nı´ proste´ho textu vsˇak nenı´ nic vy´jimecˇne´ho a tuto vlastnost umozˇnˇuje i tag <textarea> . Proto je nutno na klientske´ straneˇ vytvorˇit urcˇitou nadstavbu ovla´dacı´ch prvku˚, ktere´ umozˇnı´ modifikovat HTML ko´d.
2.2.2 Modifikace ko´du dokumentu
Modifikace HTML ko´du dokumentu se prova´dı´ pomocı´ funkce execCommand, ktera´ se vola´ na vzda´lene´m souboru se zapnutou mozˇnostı´ editova´nı´. Jako prˇı´klad bych uvedl prˇı´kaz bold, ktery´ do dokumentu vlozˇı´ znacˇky pro tucˇny´ text, prˇı´padneˇ obklopı´ text oznacˇeny´.
Tato funkce ma´ trˇi parametry, z toho prvnı´ je povinny´ a prˇeda´va´ se jı´m na´zev prˇı´kazu, ktery´ se ma´ prove´st.
Druhy´ nepovinny´ parametr naby´vajı´cı´ booleovsky´ch hodnot „true“ nebo „false“ urcˇuje mozˇnost, zda ma´ by´t uzˇivatel vyzva´n k zada´nı´ dodatecˇny´ch informacı´. Implicitnı´ hodnota
2 WYSIWYG XHTML editory 30
tohoto parametru je „false“ a tato funkce zatı´m nenı´ prohlı´zˇecˇi podporova´na a nefunguje.
S jejı´m vyuzˇitı´m se pocˇı´ta´ do budoucna.
Trˇetı´ a opeˇt nepovinny´ parametr se pouzˇı´va´ spolu s neˇktery´mi prˇı´kazy, ktere´ vyzˇa-dujı´ prˇeda´nı´ dodatecˇny´ch informacı´ ke spra´vne´mu provedenı´ dane´ho prˇı´kazu. Naprˇı´klad prˇi vkla´da´nı´ odkazu je potrˇeba funkci informovat o adrese, kam ma´ odkaz odkazovat, cozˇ by meˇl norma´lneˇ zajisˇt’ovat druhy´ nepovinny´ parametr. Vzhledem k nefunkcˇnosti druhe´ho parametru je nutne´ zjistit potrˇebne´ informace rucˇneˇ. Mozˇnostı´ je neˇkolik, od JavaScripto-ve´ho prˇı´kazu prompt, ktery´ pomocı´ dialogoJavaScripto-ve´ho okna pozˇa´da´ uzˇivatele o zada´nı´ urcˇity´ch informacı´, po neˇktery´ vstupnı´ dialogovy´ formula´rˇovy´ prvek. Takto zı´skana´ data se jesˇteˇ musı´ oveˇrˇit. Pokud uzˇivatel zadal korektnı´ data, jsou prˇeda´na jako trˇetı´ parametr funkce execCommand.
2.2.3 Validita ko´du
Bohuzˇel kazˇdy´ webovy´ prohlı´zˇecˇ ma´ odlisˇnou implementaci funkce execCommand, kdy naprˇı´klad Internet Explorer a Opera vkla´da´ vsˇechny znacˇky velky´mi pı´smeny a Firefox pouzˇı´va´ rˇa´dkovy´ tag span s vlozˇeny´m stylem. Aby pra´ce s funkcı´ execCommand nebyla azˇ tak snadna´, prohlı´zˇecˇe nepodporujı´ stejne´ prˇı´kazy nebo jejich vykona´va´nı´ neprova´deˇjı´
u´plneˇ stejneˇ. To znamena´, zˇe neˇktere´ prˇı´kazy nelze pouzˇı´t, pokud chceme docı´lit jednot-ne´ho rozhranı´ ve vsˇech optimalizovany´ch prohlı´zˇecˇı´ch. Prˇehledne´ porovna´nı´ kompatibility prˇı´kazu˚ v jednotlivy´ch prohlı´zˇecˇı´ch poskytuje server www.quirksmode.org2.
Funkce execCommand nenı´ jedinou prˇeka´zˇkou prˇi modifikaci zdrojove´ho ko´du doku-mentu. Velky´m proble´mem jsou samotne´ webove´ prohlı´zˇecˇe, ktere´ si prˇi rucˇnı´m vkla´da´nı´
ko´du bez pouzˇitı´ funkce execCommand, prˇeva´deˇjı´ zdrojovy´ ko´d do sve´ vlastnı´ vnitrˇnı´
srozumitelne´ syntaxe. To je prˇı´cˇinou, procˇ se musı´ ko´d vytva´rˇene´ webove´ stra´nky prˇi prˇe-pnutı´ do textove´ho mo´du nebo odesı´la´nı´ na server prˇevalidovat. Du˚vod, procˇ webove´
prohlı´zˇecˇe prˇizpu˚sobujı´ modifikovany´ obsah, pramenı´ ze snahy opravenı´ chyb v ko´du a snahou umozˇnit zobrazenı´ i nevalidnı´m a sˇpatneˇ napsany´m dokumentu˚m.
2.2.4 Graficke´ rozhranı´
Z du˚vodu˚ uzˇivatelske´ prˇı´veˇtivosti a jednoduchosti ovla´da´nı´ je potrˇeba, aby webove´ WY-SIWYG editory meˇly prˇı´veˇtive´ graficke´ rozhranı´. Vzhledem k prakticky monopolnı´mu
2http://www.quirksmode.org/dom/execCommand.html
Obra´zek 9: Graficke´ ovla´dacı´ rozhranı´ aplikace OpenOffice.org Writer 2.3.0 postavenı´ komercˇnı´ch produktu˚ spolecˇnosti Microsoft se stalo jı´m pouzˇı´vane´ graficke´
ovla´da´nı´ nepsanou podmı´nkou, pro vesˇkere´ graficke´ aplikace.
Prˇı´klad takove´ho graficke´ho rozhranı´ je mozˇne´ videˇt na obra´zku cˇ. 9 aplikace Open-Office.org Writer ve verzi 2.3.0. Je zde patrne´ rozdeˇlenı´ na trˇi cˇa´sti.
Prvnı´ cˇa´st je urcˇena pro rozsa´hla´ menu a podmenu, ktera´ umozˇnˇujı´ komplexnı´ ovla´-da´nı´ nebo prˇizpu˚sobenı´ aplikace. Tato nabı´dka je vsˇak pro mnohe´ uzˇivatele z pocˇa´tku znacˇneˇ neprˇehledna´, a pokud uzˇivatel nepotrˇebuje vyuzˇı´t komplexnost cele´ho programu, je pro neˇho zbytecˇne´ zna´t dopodrobna vsˇechna jejı´ za´koutı´. Z tohoto du˚vodu existuje panel na´stroju˚ a hlavnı´ menu uzˇivatel prakticky nepotrˇebuje vyuzˇı´vat. Obra´tı´ se na neˇj jen pokud potrˇebuje prˇenastavit program nebo pouzˇı´t neˇkterou z pokrocˇilejsˇı´ch funkcı´, kterou mu nenabı´zı´ panel na´stroju˚.
Druha´ cˇa´st, ktere´ se rˇı´ka´ panel na´stroju˚, se skla´da´ z te´maticky´ch podnabı´dek na´stroju˚
pro rozlicˇne´ cˇinnosti. Kazˇdy´ na´stroj ma´ svou vlastnı´ ikonku nebo nabı´dku a cely´ panel umozˇnˇuje za´kladnı´ pra´ci s dokumentem, jeho nacˇtenı´, ulozˇenı´ nebo tisk. Neˇktera´ tlacˇı´tka jsou pouze dvoustavova´ a vztahujı´ se k editovane´mu textu a jeho forma´tova´nı´. Ukazujı´, v jake´m forma´tova´nı´ se nacha´zı´ oznacˇeny´ text, prˇı´padneˇ text nacha´zejı´cı´ se pod aktivnı´m kurzorem. Prˇi pouzˇitı´ teˇchto prvku˚ se zmeˇnı´ jejich stav i forma´tova´nı´ textu. Dı´ky sve´
prˇı´veˇtivosti, na´zornosti a rychle´ dosazˇitelnosti se na´stroje hojneˇ vyuzˇı´vajı´, a proto je jejich pouzˇitı´ ve WYSIWYG editorech nutnostı´.
Ve trˇetı´ cˇa´sti, kterou zmı´nı´m, se nacha´zı´ editacˇnı´ oblast, kde je mozˇne´ sepisovat svu˚j dokument ve WYSIWYG mo´du bez nutnosti znalosti vnitrˇnı´ ko´dove´ struktury dokumentu cˇi syntaxe.
2 WYSIWYG XHTML editory 32
2.2.5 Ukla´da´nı´ vy´sledku
Kdyby nesˇlo v JavaScriptove´m WYSIWYG editoru vytvorˇeny´ dokument ulozˇit, byl by takovy´ editor zbytecˇny´ a nepouzˇitelny´. Hlavnı´m prˇedpokladem pro ulozˇenı´ vy´sledku je podpora programovacı´ho jazyka pro pra´ci se soubory. JavaScript, ktery´ je pouzˇı´va´n u JavaScriptovy´ch WYSIWYG editoru˚ vsˇak z prakticky´ch du˚vodu˚ tuto funkcionalitu nema´ vu˚bec integrovanou a nepodporuje ji.
Du˚vodem, procˇ JavaScript neumozˇnˇuje pra´ci se soubory je prˇedevsˇı´m bezpecˇnost pro uzˇivatele, jeho osobnı´ data a syste´m. Jelikozˇ se JavaScript prova´dı´ na klientoveˇ pocˇı´-tacˇi, ale skripty se nacˇı´tajı´ ze vzda´lene´ho serveru, neˇkdy i nebezpecˇne´ho a infikovane´ho viry, nenı´ mozˇne´ zarucˇit neza´vadnost nacˇı´tane´ho skriptu. I kdyby tato funkcionalita byla osˇetrˇena neˇjaky´mi bezpecˇnostnı´mi prvky, sta´le by zde bylo velke´ riziko prˇi odhalenı´ chyb v zabezpecˇenı´ a naboura´nı´ se do velke´ho mnozˇstvı´ pocˇı´tacˇu˚ prˇes za´vadny´ JavaScriptovy´
ko´d. Z teˇchto du˚vodu˚ se autorˇi JavaScriptu rozhodli vu˚bec neimplementovat podporu pra´ce se soubory a tak plneˇ eliminovat rizika spojene´ se zneuzˇitı´m dane´ funkcionality.
Pro WYSIWYG editory to vsˇak znamena´ dalsˇı´ proble´m a to jak vyrˇesˇit ukla´da´nı´ sou-boru˚. Jednou z mozˇnostı´ je zobrazit na´hled dokumentu v nove´m okneˇ prohlı´zˇecˇe a vyuzˇı´t mozˇnosti ulozˇenı´ webove´ stra´nky prostrˇednictvı´m samotne´ho webove´ho prohlı´zˇecˇe. Tento zpu˚sob vsˇak nenı´ prˇı´lisˇ vhodny´ naprˇı´klad pro redakcˇnı´ syste´my nebo pro upravova´nı´ cˇa´sti obsahu webove´ stra´nky kdesi na Internetu, protozˇe by uzˇivatel musel pomocı´ prohlı´zˇecˇe pracneˇ ukla´dat svu˚j vy´tvor na loka´lnı´ disk a na´sledneˇ se prˇipojovat prˇes FTP protokol a nahra´vat modifikovane´ soubory na vzda´leny´ server.
Proto se pro ukla´da´nı´ nebo spı´sˇe odesı´la´nı´ dokumentu˚ pouzˇı´va´ element <form> umozˇ-nˇujı´cı´ seskupit neˇkolik ovla´dacı´ch polı´ do jednoho formula´rˇe, ktery´ je mozˇne´ najednou odeslat metodami post nebo get na libovolnou adresu, ktera´ s teˇmito u´daji da´le pracuje.
Veˇtsˇinou se jedna´ o soubor umı´steˇny´ na serveru obsahujı´cı´ PHP skript, ktery´ prˇijme po-slana´ data a mu˚zˇe s nimi da´le pracovat, naprˇı´klad ulozˇit do databa´ze nebo poslat klientovi vygenerovany´ dokument se specia´lnı´ hlavicˇkou, ktera´ vyzve uzˇivatele k ulozˇenı´ jeho pra´ce na loka´lnı´ disk.
Dalsˇı´m rˇesˇenı´m je pouzˇı´t velmi popula´rnı´ technologii AJAX, pomocı´ nı´zˇ je zdrojovy´
ko´d, jako v prˇı´padeˇ formula´rˇove´ho elementu, odesla´n na specia´lnı´ soubor naprˇı´klad s PHP skriptem. PHP soubor pro zpracova´nı´ dat na serverove´ straneˇ se pro pouzˇitı´ formula´rˇe a technologie AJAX shoduje. Vy´hodou AJAXu oproti formula´rˇove´mu odesı´la´nı´ je
prˇe-devsˇı´m v mozˇnosti ponecha´nı´ sta´vajı´cı´ stra´nky a rozepsane´ho textu anizˇ by se stra´nka musela znovu nacˇı´tat nebo se musela pracneˇ posı´lana´ data na server odesı´lat zpeˇt klien-tovi pro zobrazenı´ na noveˇ nacˇı´tany´ch stra´nka´ch. V prˇı´padeˇ AJAXu tedy skript pouze odesˇle data na server a vycˇka´va´ na odpoveˇd’. Pokud server bude zrovna neaktivnı´, mu˚zˇe WYSIWYG editor na tento stav upozornit.
Nevy´hodou AJAXove´ho a formula´rˇove´ho rˇesˇenı´ je nutnost pouzˇitı´ serveru.
2.2.6 Omezenı´ JavaScriptovy´ch WYSIWYG editoru˚
Jeden z hlavnı´ch proble´mu˚ a omezenı´ JavaScriptovy´ch WYSIWYG editoru˚ je specia-lizace pouze na urcˇitou skupinu jader umozˇnˇujı´cı´ pouzˇı´t vlastnosti pro editova´nı´ doku-mentu prˇı´mo ve webove´m prohlı´zˇecˇi. Z tohoto du˚vodu jsou neˇkterˇı´ uzˇivatele´ zameˇrˇenı´
na exoticˇteˇjsˇı´ graficke´ nebo textove´ prohlı´zˇecˇe znevy´hodneˇni a WYSIWYG editor jim pravdeˇpodobneˇ nebude fungovat nebo nebude fungovat optima´lneˇ.
Souvisejı´cı´m omezenı´m je pouzˇitelnost na mobilnı´ch, PDA a jiny´ch specia´lnı´ch zarˇı´-zenı´ch. Tato vcelku mala´ a specia´lnı´ zarˇı´zenı´ jsou omezena svou velikostı´ a tudı´zˇ velikostı´
pameˇti, vy´konem procesoru apod. Proto majı´ veˇtsˇinou znacˇneˇ omezene´ a upravene´ pro-hlı´zˇecˇe z du˚vodu snı´zˇenı´ na´rocˇnosti a jejich ja´dro nemusı´ podporovat vsˇechny specia´lnı´
funkce vyzˇadovane´ WYSIWYG editorem.
3 Vy´voj aplikace 34
3 Vy´voj aplikace
Za´kladnı´ principy WYSIWYG JavaScriptovy´ch editoru˚ vypadajı´ jednodusˇe, ale samotny´
vy´voj aplikace je mnohem slozˇiteˇjsˇı´ a obtı´zˇneˇjsˇı´, nezˇ se zprvu mohlo zda´t.
Nejveˇtsˇı´m proble´mem prˇi vy´voji aplikace se stala nekompatibilita a rozdı´lne´ chova´nı´
webovy´ch prohlı´zˇecˇu˚. Mnohdy urcˇita´ funkcionalita bezchybneˇ fungovala v prohlı´zˇecˇi Firefox nebo Opera, avsˇak jizˇ nikoliv v prohlı´zˇecˇi Internet Explorer. Mnohe´ opravy chyb takovy´chto nekompatibilit a rozdı´lu˚ trvaly neˇkdy pa´r hodin nebo dokonce i cely´ den, kdy byla prˇepsa´na polovicˇka ko´du.
Jizˇ prˇed zapocˇetı´m programu jsem veˇdeˇl, zˇe se program musı´ da´t snadno konfigurovat a prˇizpu˚sobit dle aktua´lnı´ch potrˇeb webmastera cˇi uzˇivatele. Z tohoto du˚vodu jsem se rozhodl, aby bylo mozˇno nakonfigurovat vı´ce editoru˚ s ru˚zny´mi menu za´rovenˇ na jedne´
stra´nce, cesty k souboru˚m a obsahy jednotlivy´ch menu.
Aby se navza´jem ru˚zne´ a prˇedem nezna´me´ kopie editoru v jedne´ stra´nce neovlivnˇovaly nebo nebyly ovlivneˇny jiny´m ko´dem umı´steˇny´m na stra´nce, bylo potrˇeba jej uzavrˇı´t do objektove´ho modelu. Proto je editor rozdeˇlen do cˇtyrˇ za´kladnı´ch cˇa´stı´.