FCKEDitor è un popolare editor WYSIWYG scritto in Javascript che può essere utilizzato in svariati CMS. In questo articolo ne vedremo l'utilizzo e la configurazione in Drupal.
Per l'installazione è necessario scaricare separatamente il modulo Drupal e lo script dal sito di FCKeditor. Estratto il pacchetto del modulo in "sites/all/modules/" si noterà che è stata creata una cartella "fckeditor" con all'interno una sottocartella chiamata ancora "fckeditor". All'interno di questa seconda cartella bisogna copiare il contenuto della cartella "fckeditor" che si trova nel pacchetto dello script.
A questo punto si può attivare il modulo da Amministra >> Moduli ed in Amministra >> Gestione utenti >> Permessi assegnare i permessi "access fckeditor" e "administer fckeditor" ai gruppi utenti desiderati.
Gestione profili
In Amministra >> Configurazione del sito >> FCKeditor possiamo modificare i due profili predefiniti o crearne di nuovi. Tramite la creazione di profili si possono assegnare diverse configurazioni dell'editor a diversi ruoli utente. La sezione Basic setup elenca tutti i ruoli con il permesso access fckeditor e consente di selezionare quelli a cui si applicheranno i parametri di configurazione impostati nel profilo.
La maggior parte dei parametri di configurazione sono di semplice comprensione grazie all'aiuto in linea, ci soffermeremo quindi solo su alcune personalizzazioni dell'editor che possono tornare utili più di frequente.
Modificare la barra degli strumenti
Nella sezione Editor appearance possiamo scegliere uno tra più stili della barra degli strumenti.
DrupalFull è adatto solo ai profili assegnati ai ruoli che utilizzano "Full HTML" come formato di input, altrimenti alcune formattazioni del testo saranno eliminate dal filtro; DrupalFiltered può invece essere utilizzato per i profili che utilizzano "Filtered HTML" come formato di input; DrupalBasic è una configurazione minimale che consente la formattazione base del testo ed i soli pulsanti per grassetto, corsivo, liste e inserimento collegamenti e immagini.
Configurare la funzione di caricamento file
Nella sezione "File browser settings" è possibile attivare per il profilo il pulsante per caricare immagini ed altri file dal server.
In "File browser type" selezioniamo "Built-in file browser" ed impostiamo il percorso assoluto e relativo delle cartelle che dovranno contenere i file caricati.
È poi necessario modificare alcuni file di configurazione. Quanto segue è valido per FCKEditor 2.5 e successive e Drupal 5.2 e successive.
Apriamo con un editor di testo il file
sites/all/modules/fckeditor/fckeditor/editor/filemanager/connectors/php/config.php
Troviamo la riga
$Config['UserFilesAbsolutePath'] = '' ;
ed immediatamente di seguito aggiungiamo
require_once "../../../../../filemanager.config.php";
Apriamo poi il file
sites/default/settings.php
troviamo la riga
# $cookie_domain = 'example.com';
Attiviamola rimuovendo il carattere "#" ad inizio riga e sostituendo "example.com" con il nostro nome di dominio.
Infine è necessario impostare il permesso allow fckeditor file uploads ai ruoli ai quali assegneremo il profilo che stiamo creando.
Terminate queste operazioni, quando inseriamo un'immagine o un video avremo a disposizione un pulsante "Cerca sul server" che ci consente di sfogliare il contenuto della cartella impostata precedentemente, selezionare un file presente sul server ed effettuare il caricamento di nuovi file.
Impostare un foglio di stile
Nella sezione CSS possiamo impostare il percorso del foglio di stile che sarà utilizzato da FCKeditor per formattare il testo inserito.
Normalmente sarà preferibile visualizzare il testo con lo stesso stile che avrà sul sito e quindi imposteremo l'opzione Use theme css che fa sì che FCKeditor utilizzi come proprio foglio di stile il file style.css del tema in uso. Alternativamente possiamo impostare un foglio di stile predefinito o uno appositamente creato di cui inseriremo il percorso.
Configurare il menù Style
FCKeditor consente di applicare velocemente uno stile ad un blocco di testo selezionato scegliendolo tra una lista di stili predefiniti mostrati in un menù a tendina sulla barra degli strumenti.
Vediamo come aggiungere il menù Style ad una delle barre degli strumenti predefinite e personalizzarlo secondo le nostre esigenze.
Apriamo il file
sites/all/modules/fckeditor/fckeditor.config.js
Troviamo la riga
['TextColor','BGColor']
e modifichiamola in questo modo
['Style','TextColor','BGColor']
Il menù Style viene aggiunto alla barra degli strumenti DrupalFull.
Aggiungiamo ora delle voci al menù. Per limitare la personalizzazione al tema in uso copiamo il file
sites/all/modules/fckeditor/fckeditor/fckstyles.xml
nella cartella del tema. Nella sezione CSS impostiamo Predefined styles a Use theme fckstyles.xml.
A questo punto possiamo personalizzare fckstyles.xml. Ad esempio per aggiungere uno stile "evidenziatore" rosso, troviamo questa parte del file
<Style name="Marker: Yellow" element="span">
<Style name="background-color" value="Yellow" />
</Style>
<Style name="Marker: Green" element="span">
<Style name="background-color" value="Lime" />
</Style>
ed inseriamo immediatamente di seguito
<Style name="Marker: Red" element="span">
<Style name="background-color" value="red" />
</Style>
Nel caso si preferisse rendere disponibile la nuova voce di menù indipendentemente dal tema in uso, basterebbe copiare il file fckstyles.xml in una cartella a nostra scelta, inserirne il percorso in Predefined styles path e impostare Predefined styles a Define path to fckstyles.xml
Configurare filtri di input
Un'avvertenza finale. I filtri di input utilizzati dai ruoli abilitati all'uso di FCKEditor devono essere configurati per consentire tutti i tag HTML inseribili tramite l'editor così come configurato nel profilo in uso.
Se ad esempio abbiamo assegnato ad un ruolo un profilo di FCKEditor configurato con una barra degli strumenti che include il pulsante di inserimento immagini, ma il filtro di input per quel ruolo non ammette il tag IMG, l'utente sarà in grado di inserire immagini e queste saranno visibili nell'editor, ma scompariranno non appena si salva il contenuto.
