interval.cz

DHTML editor - kompatibilní se všemi prohlížeči

10. 01. 2002 | Pavel Růžička | JavaScript a Ajax | Komentáře: 0

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.


Další aktuální články na interval.cz

Tematicky související články

Dejte vědět i ostatním o článku

Diskuse (počet komentářů: 0)

Buďte prvním návštěvníkem, který přidá nový komentář.

Přidat nový komentář

Jméno a e-mail jsou nepovinné. Příspěvky obsahující odkaz jsou moderovány.

Reklama

Syndikace

hledáme nové autory | redakce interval.cz | reklama na interval.cz

© ZONER software, a.s., všechna práva vyhrazena. Hosting zajišťuje CZECHIA.COM. SSL certifikáty pro domény. Powered by WordPress.