LAU

1. Premessa: FCKeditor modificato

Il problema è questo. Come è possibile fornire gli utenti di un applicativo web che dà la possibilità di usare un editor HTML (per inserire codice HTML) in modo semplice e pulito?
Semplice significa che gli utenti non possono/sanno imparare l'HTML: quindi deve essere usato un editor visuale (WYSIWYG).
Pulito significa che il codice finale, prodotto dall'editor, deve essere valido.
Valido secondo i nuovi standard richiesti dall'accessibilità.
Il che in pratica significa che il codice deve essere valido rispetto alle specifiche XHTML (1.x).

Il nostro obiettivo è quello di predisporre una soluzione pronta all'uso per questo problema.
La scelta è ricaduta su FCKeditor [link esterno], distribuito con licenza LGPL. Sfruttando la possibilità legale di modificare e personalizzare il codice, abbiamo apportato tutte quelle modifiche che a nostro parere si rendevano necessarie per un uso "accessibile" dello strumento.

A questo fine si sono prodotti:

• un pacchetto del software modificato, da scaricare e usare;
• un elenco di specifiche funzionali: cosa e perché abbiamo modificato (inclusa una parte di note tecniche e legali sull'uso accessibile degli editor HTML visuali);
• un documento di specifiche tecniche: come installare, usare e personalizzare lo strumento (inclusa la documentazione di quello che è stato da noi modificato rispetto all'originale).

torna su

2. Indicazioni tecniche sulle modifiche

FCKeditor

Tutti i riferimenti dell'editor originale si trovano qui:

• FCKeditor [link esterno]

La documentazione e le procedure di installazione, uso e configurazione si trovano qui:

• wiki FCKeditor [link esterno]

Questo documento è solamente integrativo e copre solo le modifiche apportate all'originale.
Non troverete "tutto quello che c'è da sapere su Fckeditor", soprattutto per evitare di duplicare informazioni che sono, oltre che disponibili, anche chiare e comprensibili sul sito originale.

La versione che abbiamo utilizzato è la 2.1, rilasciata il 07/10/2005.
Partiamo dal presupposto che abbiate scompattato l'archivio (.zip) in una directory, che la directory possa essere "vista" dalle pagine in cui dovrà essere incluso l'editor.
Esaminiamo i file e le directory rilevanti dal nostro punto di vista.

• fckconfig.js;
• fckstyles.xml;
• ./editor/editor/css/fck_editorarea.css;
• ./editor/dialog/fck_link/fck_link.js.

torna su

Configurazione dei profili e delle funzionalità

I file interessati sono:

• fckconfig.js

Il file fckconfig.js regola le impostazioni di configurazione dell'editor (Editor configuration settings).
Per una lista completa delle impostazioni, confronta i riferimenti precedenti sulla documentazione.

Tra le molteplici personalizzazioni, è possibile costruire dei "profili" di utenza (amministratore, revisore, semplice utente, ...).
Ad ogni profilo è possibile associare singole funzionalità. Ogni funzionalità corrisponde a un "bottone" della barra degli strumenti, che l'utente fisico vedrà nella pagina in cui viene incluso e usato l'editor.

Le modifiche apportate sono le seguenti:

• creazione di una barra degli strumenti per un ipotetico utente "supervisore", con privilegi di revisione/controllo;
• creazione di una barra degli strumenti per un ipotetico utente "operatore", con privilegi di inserimento/modifica.

A titolo di esempio si riporta la "barra degli strumenti" associata al supervisore.

/** toolbar per un'ipotetica utenza 
con permessi di revisione/controllo **/
FCKConfig.ToolbarSets["User"] = [
    ['Source'],
    ['NewPage'],
    ['Cut','Copy','PasteText','Print'],
    ['Undo','Redo','-','Find','Replace',
    'SelectAll'],
	['Link','Unlink'],
    '/',
    ['RemoveFormat'],
    ['Bold','Italic', 'OrderedList',
    'UnorderedList', 
    'SpecialChar','Style']
] ;

Ognuno di questi due profili ha un insieme di funzionalità, che costituiscono un sottoinsieme di quelle di default.
Sono state escluse tutte quelle caratteristiche che potevano portare alla creazione di codice automatico non valido. Nulla vieta, in contesti in cui l'utenza sia esperta o preparata tecnicamente di abilitare tutte le features dello strumento.
La personalizzazione è relativamente semplice: si tratta di mettere/togliere elementi alla lista di funzionalità di ogni profilo.

torna su

Configurazione dei fogli di stile CSS

I file da modificare sono:

• ./fckconfig.xml;
• ./editor/editor/css/fck_editorarea.css.

Il primo è un file XML in cui definire:

1. cosa deve apparire nella combo degli stili dell'editor;
2. quale codice HTML deve corrispondere all'elemento selezionato nella combo.

I valori sono quelli di default: ogni singolo progetto deve poterli personalizzare in base ai propri fogli di stile. Il file XML è molto semplice da configurare e gli esempi presenti di default sono chiari.

Per aggiungere un nuovo stile, che verrà visualizzato nella combo dell'editor, è sufficiente aggiungere l'elemento <Style>...</Style>.

Ad esempio questa istruzione:

<Style name="Code" element="span">
<Attribute name="class" value="Code" />
</Style>

genererà il seguente codice (posto che sia stata applicato alla stringa "test"):

<span class=”code”>test</span>

In questo modo è possibile definire tutti gli stili che l'utente potrà poi applicare in fase di scrittura dei contenuti e che l'editor applicherà in fase di produzione del codice.
L'uso degli stili è assolutamente raccomandato, dato che si ha un completo controllo sul codice "in uscita". L'uso degli stili rende molto più robusta e sicura la produzione di codice valido.

È in quest'ottica che si giustifica la disabilitazione di molte funzionalità dell'editor: agendo sugli stili, su cui si ha controllo, piuttosto che sulle funzionalità "native" dell'editor, su cui non si ha controllo, si hanno maggiori garanzie sulla produzione finale di codice valido.

La configurazione del secondo file (fck_editorarea.css) ha solo uno scopo pratico: fare in modo che l'utente che sta applicando lo stile "veda" esattamente come sarà formattato il suo testo.
Nel file fck_editorarea.css è sufficiente aggiugere un

@import url('path_fogli_di_stile');

In questo modo i fogli di stile saranno linkati nella pagina in cui viene incluso e usato l'editor. I selettori, le classi del CSS saranno quindi immediatamente applicati al testo che l'utente sta digitando.
Tale operazione non influirà sulla produzione del codice, regolata dal file di configurazione XML, ma solo sulla sua visualizzazione in fase di digitazione.

Un'alternativa all'editing del file dei fogli di stile è modificare direttamente una variabile nel file di configurazione generale (fckconfig.js):

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/stile.css' ;

Il valore 'css/stile.css' dovrà essere sostituito in base al percorso in cui si trovano i fogli di stile da includere.
La variabile FCKConfig.BasePath viene definita nell'istanza dell'editor: nella pagina html in cui l'editor viene richiamato.

torna su

Configurazione della funzionalità di costruzione del link

File interessati:

• .\editor\dialog\fck_link\fck_link.js;

Sempre nell'ottica di disabilitare funzioni potenzialmente "dannose" ai fini della produzione di codice valido, abbiamo modificato la finestra di dialogo per l'inserimento di link.
Nel file fck_link.js abbiamo disabilitato, "commentandole", le seguenti caratteristiche:

TAB 'TARGET' NELLA FINESTRA DI DIALOGO DEI COLLEGAMENTI:

/**
if(!FCKConfig.LinkDlgHideTarget)
	window.parent.AddTab('Target', 
	FCK
Lang.DlgLnkTargetTab, true);
**/

//ShowE('divTarget'	,
(tabCode=='Target'));

/**
if(!FCKConfig.LinkDlgHideTarget)
window.parent.SetTabVisibility('Target', 
(lnkType=='url') );
**/

TAB 'AVANZATE' NELLA FINESTRA DI DIALOGO DEI COLLEGAMENTI:

/**
if(!FCKConfig.LinkDlgHideAdvanced)
window.parent.AddTab('Advanced',FCK
Lang.DlgAdvancedTag );
**/

//ShowE('divAttribs',(tabCode=='Advanced') ); 

/**
if(!FCKConfig.LinkDlgHideAdvanced)
window.parent.SetTabVisibility('Advanced', 
(linkType != 'anchor' || bHasAnchors) ) ;
**/

PULSANTE 'CERCA SUL SERVER' NELLA FINESTRA DI DIALOGO DEI COLLEGAMENTI:

GetE('divBrowseServer').style.display='none';

torna su

Istanza dell'editor

Di seguito il codice per includere l'editor in una pagina HTML:

<html>
<head>
<script type="text/javascript" 
 src="/FCKeditor/fckeditor.js">
</script>
<script type="text/javascript">
 window.onload=function()
 {
 var oFCKeditor=new FCKeditor('MyTextarea')
 oFCKeditor.ToolbarSet='User';	
 oFCKeditor.ReplaceTextarea();
 }
</script>
</head>
<body>
<textarea id="MyTextarea" name="MyTextarea">
This is <b>the</b> initial value.</textarea>
</body>
</html>

La prima istruzione, che include il file di configurazione, presuppone che il percorso in cui si sia installato l'editor sia /FCKeditor/, ovviamente il valore varierà a seconda di dove si intenda installare l'editor.

La seconda istruzione carica sull'evento onload l'editor in pagina, secondo le direttive impartite:

• il nome dell'istanza dell'editor ('MyTextarea') deve corrispondere all'id o al name della <textarea> in pagina;
• la barra degli strumenti (nell'esempio: 'User') deve essere stata definita nel file di configurazione;
• l'istruzione ReplaceTextarea() deve essere esplicitamente indicata.

Queste sono le istruzioni necessarie e sufficienti per l'inclusione dell'editor.
È raccomandato l'uso della textarea per questi motivi:

1. se il browser non supporta javascript, l'utente avrà comunque la possibilità di inserire i contenuti HTML "a mano", senza la produzione automatica di codice; cosa che non accadrebbe nel caso in cui l'istanza dell'editor sia stata legata a un <input type="text" />;
2. la scrittura di valori di default o dinamici (ad es. in caso di pagine dinamiche) è più stabile se inserita nell'HTML e non nel javascript che istanzia l'editor.

torna su