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.

Instalace SyntaxHighlighter: XregExp not defined

Pokud jste při instalaci zvýrazňovače kódů pro webové stránky stejně jako já narazili na chybu: XregExp not defined, je pravděpodobně na vině špatná dokumentace. V ní se sice uvádí, že máte použít soubor shCore.js, ale již se nezmiňují, kde máte tyto soubory vzít. Po rychlém prohledání adresářů a jejich obsahu pravděpodobně vložíte ten z /src. Bohužel, to je kámen úrazu. Ve složce /scripts se totiž soubor shCore.js nachází také.

Pro vyřešení tohoto problému stačí do stránky vložit soubor shCore.js ze složky /scripts.