DHTML editor – snadná úprava HTML kódu ve formuláři

V řadě aplikací uvítáte, když si klient může z formuláře ve stránce sám upravit vzhled odesílaného textu (vložit aktivní odkazy, obrázky nebo multimediální obsah) – např. při vkládání inzerátu nebo příspěvku do diskusního fóra. Uvedený DHTML editor sice pracuje jen v prohlížeči IE4+ na Windows (na Macu bohužel obvykle zbortí prohlížeč), ovšem i tak je naprosto ideální pro nasazení v intranetu.

Editor umožňuje automaticky rozpoznávat typ prohlížeče a alternativně nabídnout alespoň klasický formulář s jednoduchým javascriptovým doplňkem pro přímé vkládání HTML značek.

Základní kámen

Nasazení editoru podle tohoto návodu je velmi snadné – postačí si stáhnout celý balíček dhtmed.zip, který obsahuje příklad stránky s editorem, potřebný skript, obrázky a soubor stylů.

Základem editoru je tento HTML soubor (pro přehlednost jsou v ukázce úmyslně přidány prázdné řádky):

Soubor obsahuje přilinkování souboru stylů (ten upravuje vzhled tak, aby editor vypadal jako aplikace Windows včetně tlačítek a systémových barev), volání podpůrného JavaScriptu, definici formuláře (v té je třeba uvést URL na skript, který zpracuje odesílaný text) a panel nástrojů (ten tvoří obrázky s popiskem, nadefinovaným stylem při přejetí myší a patřičnou akcí při klepnutí). Pokud nechcete dovolit použití některé funkce, prostě kód obrázku dané funkce odeberte.

Speciálním tlačítkem nástrojů editoru je první tlačítko s popiskem "Režim HTML / Vizuální" – přepíná běžný vizuální režim na režim přímé editace HTML kódu a zpět. Po klepnutí na toto tlačítko se zobrazí "surový" HTML kód a specialisté tak mohou upřesnit vlastnosti některých značek. Současně také zmizí zbývající tlačítka panelu nástrojů – v tomto režimu je nelze použít, což také indikuje zvolený režim HTML. Dalším klepnutím se opět zapne vizuální režim, zobrazí se aktuální vzhled textu a objeví se všechna tlačítka.

Okno pro editaci není jako obvykle tvořeno pomocí textarea, ale vnořeným rámcem iframe (zde je možné upravit rozměr okna pro editaci). Rámec je pomocí identifikátoru ID pojmenován a následným povelem JavaScriptu "frames.Editor.document.designMode" je HTML editor aktivován. Důležitý je zde soubor enhedsup.htm, který je výchozím souborem a načte se do vnořeného rámce. Obsah tohoto souboru tvoří výchozí obsah editoru.

Pro odesílání textu formátovaného pomocí HTML je nutné, aby byl, jako v našem příkladu, úplně prázdný. Pokud bychom chtěli odesílat text s nějakým záhlavím nebo zápatím, nebo třeba celou korektní HTML stránku, přidáme potřebný kód do souboru enhedsup.htm. Ačkoli máme nyní enhedsup.htm prázdný (má nulovou délku), nelze jej vynechat – jinak by se v editační části objevilo chybové hlášení "Stránku nelze zobrazit".

Nakonec je v souboru ukázka nápovědy pro přechod na nový řádek a pro vytvoření odstavce a tlačítko pro odeslání obsahu formuláře. Tag formuláře je úmyslně vnořen mezi značky tabulky, což sice není úplně korektní, ale v Internet Exploreru plně funkční. Zamezí to navíc zbytečnému vložení prázdného řádku.

Šaty editoru

Pokud použijete editor samostatně ve stránce (nebude v ní nic jiného), je dobré nastavit nulové okraje stránky. Vhodné je případně otevírat editor do okna pomocí JavaScriptu – pak můžete nadefinovat okno tak, že nebude mít panely nástrojů ani stavový řádek, a bude tak vzhledem plně splývat se systémem uživatele.

Nechcete-li, aby editor přebíral systémové barvy, ale měl barvy vlastní, změníte názvy systémových barev (např. menu, buttonface) za konkrétní barvu (např. #996699) v souboru stylů enhed.css. Obrázky panelu nástrojů editoru jsou průhledné – počítá se s tím, že editor bude mít různé barvy u každého klienta v závislosti na nastavení jeho barev.

Obsah formuláře se po odeslání tlačítkem "Uložit" odešle metodou post na server v proměnné "body". Název proměnné je uveden v podpůrném JavaScriptu enhed.js a dle potřeby je možné si ho změnit. Na závěr doplňuji, že je velmi potřebné ve skriptu (v tomto případě skript.php), který následně zpracovává obsah odeslaného formuláře, důkladně ošetřit nepovolené tagy a konstrukce (v PHP například funkcí strip_tags). Předejdete tak případnému narušení konstrukce HTML kódu, vkládání JavaScriptů nebo dokonce přesměrování.

Příklad ošetření nepovolených tagů ve zpracovávajícím skriptu pomocí PHP:

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.