Risparmia il 20% su tutti i corsi

Iscriviti con il codice sconto 1POSTOALSOLE, ma attenzione: può essere usato solo 50 volte

Approfittane subito
Home
Pagine HTML editabili secondo Microsoft

11 Luglio 2001

Pagine HTML editabili secondo Microsoft

di

Dalla versione 5.5 il browser Internet Explorer di Microsoft supporta, all'interno delle pagine HTML, alcune nuove proprietà per gli oggetti, i quali diventano modificabili dall'utente direttamente all'interno del browser.

Tale comportamento non viene realizzato attraverso l’utilizzo di script o codice DHTML, ma semplicemente specializzando alcuni oggetti, in particolare il <DIV> e lo <SPAN>, per fare in modo che rispondano all’intervento dell’utente comportandosi in maniera del tutto simile rispetto ad un editor di testi, ad esempio Wordpad oppure Microsoft Word.

Un oggetto di questo tipo permette di ottenere formattazioni complesse, infatti il suo contenuto può essere modificato in termini di:

– formattazione del testo

  • tipo carattere (“Times Roman”,”Arial”, ecc.)
  • dimensione
  • stile e decoration (grassetto, corsivo, sottolineato, barrato, apice, pedice)
  • colore
  • colore di sfondo

– formattazione di paragrafo

  • gestione rientri
  • allineamento
  • direzione del testo
  • testo in verticale

– elenchi (con qualsiasi numero di livelli)

  • elenco numerato
  • elenco puntato

– gestione delle selezioni

  • selezione testo con il mouse
  • selezione parola con doppio click
  • selezione paragrafo con triplo click
  • selezione da tastiera

– editing di base per HTML

  • inserimento controlli
  • inserimento Iframes
  • inserimento immagini
  • inserimento Marquees
  • inserimento linee orizzontali
  • inserimento link

– rilevazione automatica di link e bookmark
– livelli di undo / redo illimitati
– inserimento del testo in modalità insert o overwrite
– supporto a tutti gli acceleratori di tastiera standard
– supporto alle operazioni di cut/copy/paste con mantenimento della formattazione
– mantenimento della formattazione nelle righe vuote
– posizionamento assoluto degli oggetti
– gestione completa del ridimensionamento degli oggetti
– selezioni multiple
– supporto all’operazione di paste da altre applicazioni (ad es. è possibile inserire una tabella creata in Microsoft Word).

Per rendere editabile un oggetto è sufficiente utilizzare la proprietà contentEditable. E’ possibile inoltre verificare se un oggetto è settato come editabile interrogando la proprietà isContentEditable.

La sintassi è la seguente:

object.contentEditable [= sEditable];

dove sEditable può avere i seguenti valori:

  • inherit: valore di default, l’oggetto eredita il valore della proprietà dal suo parent
  • false: l’oggetto non può essere editato
  • true: l’oggetto può essere editato dall’utente

Ecco un esempio di codice che utilizza la proprietà contentEditable:

<DIV id="oDiv" contentEditable="true"> 
Questa zona della pagina è editabile
</DIV>

Ed ecco un esempio di funzione Javascript che cambia lo stato della proprietà:

<SCRIPT LANGUAGE="JavaScript">
<!--

function cambiaStatoEditable() {
if (oDiv.isContentEditable == true)
{ oDiv.contentEditable = false }
else
{ oDiv.contentEditable = true }
}

// -->
</SCRIPT>

Collegando tale funzione all’evento onclick di un oggetto (ad esempio un bottone) è possibile cambiare dinamicamente la sua proprietà.

<BUTTON onclick="cambiaStatoEditable ()">Cambia stato editing</BUTTON>

Esecuzione di comandi di editing

Per applicare le varie formattazioni al testo, si utilizza il metodo document.execCommand() passandogli come parametro una stringa corrispondente all’ID del comando.

Per far diventare grassetto la selezione attuale alla pressione di un bottone, ad esempio, si utilizza il codice seguente:

<BUTTON UNSELECTABLE TITLE="Bold"
onclick='if (oDiv.isContentEditable==true) document.execCommand("Bold");
oDiv.focus();' >
<B>Bold</B>
</BUTTON>

Utilizzi pratici: editor HTML

Per capire come possa essere utilizzato un oggetto di questo tipo è necessario aggiungere qualche elemento tecnico.

Gli oggetti <DIV> e <SPAN> possiedono la proprietà innerHtml che contiene in ogni istante il codice HTML necessario per creare il codice formattato che viene mostrato all’utente.

Se si legge questo HTML e lo si inserisce, ad esempio, all’interno di un componente <TEXTAREA>, otteniamo lo stesso risultato che otterremmo se l’utente avesse scritto codice HTML nella TEXTAREA stessa.
In pratica siamo in grado di fornire all’utente un buon editor HTML senza scrivere una riga di codice se non la gestione della proprietà contentEditable.

Ecco un esempio di codice che realizza quanto descritto.

<BUTTON UNSELECTABLE
TITLE="Genera codice HTML"
onclick="oTextarea.value=oDiv.innerHTML;oTextarea.focus();"> 

Genera HTML

</BUTTON>

Questo codice genera, nella pagina HTML, un pulsante che all’evento onclick legge la proprietà innerHtml dell’oggetto <DIV>, quello che l’utente può editare, e lo associa alla proprietà value dell’oggetto <TEXTAREA>.
In altre parole prende il codice HTML necessario a produrre un output equivalente a quello che l’utente vede nel <DIV>, e che è editabile, e lo inserisce all’interno di un oggetto <TEXTAREA>.
Se immaginiamo di avere un oggetto <TEXTAREA> nascosto, quindi, è possibile passare da una pagina all’altra il testo “arricchito” con i tag HTML utilizzando un semplice form.
La pagina di destinazione, quella nella action del form, riceve il codice html come parametro della chiamata http, quindi può gestirlo con i metodi tradizionali, ad esempio scrivendolo in un database.
Questo metodo permette quindi di fornire all’utente uno strumento di publishing per un sito scrivendo pochissimo codice, semplicemente utilizzando oggetti già compresi nell’architettura Microsoft.
L’unico vincolo è l’utilizzo, da parte dell’utente, del browser Explorer 5.5 o superiore.

Utilizzi pratici: salvataggio locale

Come è possibile vedere nell’esempio è possibile memorizzare il contenuto del <DIV> utilizzando il pulsante SAVE e ricaricarlo attraverso il pulsante LOAD.

Vediamo come è ottenuto questo comportamento:

Il <DIV> utilizza la proprietà class=”userData” che viene definita nella sezione <HEAD> del file attraverso il codice:

<style> .userData {behavior:url(#default#userdata);} </style>

La proprietà class=”userData” permette di cambiare il comportamento standard dell’elemento HTML cui si riferisce, in particolare viene utilizzato il behavior standard “userData” di Internet Explorer 5.5 che consente di effettuare con semplicità delle operazioni di data persistance. I dati in questo caso vengono memorizzati in un file XML accedibile anche attraverso il DOM.

Ma dove sono fisicamente memorizzati i dati? Il percorso standard per la memorizzazione è

C:\Documents and Settings\utente\Dati applicazioni\Microsoft\Internet Explorer\UserData. 

ed il file di destinazione è un semplice XML contenente, nel caso specifico, la seguente struttura:

<ROOTSTUB content="Questa zona della pagina è &lt;STRONG&gt;editabile&lt;/STRONG&gt; "/> 

come si può vedere si tratta di una conversione in XML della codifica HTML del testo inserito nell’oggetto DIV cui è stata settata la proprietà CLASS e che quindi risponde in maniera opportuna al behavior appropriato.

Conclusioni

Queste nuove funzionalità permettono di pensare in maniera diversa al comportamento delle pagine HTML statiche, che a questo punto acquisiscono potenzialità inaspettate ed aprono nuove strade nello sviluppo di applicazioni per il Web.

L'autore

  • Massimo Canducci
    Massimo Canducci vanta oltre 25 anni di esperienza nel campo dell'innovazione e della digital transformation ed è Chief Innovation Officer per Engineering Ingegneria Informatica. È docente alla Singularity University, l'Università di Torino e l'Università di Pavia, e insegna in master MBA.

Vuoi rimanere aggiornato?
Iscriviti alla nostra newletter

Novità, promozioni e approfondimenti per imparare sempre qualcosa di nuovo

Gli argomenti che mi interessano:
Iscrivendomi dichiaro di aver preso visione dell’Informativa fornita ai sensi dell'art. 13 e 14 del Regolamento Europeo EU 679/2016.

Corsi che potrebbero interessarti

Tutti i corsi
Database-SQL-e-NoSQL-cover Corso Online

Database SQL e NoSQL - Iniziare Bene

con Serena Sensini

L'uso dei database relazionali, del linguaggio SQL e dei database NoSQL è vitale per qualsiasi sito, azienda, società o impresa economica. Se le tabelle di Excel ti stanno strette e vuoi iniziare a lavorare con le basi di dati, questo corso di Serena Sensini fa per te.

299,00

Data di inizio:
15/9/2022

Programmare in VBA – Iniziare Bene-cover Corso Online

Programmare in VBA - Iniziare Bene

con Francesco Borazzo

Vuoi imparare a lavorare meglio con Excel? Analizzando fogli di calcolo complessi con il linguaggio VBA risparmi tempo prezioso Nel suo corso Francesco Borazzo ti insegna come.

399,00

Data di inizio:
14/9/2022

Progettare_i_contenuti_di_un_sito_web-cover Corso Online

Progettare i contenuti di un sito web - Che Funziona

con Nicola Bonora

La buona progettazione dei contenuti di un sito web o di un'app è determinate per il suo successo. Conoscere e saper utilizzare bene gli strumenti del designer non è però scontato. Questo workshop di Nicola Bonora ti insegna come e ti aiuta a fare pratica.

199,00

Data di inizio:
28/9/2022


Libri che potrebbero interessarti

Tutti i libri

WebAssembly

Imparare a scrivere e compilare applicazioni web con prestazioni elevate

47,41

49,90€ -5%

di Gerard Gallant

Imparare a programmare robot

Costruire robot dotati di intelligenza artificiale con Raspberry Pi e Python

37,91

39,90€ -5%

di Danny Staple


Articoli che potrebbero interessarti

Tutti gli articoli