O webu
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>