30 ebook a un prezzo mai visto!

Risparmia sui tuoi libri preferiti, mentre supporti la community Python Italia

➡️ Scopri gli ebook bundle
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.

Iscriviti alla newsletter

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

Immagine decorativa form newsletter
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.

Libri che potrebbero interessarti

Tutti i libri

Cofanetto Web Development Collection

Contiene: HTML & CSS - JavaScript & jQuery - PHP & MySQL

85,50

90,00€ -5%

di Jon Duckett

Project Manager

Gestire il caos creativo, eliminare lo stress e aumentare l’efficienza

27,55

29,00€ -5%

di Giulia Bezzi

La singolarità è più vicina

Quando l'umanità si unisce all'AI

23,75

25,00€ -5%

di Ray Kurzweil


Articoli che potrebbero interessarti

Tutti gli articoli