WIP – wysiwyg in place

wip.gifL’esperimento che vi presento oggi è di tipo ‘sillogistico’, e prende il nome di WIP – WYSIWYG in place, ovvero un edit-in-place AJAX con utilizzo di un editor WYSIWYG.
Questa è la demo, e quella che segue è la spiegazione della frase sopra:

Cosa sono WYSIWYG, Edit-in-place e WIP?

WYSIWYG (pronuncia: “wizzy-wig”) è l’ acronimo di “What You See Is What You Get” e corrisponde a dare all’ utente l’esatta percezione, durante la creazione di un documento, di quello che verrà stampato su schermo o su carta. (Esempi di WYSIWYG sono gli editor di testo come Word , PowerPoint o i programmi di grafica come Photoshop e Flash.)
Nel web la necessità di creare e modificare velocemente e senza alcune conoscenze un codice HTML ha visto la nascita delle cosiddette Rich TextArea, delle textarea sormontate da una barra con dei bottoni che le rende simili ad un normale editor. (Scrivendo del testo, selezionandolo e cliccando su uno dei bottoni è possibile inserire il testo all’interno di un particolare tag HTML: se ad esempio vogliamo che una porzione di testo scritto nella rich textarea sia in grassetto, occorre selezionare il testo e cliccare il tasto contrassegnato da una B (o una G), che inserirà il testo all’interno del tag <strong>).
I WYSIWYG non sono mai stati ben accetti sotto il punto di vista degli standard web, perchè colpevoli di creare codice non well formed, non consentire la separazione tra struttura e presentazione (un tag <FONT face=Arial bgcolor=#000000> ne è un esempio) o di funzionare esclusivamente con Explorer. Negli ultimi sono nati così alcuni WYSIWYG, di cui alcuni open-source, che hanno saputo ben riparare agli errori dei predecessori: tra questi XINHA (acronimo di ‘XINHA is not HTMLArea’, trattandosi del figlio dell’ottimo HTMLArea,il cui sviluppo bloccato qualche anno fa è stato rimesso in piedi da una comunità open-source), TinyMCE (l’editor installato di default su WordPress) ed FCK Editor.
Un’anno fa ho inoltre segnalato WYM, un editor “What You See Is What You Mean”, che si propone di guidare l’utente nella strutturazione del documento lasciando da parte la visualizzazione finale. Secondo il mio punto di vista quest’ultimo si tratta di uno strumento che (ora) vedo troppo legato a noi che lavoriamo con il codice più che ad un utente alle prime armi abituato all’editazione in stile Word, il tipo di utente a cui un WYSIWYG sarebbe indirizzato. L’ideale sarebbe personalizzare l’editor in modo che l’utente sia obbligato a modificare esclusivamente i tag legati alla struttura di una pagina, in modo che il codice creato sia valido (mi riferisco all’XHTML) oltre che well formed, eliminando ad esempio la modifica della grandezza e del tipo di carattere lasciandone la definizione come di norma al CSS.
Per eventuali modifiche XINHA, TinyMCE e FCK consentono di passare ad una “modalità codice”, utile ad esempio per aggiungere uno span o l’id ad un paragrafo.

L’Edit-in-place (o in-place editing) è invece una tecnica javascript che consente di rendere un testo direttamente editabile nella pagina in cui si trova: cliccando su un particolare testo quest’ultimo viene inserito in una textarea della stessa grandezza, ed eventuali modifiche vengono inviate al server dopo il click di un bottone di salvataggio. Alcune delle implementazioni: il patriarca Editable Content di Tim Taylor, Edit text di Peter Paul Kock, Ajax in place editor in Script.aculo.us, AJAX Edit in place di Joseph Scott.
L’ EIP si dimostra così utile per semplici modifiche ‘al volo’ che evitano il passaggio dalla classica sezione di amministrazione.

Il WIP nasce, come vi dicevo nel primo paragrafo, da un ragionamento simile ad un sillogismo.
L’azione che descrive l’ editing-in-place può probabilmente essere quella di:

Modify any text with a <textarea>

L’editor HTMLArea aveva come slogan ufficiale:

Turn any <textarea> in a WYSIWYG Editor

Quindi è possibile:

Modify any text with a WYSIWYG Editor

Torna su

Come posso utilizzarlo?

Il WIP è costituito da un unico file javascript che consente di ottenere un edit-in-place sul testo presente in un html utilizzando un editor WYSIWYG e di comunicare le modifiche ad un server.
L’editor con cui ho testato lo script è XINHA, per cui la prima cosa da fare è scaricare l’editor da questa pagina e rinominare la cartella “xinha-nightly” in “xinha”.
Il pacchetto d’esempio wip.zip (scaricabile da qui), contiene lo script wipxinha.js, un HTML+CSS di esempio ed un file send.php che simulerà il lato server.
Tutti i file dovranno trovarsi su un webserver, e la cartella “xinha” dovrà essere inserita all’interno della cartella “wip” (quindi, se testate sul vostro PC il file HTML dovrà trovarsi all’indirizzo “http://localhost/wip/wipxinha.html”, mentre l’editor all’indirizzo “http://localhost/wip/xinha/”).

L’HTML wipxinha.html contiene il seguente codice javascript:

 <script type="text/javascript">
     _editor_url  = "xinha";
     _editor_lang = "en";
     _editor_skin = "green-look";
     </script>
     <script type="text/javascript" src="xinha/htmlarea.js"></script>
     <script type="text/javascript" src="wipxinha.js"></script>

La prima istruzione indica il percorso dell’editor, la seconda la lingua di default di questo, la terza lo stile della toolbar; le ultime due invece richiameranno lo script principale dell’editor ed il WIP.
All’interno dell’HTML saranno modificabili tutti i div che hanno classe “edit”: al passaggio del mouse i div cambieranno colore, mentre con il doppio click comparirà un editor della stessa grandezza del div. Tramite un click sul bottone “salva” il testo riprenderà il formato originario con le modifiche fatte, mentre con un click sul bottone “cancel” ovviamente le modifiche non verranno salvate.

Torna su

Come funziona?

L’oggetto javascript WIP contiene al suo interno sette funzioni: due di inizializzazione, una per l’inserimento del testo in una textarea, una per la trasformazione da textarea ad editor, due per l’invio dei dati al server tramite XMLHttpRequest, una di reset.

Rendere una porzione di testo editabile
Come detto prima, affinchè una porzione di testo sia editabile questa deve essere inserita in un div con classe predefinita: di default il nome della classe è ‘edit’, ma può essere modificata tramite la variabile globale editableClass. I div potranno contenere altri elementi come p, span o altri div (pensate ai vari <div class="post"> nel tema di default di WordPress).


   <div class="edit">
     <p id="test">Paragrafo da editare</p>
     <p id="test2">Altro paragrafo da editare</p>
   </div>

La prima funzione selezionerà tutti questi div presenti nella pagina:

init : function() { 
    var editElements = [];
    var els = document.getElementsByTagName('*');
    var elsLen = els.length;
    var patternEdit = new RegExp("(^|\\s)" + wip.editableClass + "(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
	if ( patternEdit.test(els[i].className) ) {	
	editElements[j++] = els[i]; 
    } 	
    }		
    for(var i = 0; editel = editElements[i]; i++) { 
	wip.prepare(editel);
    }
    } ,

ovvero una versione modificata di un classico getElementsByClass.
Per ogni elemento verrà chiamata una versione prepare con cui all'evento mouseover il div diventerà evidenziato con un colore modificabile tramite la variabile hoverColor; al mouseout il div riprenderà il colore originario (precedentemente salvato utilizzando una funzione esterna getCSSProp); al doppio click, invece, verrà chiamata la funzione che creerà la textarea.

prepare : function(editel) {
	editel.onmouseover = function() {
           bg = getCSSProp(this, "background-color"); 
	   this.style.backgroundColor = wip.hoverColor;
	}
	editel.onmouseout = function() { 
           this.style.backgroundColor = bg;
	}
		editel.ondblclick = function() {wip.edit(this);}
	},

Nell'esempio uno una demo con le funzioni appena viste, nell'esempio due invece un effetto dissolvenza (simile all'ultima demo di scrip.aculo.us) con l'utilizzo della Fade Anything Technique.

Inserire il testo in una textarea
La funzione edit(elem), che non riporto per esteso ma trovate nel terzo esempio, salverà il testo all'interno del div selezionato in una variabile text, memorizzando le proprietà associate al testo tramite la funzione getCSSProp.
Attraverso il DOM sostituirà quindi il div con un form che avrà un id con valore: 1) l'id del div se l'id era presente; 2)uno Unix timestamp con la data al momento del doppio click.
All'interno del form verranno creati: una textarea con all'interno il text salvato in precedenza, un bottone "Save" il cui click scatenerà la funzione send(id, text) ed un bottone "Cancel" collegato invece alla funzione cancel(id, text).
La funzione send invierà il contenuto del testo modificato al server, simulato dal send.php: in questo esempio le istruzioni all'interno del file restituiscono solamente il testo inviato, per cui tutte le modifiche verranno perse al refresh delle pagina; normalmente, invece, un file di questo tipo (o un file ad esso collegato) dovrebbe avere anche il compito di scrivere le modifiche su database.

Sostituire la textarea con l'editor WYSIWYG
XINHA permette di indicare in un file esterno (in questo caso attraverso un paio di funzioni inserite nel nostro javascript) quali textarea saranno sostituite dagli editor, e personalizzare questi ultimi attraverso alcune istruzioni descritte in questa pagina.
L'array xinha_editors conterrà al suo interno i name delle textarea rimpiazzabili con XINHA, così le ultime due istruzioni della funzione edit:


       wip.xinha_editors.push(parid);
       this.startXINHA();

inseriranno nell'array il name, uguale all'id del form, della textarea appena creata attraverso la funzione edit facendo comparire l'editor.

Nella funzione startXINHA() verranno settate le dimensioni dell'editor, uguali a quelle della textarea, e selezionati in due array i bottoni (array cinha_config.toolbar) ed i plugin[1] da inserire nella toolbar.
Come vi dicevo prima, ho inserito solamente i bottoni che modificano la struttura della HTML (bold, italic, ul etc.) ed un plugin che inserisce un bottone per la mappa dei caratteri.

Lo script è stato testato su Firefox ed Internet Explorer, mentre su Opera l'editor XINHA non è ancora supportato.
Ringrazio per le consulenze magister Skid "debugger umano" X, e vi invito come sempre a segnalare eventuali problemi [2]), soprattutto alla crew che opera sull' (a me) oscuro Safari.
Prossimamente tenterò un qualcosa di simile con TinyMCE, che consente di utilizzare uno script di configurazione, mentre dovrei ancora dare un'occhiata a FCK e WYM.

Torna su

Dove posso scaricare il tutto?

Torna su

[1] Ci sono diversi plugin disponibili, più o meno utili a seconda delle esigenze. Uno di questi, InsertSmiley, consente l'inserimento di qualche centinaio di emoticon; sarà che non sono un grande frequentatore di forum, ma non avevo mai visto un'emoticon che rappresentasse così tragicamente la vita di coppia:
0567.gif

[2]Dopotutto mi sono avvalso della regola di Jason Kottke:

The markup is not as semantically clean as it could be, but one of the important lessons I've learned over the years is that a 90% product today is better than a 99% product three months from now.

Altri esperimenti javascript:
An SVG test: change the CS logo colours
Text Changer
Tiny Scrolling
Horizontal Tiny Scrolling
Trackrati
Technorati’s BlogInfo
Is it correct?

59 comments:

Lascia un commento


Archivio categorie

Here's the months' archive. The time is now, remember.