Jak vytvořit WYSIWYG editor

Kromě toho, že lze použít již hotové komplexní editory jako.

… je možné si vlastní základní editor s pár funkcemi nikterak obtížně vytvořit. V situaci, kdy chceme jen lehce vylepšit obyčejnou <textarea>, to může dávat smysl.

Jak na to

Základem může být <iframe> se zapnutým designMode. Do kterého, kromě toho, že můžeme psát, lze přidávat různé příkazy pomocí execCommand.

Poslední věc je synchronisace obsahu editoru se skutečným formulářovým polem. Obsah získáme pomocí vlastnosti innerHTML. Tuto hodnotu poté stačí při stisknutí odesílacího tlačítka vložit do skutečného formuláře a odeslat jej klasickou cestou. Anebo rovnou formulář odesílat AJAXem.

Takto získaný obsah je pochopitelně potenciálně risikový, takže je nezbytné provést vyčistění.

Budeme-li takový editor používat pro editaci, stačí k tomu určené HTML vypsat ve skriptu, který se připojí jako src do <iframe>.

Ukázka jednoduchého editoru

HTML kód

<iframe id="editor" class="editor" frameborder="0"></iframe>

JS kód

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

function format(akce) {
    iframe.contentWindow.focus();
    editor.execCommand(akce, false, null);
}
</script>

Použití ovládacích tlačítek

<button onclick="format('bold')">Tučně</button>

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Pročištění HTML kódu

Pročištění a opravení „prasáckého“ HTML

Jak z WYSIWYG editorů (jako třeba Word, starší TinyMCE/CKEditor) vytvořit rozumný a sémantický HTML kód.

Detekce zapnutého JavaScriptu

Zapnutý a vypnutý JavaScript

Jak na webové stránce detekovat zapnuté nebo vypnuté skriptování.

CSS vyhledávání a filtrování

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

Plynulý přesun focusu

Plynulý přesun focusu

Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.

Označení textu kliknutím

Označení kódu nebo textu po kliknutí

Jak označit text nebo zdrojový kód jedním kliknutím. Je to vůbec rozumné?

Komentáře