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.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *