JavaScript  »  Articoli  »  Effetti e controlli Javascript 

In questo articolo vedremo come inserire nel proprio sito un piccolo editor in grado di formattare il testo con delle barre degli strumenti - stile Word Processor - e ricavare del codice HTML.

Può essere utile sia come vero e proprio generatore di HTML, sia come campo di testo per scrivere e-mail, sia può essere utilizzato all'interno di sistemi di Content Management per favorire la formattazione del testo ad utenti inesperti.

Il codice è basato sulla proprietà designMode, che trasforma i documenti HTML in editor di testo. Questa proprietà, in passato supportata soltanto da Microsoft Internet Explorer, è ora finalmente implementata anche da Mozilla 1.3.

Realizzazione del modulo HTML

Presentiamo il codice HTML per la realizzazione della prima barra degli strumenti, quella su cui bisogna agire per modificare il testo. La barra è raffigurata nell'immagine qui sotto:

<div ID="ParaToolbar">
  <select ID="ParagraphStyle"
onchange="formatC('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
    <option selected>Paragrafo
    <option value="<H1>">Titolo 1 <H1>
    <option value="<H2>">Titolo 2 <H2>
    <option value="<H3>">Titolo 3 <H3>
    <option value="<H4>">Titolo 4 <H4>
    <option value="<H5>">Titolo 5 <H5>
    <option value="<H6>">Titolo 6 <H6>
    <option value="<PRE>">Formattato <PRE>
  </select>
  <select ID="FontName" onchange="formatC('fontnamÈ,this[this.selectedIndex].value);this.selectedIndex=0">
    <option class="heading" selected>Tipo Carattere
    <option value="Arial">Arial
    <option value="Arial Black">Arial Black
    <option value="Arial Narrow">Arial Narrow
    <option value="Comic Sans MS">Comic Sans MS
    <option value="Courier New">Courier New
    <option value="System">System
    <option value="Times New Roman">Times New Roman
    <option value="Verdana">Verdana
    <option value="Wingdings">Wingdings
  </select>
  <select ID="FontSize" onchange="formatC('fontsizÈ,this[this.selectedIndex].value);this.selectedIndex=0">
    <option class="heading" selected>Dimensione
    <option value="1">1
    <option value="2">2
    <option value="3">3
    <option value="4">4
    <option value="5">5
    <option value="6">6
    <option value="7">7
  </select>
  <select ID="FontColor" onchange="formatC('forecolor',this[this.selectedIndex].value);this.selectedIndex=0">
    <option class="heading" selected>Colore Testo
    <option value="red">rosso
    <option value="blue">blu
    <option value="green">verde
    <option value="black">nero
  </select>
  <select ID="FontBackColor" onchange="formatC('backcolor',this[this.selectedIndex].value);this.selectedIndex=0">
    <option class="heading" selected>Colore Sfondo
    <option value="red">rosso
    <option value="blue">blu
    <option value="green">verde
    <option value="black">nero
    <option value="yellow">giallo
    <option value="">bianco
  </select>
</div>

Il codice è formato da cinque selectbox che impostano, nell'ordine, il tipo di paragrafo, il tipo di carattere, la dimensione del font, il colore del testo e il colore dello sfondo.

La prima opzione delle selectbox è sempre costituita dalla spiegazione della sua funzione. Andando a selezionare un valore (evento onChange) verrà eseguita la funzione javascript formatC - che vedremo in dettaglio più avanti - seguita dall'automatico ritorno alla prima opzione (indice 0).

La parola chiave this restituisce l'oggetto stesso (in questo caso la selectbox), quindi this.selectedIndex indica l'indice dell'opzione selezionata nella selectbox.

Altri articoli

Altre guide

Altre newsletter