DHTML editor – opravy starších textů a náhled

15. března 2003

•

Z předchozích článků znáte jakostní editor umožňující snadno připravit formátovaný text ve formuláři. V tomto pokračování rozšířím editor o možnost úprav již existujícího textu (např. opravy záznamu v databázi), náhled a nastavení barev pole editoru.

O DHTML editoru jsem psal již v článcích DHTML editor – snadná úprava HTML kódu ve formuláři a DHTML editor kompatibilní se všemi prohlížeči. Editor v tomto článku je upraven pro využívání superglobálních proměnných, jak je zavádí PHP 4.1+. Jako přídavek jsou doplněny funkce pro práci se schránkou, zarovnání textu, odebrání formátování a tisk. Jejich doplnění je analogické jako doplnění funkcí, které jsme se naučili v předchozích dílech a vychází z popisu příkazů na stránkách MSDN. Byla také vylepšena autodekce prohlížeče Opera, který se dovede maskovat jako IE, avšak editor v něm nepracuje. Oproti předchozím verzím byly odstraněny některé části, které odporují definici XHTML. Prohlédněte si ukázku.

Na počátku dnešního rozšíření nejprve doplníte vlastnost, která umožní editovat již hotové texty. Upravíte editor tak, aby byl také sám schopen pojmout a zobrazit údaje, které mu případně předá jiný skript nebo je máte předpřipravené např. z databáze do nějaké proměnné. Ideální je využít proměnnou $_POST[‚body‘], ve které editor sám odesílá metodou POST editovaný text. To se může hodit v případě, že editor bude součástí většího formuláře s více poli. Pokud po odeslání zjistíte, že některé povinné údaje nebyly vyplněny správně, zobrazíte uživateli formulář (editor) znovu, aby chybějící údaje opravil. Při editaci údaje v databázi musíme zajistit, aby byl editovaný obsah naplněn do proměnné $_POST[‚body‘].

Úprava "ne IE" části v souboru stded.php je velmi jednoduchá, a spočívá jen v přidání výpisu obsahu proměnné $_POST[‚body‘] do části textarea.

Úprava části DHTML editoru pro IE je složitější. Obsah proměnné $_POST[‚body‘] je potřeba vložit do editační části vloženého rámce editoru. To má smysl dělat pouze tehdy, pokud v proměnné $_POST[‚body‘] bude nějaký obsah – doplníte tedy ještě test obsahu této proměnné. Protože k předvyplnění pole editoru budete používat JavaScript, vyvstává zde problém s uvozovkami, které se mohou objevit v HTML kódu. Pokud byste je neošetřili přidáním zpětných lomítek, ihned by došlo k chybě při zpracování řetězce kódu v proměnné $_POST[‚body‘]. V php máte k dispozici funkci AddSlashes, která poslouží pro potřebnou úpravu kódu před jeho předáním JavaScriptu. Předvyplnění textu provedete funkcí, kterou budete aktivovat událostí onload okna editoru. Tuto novou funkci pojmenujete PreVBody a přidáte ji do podpůrného skriptu editoru v souboru enhed.js.

Doplnění vloženého rámce editoru v souboru enhed.php o test a případnou aktivaci funkce PreVBody:

Nová funkce PreVBody do souboru enhed.js:

function PreVBody(bdy){
frames.Editor.document.body.focus()
Editor.document.selection.createRange().pasteHTML(bdy)
// vložit zadaný řetězec do pole editoru
}

Nyní můžete použít editor i k opravám starších textů. Ještě zbývá doplnit funkci náhledu. K tlačítku pro odeslání přidáte tlačítko pro Náhled. Jeho stisknutím se bude aktivovat nová funkce PreView. Otevře se nové okno a v něm se zobrazí vzhled editovaného textu tak, jak bude vypadat po odeslání. Tlačítko je typu Button, aby nedošlo po stisku k odeslání formuláře, ale jen k aktivaci požadované funkce JavaScriptu.

Přidání tlačítka Náhled do editor.php:

<input type="Submit" value="Uložit" <?php echo (isset($enh)) ? "class=\"button\"" : "" ?> />
// stávající tlačítko pro odeslání
<input type="Button" value="Náhled" onclick="PreView()" <?php echo (isset($enh)) ? "class=\"button\"" : "" ?> />
// nové tlačítko pro náhled

Funkce Preview bude rozdílná pro DHTML editor (verze pro IE) a pro "ne IE" verzi. Protože se tak začíná zvětšovat potřebný kód pro "ne IE" verzi, rozhodl jsem se vyjmout potřebný JavaScript do zvláštního souboru stded.js (původně byl přímo v souboru editor.php).

Nový soubor stded.js s původní funkcí InsSm a novou funkcí PreView:

function InsSm(sm) {
document.form1.body.focus();
document.form1.body.value=document.form1.body.value+sm;
}
function PreView() {
prwin=window.open("stdedprw.htm","prew","width=600, height=440, directories=no, location=no, menubar=no, scrollbars=yes, status=no, titlebar=no, toolbar=no, resizable=yes");
// do nového okna zadaných vlastností otevřít soubor stdedprw.htm
}

Část editor.php po vyjmutí JavaScriptu pro "ne IE" verzi upravíte takto:

Potřebujete také soubor stdedprw.htm, který provede vlastní zobrazení náhledu. Jeho skript převezme obsah formulářového pole body a vloží ho do vlastního těla. Ve skriptu je i test, zda je odkud co převzít – pokud by někdo otevřel soubor sám (nikoli tlačítkem Náhled v editoru), došlo by k chybě. Obvyklým způsobem si podle potřeby upravíte barvy, případně font a vzhled stránky s náhledem.

<html><head><title>Náhled</title></head>
<body style=“background-color:#eeeeff“>
<div style=“color:#000000; font-size:0.8em; font-family:Arial,Verdana,Tahoma,Helvetica,san-serif“>
// zde nastavíte barvy pozadí, odkazů ap.
<script type="text/javascript">
<!–
if (window.opener) {
// otestovat, zda existuje nadřízené okno
prewHTML=opener.document.form1.body.value;
// vzít obsah body (textarea) z formuláře nadřízeného okna
document.write(prewHTML);
// vložit do těla dokumentu
window.focus();
// přenést okno do popředí
}
// –>
</script>
</div>
</body>
</html>

Pro doplnění funkce náhledu do DHTML editoru už vám zbývá jen doplnit funkci PreView také do souboru enhed.js. Soubor enhedsup.htm využijete jako podpůrný (bude se otvírat do nového okna s náhledem). Má nulovou délku (je prázdný) a k funkci editoru byste ho měli mít už z dřívějška.

function PreView() {
if (xmode != "html")
// pokud je v editoru aktivní režim HTML, přepnout pro náhled vizuální zobrazení
prewHTML=frames.Editor.document.body.innerText;
else
prewHTML=frames.Editor.document.body.innerHTML;
prwin=window.open("enhedsup.htm","prew","width=600, height=440, directories=no, location=no, menubar=no, scrollbars=yes, status=no, titlebar=no, toolbar=no, resizable=yes");
// otevřít prázdný soubor do nového okna daných vlastností
prwin.document.body.insertAdjacentHTML("BeforeEnd",prewHTML);
// vložit kód editovaného textu
prwin.document.title=’Náhled‘;
// nastavit titulek okna Náhledu
prwin.document.body.style.background=’lightblue‘;
// nastavit pozadí okna náhledu
prwin.document.body.style.color=’blue‘;
// nastavit výchozí barvu písma náhledu
prwin.focus();
// přenést okno do popředí
}

Nyní je v editoru funkční tlačítko pro náhled. Na závěr zbývá ještě doplnit zmiňované nastavení výchozích barev editoru. Tyto barvy nemají žádný vliv na odesílaný kód, jde skutečně jen o vzhled při editaci. Popis "ne IE" verze vynechávám, jde vpodstatě jen o nastavení stylu pole textarea, které je účinné jen v některých prohlížečích – přesto ho doporučuji provést. Pro nastavení barev okna DHTML editoru si vytvoříme zvláštní funkci do souboru enhed.js. Tuto funkci je třeba aktivovat až po kompletní inicializaci editoru, jinak může dojít k chybě – využijete události onload přímo v souboru enhed.js.

function EdStyle() {
frames.Editor.document.body.style.background=’lightblue‘;
// barva pozadí editoru
frames.Editor.document.body.style.color=’blue‘;
// výchozí barva písma editoru
}
onload=EdStyle;
// nastavit aktivaci po inicializaci editoru

Nakonec ještě popis vylepšení autodetekce prohlížeče v souboru editor.php:

<?php
if (($_GET[‚visual‘]!=’no‘) && ERegI(‚MSIE‘,$_SERVER[‚HTTP_USER_AGENT‘]) && !ERegI(‚Mac‘,$_SERVER[‚HTTP_USER_AGENT‘]) && !ERegI(‚Opera‘,$_SERVER[‚HTTP_USER_AGENT‘]) || ($_GET[‚visual‘]==’yes‘))
{
$enh=1;
?>
.. //původní část editoru
<?php if (isset($enh)) { ?>
<a href="editor.php?visual=no">Standardní editor</a>
<?php } else { ?>
<a href=“editor.php?visual=yes“ title=“Vylepšený editor (nemusí pracovat správnì ve Vašem prohlížeči)“>Vylepšený editor</a>
<? } ?>

Do rozhodovacího výrazu bylo přidáno testování, zda se řetězci předáveného prohlížečem nevyskytuje slovo Opera, pokud ano, vylepšený editor se nespustí. Navíc přibyl ještě parametr visual, kterým můžeme vnutit aktivaci vylepšeného editoru (hodnotou yes) nebo naopak potlačit (hodnotou no). Tento parametr je možné předávat rovnou při volání editoru, jak vidět z doplňku na konci části editor.php, kde je generován odkaz na vylepšenou nebo standardní verzi editoru v závislosti na tom, která verze je právě aktivní (viz ukázka).

Kompletní aplikaci včetně obrázků si můžete stáhnout.