V předchozím článku jste získali editor umožňující snadno upravovat vzhled textu ve formuláři. Uvedený editor ovšem funguje jen v Internet Exploreru, v ostatních prohlížečích nepracuje korektně. V tomto pokračování se dozvíte, jak lze editor udělat použitelný ve všech prohlížečích.
Na začátku je třeba si uvědomit, že vestavěný editor HTML pracuje skutečně jen v Exploreru a v jiném prohlížeči ho prostě nenajdete. Doplnění kompatibility tedy spočívá „jen“ v rozpoznání prohlížeče a v závislosti na vygenerování stránky s DHTML editorem nebo stránky s klasickým polem textarea s přidaným jednoduchým panelem nástrojů, který usnadní vkládání standardních HTML značek.
V našem příkladě je použito PHP, ale podle potřeby jistě nebude pro zájemce složité upravit si ho pro použití ASP nebo jen JavaScriptu, případně podmíněných komentářů IE5+.
Základem kompatibilního editoru bude tento PHP skript:
<?
if(ereg("MSIE",$HTTP_USER_AGENT) && !ereg("Mac",$HTTP_USER_AGENT)) {
$enh=1;
?>
<link rel="stylesheet" type="text/css" href="enhed.css">
<script language="JavaScript" src="enhed.js"></script>
<?PHP } else { ?>
<script language="JavaScript">
<!–
function InsSm(sm)
{
document.form1.body.focus();
document.form1.body.value=document.form1.body.value+sm;
}
// –>
</script>
<?PHP } ?>
<table bgcolor="#999999" cellspacing="2" cellpadding="0" border="0" <?PHP echo (isset($enh) ? "class=\"dhtmed-bg\"" : "" ?>>
<form action="skript.php" name="form1" method="post" <?PHP echo (isset($enh) ? "onSubmit=\"return SendData()\"" : "" ?>>
<tr>
<td nowrap>
<?PHP
if (isset($enh))
include("enhed.php");
else
include("stded.php");
?>
<br><input type="Submit" value="Uložit" <?PHP echo (isset($enh) ? "class=\"button\"" : "" ?>></td>
</tr>
</form>
</table> |
|
Nejprve se otestuje, zda jde o Internet Explorer (slušelo by se otestovat i zda je verze vyšší než 4, ale pro jednoduchost to vynechávám). Vyloučen je Explorer na MACu – zde, jak jsem psal, způsobí aktivace DHTML editoru zamrznutí prohlížeče.
V Exploreru vygenerujete stránky přilinkování souboru stylů pro DHTML editor a kód, který zavede podpůrný skript DHTML editoru. Také si nastavte pomocnou proměnnou $enh, kterou použijete později. V jiném prohlížeči se vygeneruje pouze část Javascriptu s funkcí pro již zmíněný jednoduchý panel nástrojů. Dále je ještě v závislosti na proměnné $enh vygenerován parametr pro styl tabulky editoru a povel onsubmit formuláře.
Hlavní rozdíl ve stránce pro Explorer a pro ostatní prohlížeče je v buňce tabulky formuláře. V závislosti na proměnné $enh se vygeneruje kompletní panel nástrojů a aktivuje se DHTML editor ve vloženém rámci (pomocí include se vloží soubor enhed.php), nebo jen jednoduchý panel nástrojů a editační pole textarea (tato část je v souboru stded.php).
Soubor enhed.php je částí DHTML editoru, který již znáte z minulého článku:
<input type="hidden" name="body" id="ID"><input type="hidden" name="NET">
<img alt="Režim HTML / Vizuální" class="dhtmed-v" onmouseover="className=’dhtmed-o’" onmouseout="className=’dhtmed-v’" id="swappmodeE" onclick="swappMode()" height="20" src="images/html.gif" width="20">
<span id="formatToolbar"><img height="18" src="images/spc.gif" width="2">
<img alt="Tučné (Ctrl+B)" class="dhtmed-v" onmouseover="className=’dhtmed-o’" onmouseout="className=’dhtmed-v’" id="boldE" onclick="DoCommand(‚Bold‘)" src="images/bold.gif" width="20" height="20">
<img alt="Kurzíva (Ctrl+I)" class="dhtmed-v" onmouseover="className=’dhtmed-o’" onmouseout="className=’dhtmed-v’" id="italE" onclick="DoCommand(‚Italic‘)" src="images/italic.gif" width="20" height="20">
<img alt="Podtržené (Ctrl+U)" class="dhtmed-v" onmouseover="className=’dhtmed-o’" onmouseout="className=’dhtmed-v’" id="underE" onclick="DoCommand(‚Underline‘)" src="images/underline.gif" width="20" height="20">
<img height="18" src="images/spc.gif" width="2">
<img alt="Velké písmo" class="dhtmed-v" onmouseover="className=’dhtmed-o’" onmouseout="className=’dhtmed-v’" id="ibigE" onclick="ExtBig()" height="20" src="images/big.gif" width="20">
<img alt="Malé písmo" class="dhtmed-v" onmouseover="className=’dhtmed-o’" onmouseout="className=’dhtmed-v’" id="ismallE" onclick="ExtSmall()" height="20" src="images/small.gif" width="20">
<img height="18" src="images/spc.gif" width="2">
<img alt="Číslovaný seznam" class="dhtmed-v" onmouseover="className=’dhtmed-o’" onmouseout="className=’dhtmed-v’" id="iolE" onclick="DoCommand(‚InsertOrderedList‘)" height="20" src="images/numbered.gif" width="20">
<img alt="Nečíslovaný seznam" class="dhtmed-v" onmouseover="className=’dhtmed-o’" onmouseout="className=’dhtmed-v’" id="iulE" onclick="DoCommand(‚InsertUnorderedList‘)" height="20" src="images/buleted.gif" width="20">
<img height="18" src="images/spc.gif" width="2">
<img alt="Vodorovná čára" class="dhtmed-v" onmouseover="className=’dhtmed-o’" onmouseout="className=’dhtmed-v’" id="ihlE" onclick="DoCommand(‚InsertHorizontalRule‘)" height="20" src="images/hr.gif" width="20">
<img alt="Běžící text" class="dhtmed-v" onmouseover="className=’dhtmed-o’" onmouseout="className=’dhtmed-v’" id="marqueeE" onclick="ExtMarq()" height="20" src="images/marquee.gif" width="20">
<img alt="Obrázek" class="dhtmed-v" onmouseover="className=’dhtmed-o’" onmouseout="className=’dhtmed-v’" id="imageE" onclick="DoCommand(‚InsertImage‘,true)" height="20" src="images/image.gif" width="20">
<img alt="Multimédia" class="dhtmed-v" onmouseover="className=’dhtmed-o’" onmouseout="className=’dhtmed-v’" id="embedE" onclick="ExtMedia()" height="20" src="images/media.gif" width="20">
<img height="18" src="images/spc.gif" width="2">
<img alt="Vložit e-mail" class="dhtmed-v" onmouseover="className=’dhtmed-o’" onmouseout="className=’dhtmed-v’" id="emailE" onclick="ExtMail()" height="20" src="images/mail.gif" width="20">
<img alt="Vložit odkaz (Ctrl+K)" class="dhtmed-v" onmouseover="className=’dhtmed-o’" onmouseout="className=’dhtmed-v’" id="hyperlinkE" onclick="DoCommand(‚CreateLink‘,true)" height="20" src="images/hyperlink.gif" width="20">
</span>
<iframe ID="Editor" Width="100%" Height="200" src="enhedsup.htm"></iframe>
<script language="javascript" type="text/javascript">
<!–
frames.Editor.document.designMode = "On";
//–>
</script><br>
[Enter] – odstavec<br>
[Shift + Enter] – nový řádek |
|
Pro ostatní prohlížeče se použije část v souboru stded.php:
<a tabindex=‘-1′ href="javascript:void InsSm(‚<b>zde bude text tučně</b> ‚)"><img src="images/bold.gif" width="20" height="20" border=0 alt="Tučné"></a>
<a tabindex=‘-1′ href="javascript:void InsSm(‚<i>zde bude text kurzívou</i>‘)"><img src="images/italic.gif" width="20" height="20" border=0 alt="Kurzíva"></a>
<a tabindex=‘-1′ href="javascript:void InsSm(‚<u>zde bude podtržený text</u>‘)"><img src="images/underline.gif" width="20" height="20" border=0 alt="Podtržené"></a>
<img src="images/spc.gif" height="18" width="2" border="0">
<a tabindex=‘-1′ href="javascript:void InsSm(‚<big>zde bude velký text</big> ‚)"><img src="images/big.gif" width="20" height="20" border=0 alt="Velké písmo"></a>
<a tabindex=‘-1′ href="javascript:void InsSm(‚<small>zde bude malý text</small> ‚)"><img src="images/small.gif" width="20" height="20" border=0 alt="Malé písmo"></a>
<img src="images/spc.gif" height="18" width="2" border="0">
<a tabindex=‘-1′ href="javascript:void InsSm(‚<hr>‘)"><img src="images/hr.gif" width="20" alt="Vodorovná čára" height="20" border=0></a>
<a tabindex=‘-1′ href="javascript:void InsSm(‚<blink><marquee>zde bude běžící text</marquee></blink>‘)"><img src="images/marquee.gif" width="20" alt="Běžící text" height="20" border=0></a>
<a tabindex=‘-1′ href="javascript:void InsSm(‚<img src=http://…adresa obrázku v síti Internet…>‘)"><img src="images/image.gif" width="20" height="20" border=0 alt="Obrázek"></a>
<img src="images/spc.gif" height="18" width="2" border="0">
<a tabindex=‘-1′ href="javascript:void InsSm(‚<a href=mailto:…emailová adresa>text odkazu</a>‘)"><img src="images/mail.gif" width="20" height="20" border=0 alt="Vložit e-mail"></a>
<a tabindex=‘-1′ href="javascript:void InsSm(‚<a href=http://…adresa odkazu v síti Internet>text odkazu</a>‘)"><img src="images/hyperlink.gif" width="20" height="20" border=0 alt="Vložit odkaz"></a>
<br>
<textarea name="body" cols="46" rows="6" class="sform"></textarea>
<br> |
|
V prohlížečích, ve kterých DHTML editor nepracuje, je tak k dispozici náhradní řešení, které (byť nepříliš komfortně) umožňuje vkládat text formátovaný pomocí HTML značek. Tlačítka panelu nástrojů sice jen vkládají standardní HTML kód s nápovědou, ovšem i tak je to výrazně lepší, než vůbec nefunkční stránka s DHTML editorem, nebo jen čisté pole textarea. Například při klepnutí na tlačítko s popiskem "Vložit e-mail" se do editační části vloží text: <a href=mailto:…emailová adresa>text odkazu</a>. Předpokládáte-li méně duchaplné uživatele, můžete doplnit důkladnější nápovědu. Pak již bude i tento omezený editor snadno použitelný. Ještě doplňuji, že k funkci panelu nástrojů je nutná podpora JavaScriptu.
Kompletní aplikaci kompatibilního HTML editoru najdete zde.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
