DHTML editor – vkládání obrázků

29. listopadu 2002

•

Líbil se vám DHTML editor, se kterým jste se před časem mohli na stránkách Intervalu seznámit? Dnes si, na vaše přání, ukážeme, jak jeho schopnosti obohatit o práci s obrázky.

Redakční systém je dnes součástí mnoha webových projektů, a proto mnoho z nás uvítalo možnost obohatit jej o plnohodnotný visuální editor webových dokumentů prostřednictvím jedné z komponent Internet Exploreru. Také já jsem v rámci tvorby redakčního systému projektu imaturita.cz neodolal a tento editor do systému integroval. Po čase, spolu se vzrůstajícím obsahovým záběrem projektu, mi však začalo vadit, že do editovaného textu není možné vkládat obrázky.

Pokud se podíváte do dokumentace k editoru na stránkách MSDN, zjistíte, že příslušná komponenta vkládání obrázků podporuje. Problém však spočívá v tom, že po aktivaci připraveného tlačítka nástrojové lišty se do kódu dokumentu vloží lokální adresa obrázku. My však potřebujeme obrázek na server přenést a do dokumentu posléze vložit adresu souboru na serveru. Jak to však provést s co nejmenší námahou?

V diskusním fóru pod již zmiňovaným článkem navrhli čtenáři Intervalu několik řešení, ani jedno se mi však nezdálo prakticky použitelné. Chtěl jsem co nejvíce využít schopností editoru, tj. vložený obrázek ihned zobrazit na stránce tak, aby kód již využíval obrázek přenesný na server. Po několika neúspěšných experimentech jsem vyloučil na první pohled smysluplné řešení – automatickou náhradu lokální adresy za adresu na serveru spolu s přenosem souboru za využití regulárních výrazů. Zbývalo jediné, ponořit se hlouběji do dokumentace k editoru a využít maximálně jeho funkcí spolu s možnostmi jazyka PHP, v němž je celý můj redakční systém naprogramován. Má snaha byla naštěstí po čase korunována úspěchem a světlo světa tak spatřilo vcelku nenáročné řešení, jehož filozofii se vám pokusím přiblížit.

Po kliknutí na již zmiňované tlačítko pro vložení obrázku se zobrazí PHP skript pro vložení (zaslání) souboru na server. Zde uživatel (redaktor) vybere obrázek a potvrzením formuláře jej odešle na server. PHP skript následně zajistí umístění souboru do správného adresáře a analyzuje jeho velikost (mlčky předpokládáme formát GIF). Tím jsme získali veškeré potřebné informace nutné k vložení obrázku a ke slovu tak může přijít JavaScript. S jeho pomocí do rámu s editorem vložíme kód definující obrázek a v závěru zavřeme okno pro jeho vložení. Komponenta editoru rozpozná vložení nového kódu, který ihned interpretuje jako obrázek a tak jej také zobrazí. Jak sami vidíte, nejedná se tedy o nic složitého.

Jak tedy na to? V první řadě musíme upravit kód původního editoru tak, aby se po stisku tlačítka zobrazil formulář pro vložení obrázku. V HTML kódu proto najdeme následující řádek:

Výše uvedený řádek upravíme následovně:

Tím zajistíme aktivaci skriptu add_image.php při kliknutí na ikonku s obrázkem. Věnujme se proto nyní tomuto skriptu:

<head>
<title>Vložení obrázku</title>
</head>
<?
// Byl uz formular odeslan?
if ($send)
{
   // ziskam extenzi souboru
   $extenze=strtok($_FILES[‚userfile‘][‚name‘] ,“.“);
   $extenze=strtok(„.“);
   // generuji nazev souboru
   $userfile_name=time().“.“.$extenze;
   $new_name=“/zadana_cesta_na_serveru/“.$userfile_name;
   // premistim souboru na zadanou lokaci
   move_uploaded_file($userfile, $new_name);
   // zjistim velikost obrazku
   $size=getimagesize($new_name);
?>
<script>
// aktivuji ramec s editorem
window.opener.frames.Editor.document.body.focus();
// do HTML kodu dokumentu v editoru vlozim kod s definici obrazku
window.opener.Editor.document.selection.createRange().pasteHTML(‚<img src=“../cesta/<?echo $userfile_name?>“
width=“<?echo $size[0]?>“ height=“<?echo $size[1]?>“>‘)
// zavru formular pro vlozeni obrazku
window.close();
</script>
<?
}
else
{
?>
<table>
<form name=“form1″ enctype=“multipart/form-data“ method=“post“>
<tr>
<td >Jméno souboru: </strong></td><td><input type=“file“ name=“userfile“
size=“20″></td></tr>
<tr><td colspan=“2″ align=“center“ ><input type=“submit“ name=“send“ value=“Vložit
obrázek“></td></tr>
</table>
</form>
<?
}
?>

Ke kódu, myslím, není potřeba bližší komentář, malou poznámku si snad zaslouží jen generování názvu souboru. Na ten je kladen požadavek unikátnosti, který na straně odesílatele (redaktora) nelze zajistit. Na server může být po čase zaslán obrázek se jménem, které se již v adresáři vyskytuje. Pro generování unikátního názvu proto využívám funkci time(), která udává počet sekund od 1. 1. 1970.

Popsané řešení vkládání obrázků samozřejmě není ideální. Pominu-li závislost na MSIE, danou použitím komponenty editoru, není možné vložené obrázky na serveru mazat návazně na změny v kódu. Po čase se tak na serveru může shromáždit velké množství souborů, které vlastně nebudou použity v žádném článku. Výše popsaný skript také není bezpečný ani odolný proti chybovým stavům. Pro reálné nasazení by proto bylo nutné provést určité úpravy – nejlépe napojení na databázi, díky čemuž by se dalo jasně rozpoznat, které obrázky jsou nadbytečné a lze je třeba jednou za čas smazat. V zájmu lepší čitelnosti popisovaného postupu jsem je však vynechal.