Rich-Text Editing in Mozilla

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

• mozilla.org's rich-text editing Specification
• mozilla.org's rich-text editing Demo
• Convertire le applicazioni da Internet Explorer a Mozilla su mozilla.org
• MSDN: designMode Property
• MSDN: How to Create an HTML Editor Application
• A closed source, cross-browser rich-text editing demo
• xbDesignMode; a JavaScript helper class for easier cross-browser development using designMode.
• Firefox 3 and contentEditable