Vlastní jednoduchý WYSIWYG editor

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

• TinyMCE (třeba i se souborovým managerem)
• CKEditor

… 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.

• Seznam a kompatibilita jednotlivých akcí

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>