JavaScript  »  Articoli  »  Effetti e controlli Javascript 

L'introduzione di piattaforme per la gestione di contenuti in modo automatizzato (CMS), dai blog ai siti aziendali, ha fatto nascere l'esigenza di un controllo più creativo del contenuto stesso da parte dei content manager che spesso non hanno conoscenze tecniche tali da permettere loro di applicare formattazioni (più o meno complesse) sul testo a cui stanno lavorando.

Nasce da questa esigenza il filone degli editor visuali conosciuti anche come editor WYSIWYG (acronimo di "What You See Is What You Get", quello che vedi è quello che ottieni), un concetto introdotto con le prime versioni visuali degli editor di testo tradizionali (Writer o Word per intenderci). Allo stesso modo e a partire da versioni piu mature dei primi browser, tutte le piattoforme per la navigazione sul web hanno messo a disposizione degli sviluppatori una serie di strumenti per creare editor WYSIWYG all'interno delle pagine web sfruttando Javascript. Strumenti che nel tempo si sono moltiplicati di pari passo con le nuove tecnologie introdotte (Flash, applet Java o controlli ActiveX) e che forniscono lo stesso risultato: semplificare la vita a chi si deve occupare di formattare testo sul web.

Scopo di questo articolo è la creazione di un semplice editor WYSIWYG cross browser, per introdurre le basi delle tecnologie Javascript a disposizione. Il codice che andremo man mano creando è stato provato con Internet Explorer (dalla versione 5.5 in su), Firefox (versione 2) e Camino (versione 1.04), Opera (versione 9.2) e Safari (versione 2).

La base è sempre diversa

Come di norma, Microsoft e Mozilla hanno proceduto su strade diverse: per Internet Explorer il programmatore ha a disposizione il controllo MSHTML mentre per Firefox, Safari ed Opera (che comunque meriterebbe un discorso a parte, visto che questo browser supporta anche una proprietà peculiare di MSHTML) il controllo è Midas. Il solito accorgimento per una soluzione cross-browser è abbastanza semplice e indolore.

Ma procediamo con ordine e supponiamo che si voglia usare un iframe come foglio di lavoro e a cui assoceremo l'id editArea. Il browser deve "capire" che questa sarà l'area dove andremo a creare il testo formattato grazie al nostro editor e per farlo occorrerà settare la proprietà designMode su "on". Ed è qui che MSHTML e Midas differiscono: infatti, nonostante la proprietà abbia lo stesso nome, in entrambi i controlli, le modalità per accedervi sono leggermente diverse:

• Mozilla: document.getElementById("editArea").contentDocument.designMode="on";
• Internet Explorer: document.editArea.contentDocument.designMode="on";

Per completezza, occorre aggiungere che Internet Explorer (ed Opera, almeno dalla versione 9) può attivare l'editing su un elemento della pagina HTML (escluso il tag iframe), anche utilizzando l'attributo contentEditable.

Siamo ora in grado di cliccare sul nostro iframe e cominciare a scriverci all'interno. Da qui in avanti inoltre, la compatibilità tra i due sistemi è pressoché totale. Quindi applicare un effetto sul testo che stiamo editando all'interno del nostro iframe, si traduce nell'applicare la proprietà execCommand in questo modo:

Mozilla:

Internet Explorer:

Altri articoli

Altre guide

Altre newsletter