Iframe jako WYSIWYG editor

V dnešní době není formátování textu pomocí značek v módě. Místo toho se každý snaží ohromit "cool" WYSIWYG editorem. Tedy editorem, který ihned zobrazuje výsledek naší editace.

Na internetu je k dostání nepřeberné množství kvalitních editorů se spoustou doplňků a funkcí. Ty jsou ale většinou dost objemné a pro menší projekty tak nevyhovující. Co si tedy udělat editor přesně podle gusta? Pomoci nám může vlastnost designMode (EN). Ta u elementu iframe povolí editování textu.

Na iframe s povoleným designMode jde pomocí JavaScriptu vyvolat příkaz execCommand (EN). Pro ukázku si nyní vytvoříme jednoduchý editor, který bude podporovat tři funkce - tučný text, kurzívu a škrtnutý text.

<div id="ovladani">
    <button onclick="prikaz('bold')">Tučně</button>
    <button onclick="prikaz('italic')">Kurzíva</button>
    <button onclick="prikaz('strikeThrough')">Přeškrtnout</button>
</div>
<iframe id="editor" width="200" height="200"></iframe>

Nyní vytvoříme JavaScriptový kód. Nejdříve nastavíme designMode.

var iframe;
var editor;
window.onload = function() {
    iframe = document.getElementById("editor");
    editor = iframe.contentWindow.document;
    editor.designMode = "on";
}

Přidáme funkčnost jednotlivých tlačítek:

function prikaz(jmeno) {
    editor.execCommand(jmeno, false, null);
}

Živá ukázka

Výsledný HTML kód z iframe získáme třeba pomocí vlastnosti innerHTML:

function zobrazHTML() {
    return editor.body.innerHTML;
}

designMode

Tato vlastnost může obsahovat dvě řetězcové hodnoty: on - zapne editaci, nebo off - vypne editaci.

editor.designMode = "on";

execCommand

execCommand požaduje tři parametry.

  1. Jméno příkazu jako řetězec. Seznam je možný najít třeba zde (EN)
  2. Boolean určující zda zobrazit uživatelské rozhraní. Defaultně vepište false
  3. Dodatečný parametr pro použitou funkci. Pokud není vyžadován, zadejte null
editor.execCommand(jmeno, false, null);

Poznámka: Pokud používáte knihovnu jQuery, nejspíš se vám bude hodit tento plugin. Přidá tři nové funkce pro jednodušší práci - execCommand, contentDocument a designMode.

Jde editovat i jiné elementy než iframe?

Krom iframe, jde editovat i ostatní HTML elementy. Postup je trochu odlišný:

<textarea contentEditable="true" width="200" height="200">
    I textarea se umí proměnit ve WYSIWYG editor!
</textarea>

Klíčem je právě atribut contentEditable (EN). Na takto označený element jde volat execCommand stejně jako na iframe.

Tabletizer – Generování HTML tabulek z PHP polí

Při výpisu objemných PHP polí byli mými nejlepšími společníky funkce print_r() a var_dump(). Výpis z nich se navíc musí dále obalit přinejmenším do tagů pre, aby výstup byl alespoň trochu čitelný. Navíc postup, který jsem k tomu používal:

echo "<pre>";print_r($promenna);echo "<pre>";

se mi v kódu vůbec nelíbil. Proto jsem si vytvořil třídu, která formátování obstará za mě. Tak vznikla třída Tabletizer. Díky ní je vytvoření pěkné tabulky otázkou pár řádků:

$table = new Tabletizer();
echo $table->fromArray($promenna);

A to je vše. Výstupem může být třeba i takováto tabulka.

Výstup v podobě tabulky

Díky tomu, že hlavní tabulce je přiřazena třída .tabletizer, je velice jednoduché vytvořit si jakýkoli styl, který sedí do okolního "prostředí". Vzhled tabulky si je možné jakkoli přizpůsobit.

Odkaz ke stažení, spolu s návodem a seznamem změn je možné najít na této stránce.

Menu nad flash videem

V poslední době jsem se setkal se zajímavým problémem. V diskusi žadatel uváděl, že na stránce má dynamické menu vytvořené pomocí JavaScriptu. Na stejné stránce bylo umístěno i video z Youtube.com. Problém nastal, pokud jednotlivé položky menu přesáhly nad video. Jednotlivé položky pak po najetí myší mizely.

Pokud byste se s podobným problémem setkali i vy, můžete použít následující dvě řešení. V obou případech se bude menu zobrazovat korektně a nebude mizet. Prvním řešením je uvedení

?wmode=opaque

za adresu videa.

Kód pro vložení videa pak bude vypadat následovně:

<iframe width="420" height="315" src="http://www.youtube.com/embed/Zhawgd0REhA?wmode=opaque" frameborder="0" allowfullscreen></iframe>

Druhou možností, je použít starý způsob vkládání videa pomocí tagu object, do kterého vložíte param s nastavením wmode (2. řádek).

<object width="420" height="315">
	<param name="wmode" value="opaque">
	<param name="movie" value="http://www.youtube.com/v/Zhawgd0REhA?version=3&amp;hl=cs_CZ">
	<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always">
	<embed src="http://www.youtube.com/v/Zhawgd0REhA?version=3&amp;hl=cs_CZ" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

Pokud by někoho zajímalo, co wmode způsobuje, doporučuji si přečíst celkem detailní popis na této anglické stránce. Pro ty, kteří nechtějí marnit čas, zkusím uvést krátké shrnutí. wmode určuje, jak bude flash do stránky vykreslen. V základním nastavení (wmode=window) se flash video vykresluje do vlastního "okna". To je následně umístěno tam, kde se má v prohlížeči video přehrát. Takové okno je samozřejmě nad veškerým obsahem stránky. Hodnoty wmode=opaque a wmode=transparent naopak vykreslují přímo do okna prohlížeče.

Poznámka:
Pokud ve videu již je nějaký parametr, nebude tento způsob fungovat. Otazník je nutné nahradit &.

A ještě jedna rada na konec. Na většině stránek se slepě doporučuje používání wmode=transparent. Není to špatně a problém to vyřeší. Může to ale zpomalit přehrávání videa. V tomto módu se totiž pozadí stránky bude zobrazovat v průhledných částech videa. Stránka reálně "vidět" skrz video nebude, protože nemá žádné průhledné části. Flash se o to ale stejně bude snažit. To může zpomalit vykreslování.