giovedì 20 marzo 2008

Editor WYSISYG

In questo post vi volevo parlare di come si fa a creare un semplice editor WYSIWYG da inserire all'interno di un'applicazione web.

Premetto che attulmente l'editor funziona correttamente solo in Mozilla Firefox, successivamente conto di postare un aggiornamento per spiegare come adattarne il funzionamento anche con gli altri browser.

Innanzitutto vediamo cosa significa editor WYSIWYG
diciamo che WYSIWYG è l'acronimo per What You See Is What You Get ossia quello che si vede mentre si scrive un testo è esattamente ciò che apparirà agli utenti quando lo andranno a visualizzare. Per spiegarmi meglio faccio l'esempio di una wiki: generalmente quando inseriamo del testo per modificare o aggiungere un nuovo articolo dobbiamo utilizzare una serie di tag di apertura e chiusura per dire all'applicazione che quella porzione di testo dovrà essere visualizzata all'utente con una certa formattazione (in grassetto piuttosto che di un certo colore e così via); se invece, per scrivere l'articolo, si utilizzasse un editor WYSIWYG avremmo immediatamente la percezione di ciò che vedrà l'utente.

Vediamo ora come possiamo fare per realizzarlo
innanzitutto all'interno della pagina in cui vogliamo visualizzare il nostro editor dobbiamo inserire un iframe

<iframe id="editor" onload="loadEditor();"></iframe>

l'iframe appena creato deve avere l'attributo onload settato in modo da richiamare una funzione che scriveremo all'interno di un javascript che permetta di abilitare la possibilità di modificare il contenuto dell'iframe

<script type="text/javascript">
function loadEditor() {
iframe=document.getElementById('editor').contentDocument;
iframe.designMode='On';
}
</script>

a questo punto all'interno dell'iframe vediamo che possiamo inserire del testo :)

Ora però vogliamo aggiungere dei comandi che permettano di aggiungere delle formattazioni al testo;
Proviamo ad esempio ad aggiungere un comando che metta in grassetto il testo selezionato
Per farlo è sufficiente inserire sopra l'iframe un tag div a cui associamo l'esecuzione del comando di grassetto
<div id="bold" class="edit_button"
onclick="execCmd('bold',false,null);">
<img src="images/editor_icons/text_bold.png"
alt="Grassetto" title=Grassetto />
</div>

Quindi inseriamo all'interno del javascript creato precedentemente la funzione execCmd che riceve come parametri il comando da eseguire, un booleano che indica se visualizzare o meno un'interfaccia di supporto (alcuni comandi la prevedono) e un attributo da passare al comando (anche questo dipende dal tipo di comando)
function execCmd(commandID,showUI,value) {
document.getElementById('iframe').contentWindow.focus();
iframe.execCommand(commandID,showUI,value);
}

Per un elenco di comandi che è possibile eseguire vedere la pagina http://developer.mozilla.org/en/docs/Midas

Se avete dubbi o suggerimenti non esitate a postarli nei commenti, sarò lieto di rispondervi al più presto

Un video di quanto descritto sopra: