Rich-Text Editing in Mozilla

di 1 collaboratore:

Introduzione

Mozilla 1.3 introduce un'implementazione della caratteristica designMode di Microsoft® Internet Explorer. In Mozilla 1.3, il supporto al rich-text editing supporta la caratteristica designMode che trasforma i documenti HTML in editor rich-text. Partendo da Firefox 3, Mozilla supporta anche l'attributo contentEditable di Internet Explorer che permette a qualsiasi elemento di diventare un elemento modificabile o non (la seconda caratteristica viene usata per prevenire cambiamenti ad un elemento che non deve essere modificato).

Impostare il Rich-Text Editing

Il Rich-text editing viene inizializzato tramite la proprietà designMode di un documento ad "On", come un documento all'interno di un iframe. Una volta che designMode viene impostato ad "On", il documento diventa un'area di rich-text editing e l'utente può digitare dentro questa come se fosse una textarea. The most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website.

Allo stesso modo, impostando contentEditable a "true" ti permette di rendere modificabili singoli elementi di un documento.

Eseguire i Comandi

Quando un documento HTML viene impostato come modificabile con designMode, l'oggetto document rilascia il metodo  execCommand, la quale permette di eseguire dei comandi per manipolare il contenuto dell'area modificabile. Molti comandi agiscono sulla selezione del testo nel documento (grassetto, corsivo, ecc), mentre altri inseriscono nuovi elementi (collegamenti) o agisco su un'intera riga (indentazione). Quando si usa contentEditable, il metodo execCommand coinvolgerà l'attuale elemento attivo modificabile.

execCommand(Stringa nomeComando, Booleano mostraUIPredefinita, Stringa valoreArgomento)

Argomenti

Stringa nomeComando
il nome del comando
Booleano mostraUIPredefinita
se l'interfaccia utente standard deve essere visualizzata. Questa caratteristica non è implementata in Mozilla.
Stringa valoreArgomento
alcuni comandi (come insertimage) richiedono un valore per un argomento extra (l'indirizzo dell'immagine). Passa un argomento oppure null, se l'argomento non è necessario.

Comandi

backColor
Cambia il colore di sfondo del documento. In modalità styleWithCss invece, questo agisce sul colore di sfondo del blocco che lo contiene. Richiede un valore esadecimale do un colore da passare come argomento. (Internet Explorer usa questo comando per impostare il colore di sfondo del testo.)
bold
Attiva o disattiva il grassetto sulla selezione corrente o alla posizione del cursore. (Internet Explorer usa il tag STRONG al posto di B.)
contentReadOnly
Rende il contenuto del documento modificabile o di sola lettura. Richiede una valore booleano true/false da passare come argomento. (Non è supportato da Internet Explorer.)
copy
Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi 
createLink
Crea un collegamento dalla selezione, solo se esiste la selezione. Richiede una stringa contenente l'indirizzo del collegamento da passare come argomento. L'indirizzo deve contenere almeno un unico carattere, che può essere uno spazio bianco. (Internet Explorer creerà un link con un valore null.)
cut
Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi 
decreaseFontSize
Aggiunge un tag SMALL attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)
delete
Cancella la selezione corrente.
fontName
Cambia il carattere alla selezione o alla posizione del cursore. Richiede una stringa, con il nome di un font ("Arial" per esempio) da passare come argomento.
fontSize
Cambia la dimensione del testo nella selezione o alla posizione del cursore. Richiede una dimensione HTML (1-7) da passare come argomento.
foreColor
Cambia il colore del testo alla selezione on alla posizione del cursore. Richiede una stringa con il valore esadecimale del colore da passare come argomento.
formatBlock
Aggiunge un tag di blocco-stile attorno alla selezione o alla posizione del cursore. Richiede una stringa con il nome del tag da passare come argomento. Praticamente possono essere usati tutti i blocchi di stile (es. "H1", "EM", "BUTTON", "TEXTAREA"). (Internet Explorer supporta soltanto i tags di intestazione H1 - H6, ADDRESS, e PRE, e devono essere racchiusi all'interno dei delimitatori < >, quindi l'argomento dovrà essere passato come "<H1>".)
heading
Aggiunge un'intestazione attorno la selezione o sulla riga in cui è posizionato il cursore. Richiede una stringa con il nome del tag da passare come argomento (es. "H1", "H6"). (Non supportato da Internet Explorer.)
hiliteColor
Cambia il colore di sfondo della selezione o della posizione del cursore. Richiede una stringa con il valore esadecimale del colore da passare come argomento. UseCSS deve essere attivata per usare questa funzione. (Non supportato da Internet Explorer.)
increaseFontSize
Aggiunge il tag BIG attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)
indent
Aumenta il rientro dell'elemento all'interno della selezione corrente o alla posizione del cursore.
insertHorizontalRule
Inserisce una horizontal rule alla posizione del cursore (elimina la selezione).
insertHTML
Inserisce una stringa HTML alla posizione del cursore (elimina la selezione). Richiede una stringa HTML valida da passare come argomento. (Non supportata da Internet Explorer.)
insertImage
Inserisce un'immagine alla posizione del cursore (elimina la selezione). Richiede una stringa contenente l'indirizzo dell'immagine da passare come argomento. L'indirizzo deve contenere almeno un unico carattere, che può essere uno spazio bianco. (Internet Explorer creerà un link con un valore null.)
insertOrderedList
Crea un elenco numerato all'interno della selezione corrente o alla posizione del cursore.
insertUnorderedList
Crea un elenco puntato all'interno della selezione corrente o alla posizione del cursore.
insertParagraph
Inserisce una paragrafo attorno alla selezione o alla riga corrente. (Internet Explorer inserisce un paragrafo alla posizione del cursore e cancella la selezione.)
italic
Attiva o disattiva il corsivo sulla selezione o alla posizione del cursore. (Internet Explorer usa il tag EM al posto di I.)
justifyCenter
Allinea al centro la selezione o la posizione del cursore.
justifyLeft
Allinea a sinistra la selezione o la posizione del cursore.
justifyRight
Allinea a destra la selezione o la posizione del cursore.
outdent
Diminuisce il rientro dell'elemento sulla selezione o alla posizione del cursore.
paste
Incolla il contenuto degli appunti alla posizione del cursore (sostituisce la selezione corrente). I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi 
redo
Ripristina il comando precedentemente annullato.
removeFormat
Rimuove tutta la formattazione dalla selezione corrente.
selectAll
Seleziona tutto il contenuto dell'area modificabile.
strikeThrough
Attiva o disattiva il testo barrato sulla selezione o alla posizione del cursore.
subscript
Attiva o disattiva subscript sulla selezione o alla posizione del cursore.
superscript
Attiva o disattiva superscript sulla selezione o alla posizione del cursore.
underline
Attiva o disattiva la sottolineatura sulla selezione o alla posizione del cursore.
undo
Annulla l'ultimo comando eseguito.
unlink
Rimuove il collegamento dal collegamento selezionato.
useCSS
Attiva o disattiva l'uso di tags HTML tags o CSS per la generazione del markup. Richiede una valore booleano true/false come argomento. NOTA: Questo argomento è invertito (es. usa false per usare il CSS, true per usare l'HTML). (Non supportato da Internet Explorer.) Questo comando è diventato deprecato; in alternativa usa il comando styleWithCSS.
styleWithCSS
Sostituisce il comando useCSS; l'argomento, a differenza del comando useCSS, l'argomento lavora come ci si aspetta, es. passato true modifica/genera attributi style nel markup, false genera elementi di formattazione.

Differenze con Internet Explorer

Una delle maggiori differenze tra Mozilla e Internet Explorer che coinvolgono designMode è il codice generato nel documento modificabile: while Internet Explorer uses HTML tags (em, i, ecc), Mozilla 1.3 will generate by default spans with inline style rules. Il comando  useCSS può essere usato per attivare o disattivare la creazione di markup HTML o CSS.

Figure 1 : Generated HTML differences

Mozilla:
<span style="font-weight: bold;">I love geckos.</span>
<span style="font-weight: bold; font-style: italic; 
    text-decoration: underline;">Dinosaurs are big.</span>

Internet Explorer:
<STRONG>I love geckos.</STRONG>
<STRONG><EM><U>Dinosaurs are big.</U></EM></STRONG>

Un'altra differenza tra Mozilla e IE è il modo in cui si accede all'oggetto document di un iframe, con la quale viene usato in congiunzione con designMode. Mozilla usa il modo standard fornito da W3C, IFrameElement.contentDocument, mentre IE richiede IFrameElement.document.

DevEdge fornisce una classe JavaScript, xbDesignMode, il cui scopo è quello di racchiudere le caratteristiche di designMode in una classe che nasconde le differenze tra IE e Mozilla.


Gestione degli Eventi Disabilitati

Una significante differenza per Mozilla è che una volta che viene impostato il documento a designMode, tutti gli eventi sul determinato documento vengono disabilitati. Tuttavia, disattivato il designMode (come ora è possibile in Mozilla 1.5) gli eventi diventeranno attivi di nuovo.

Maggiori informazioni possono essere trovato nella sezione Rich text editing dell'articolo Convertire le applicazioni da Internet Explorer a Mozilla.

Esempi

Nota: I files di esempio sono stati trasferiti su un'altro sito. In questo momento non sono disponibili. --fumble 18:13, 24 Apr 2005 (PDT)

Esempio 1

Il primo esempio è un documento HTML impostato con designMode a "On". In Mozilla 1.3, questo rende l'intero documento modificabile. Tuttavia, Internet Explorer, non permette a javascript di cambiare il designMode del documento corrente. Per farlo funzionare in Internet Explorer, l'attributo contentEditable del tag body necessita di essere impostato a "true".

Figura 2 : Primo esempio

HTML:
<body contentEditable="true" onload="load()">

JavaScript:
function load(){
  window.document.designMode = "On";
}

Esempio 2

Il secondo esempio è una semplice pagina in rich text editing, dove il testo può essere trasformato in grassetto/corsivo/sottolineato, possono essere aggiunti nuovi collegamenti e si può cambiare il colore del testo. La pagina di esempio consiste in un iframe, la quale sarà l'area rich-text, nonché gli elementi che consento di effettuare modifiche base al testo come grassetto/corsivo/colore del testo.

Figura 3 : Impostazione del rich-text editing

HTML:
<body onload="load()">

JavaScript:
function load(){
  getIFrameDocument("editorWindow").designMode = "On";
}

function getIFrameDocument(aID){
  // se esiste contentDocument, W3C compliant (Mozilla)
  if (document.getElementById(aID).contentDocument){
    return document.getElementById(aID).contentDocument;
  } else {
    // IE
    return document.frames[aID].document;
  }
}

L'esempio contiene una funzione doRichEditCommand che rende semplice l'esecuzione dei comandi nel documento dell'iframe e mantiene pulito il codice HTML. La funzione esegue il comando richiesto tramite execCommand() e dopodiché imposta il focus di nuovo al documento modificabile, come anche cliccando su di un pulsante imposterà il focus su pulsante stesso, la quale interromperà il flusso di modifica.

Figura 4 : Esecuzione dei comandi Rich Editing

HTML:
<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>

JavaScript:
function doRichEditCommand(aName, aArg){
  getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
  document.getElementById('editorWindow').contentWindow.focus()
}

Risorse

Original Document Information

Etichette del documento e nomi di chi ha collaborato alla sua stesura

Contributors to this page: khela
Ultima modifica di: khela,