JCE Guida alla configurazione

In questo tutorial vedremo come configurare e personalizzare JCE, un editor per Joomla!® apprezzato ed utilizzato in tutto il mondo. La maggior parte degli utenti che installano JCE non sfruttano le molteplici possibilità di personalizzazione che questo componente ci offre. Dopo averlo attivato non possiamo che restare piacevolmente sospresi di fronte alla quantità di icone che popolano la finestra del nostro nuovo editor, ma ...siamo sicuri che ci serviranno tutte?
Se consideriamo che l'editor è forse la cosa che utilizziamo più spesso per gestire il nostro sito, creare una finestra pulita con tutte (e solo) le funzionalità che ci servono, vorrà dire lavorare più in fretta e meglio.

JCE non solo ha in dotazione un pannello di configurazione che ci permette di ottimizzare la finestra dell'editor e molte delle funzioni ad essa associate ma ci dà anche l'opportunità di creare un profilo "ad hoc" e di poterlo importare in tutte le nostre future installazioni di JCE. E' anche possibile creare diversi profili ed associarli alle diverse tipologie di utenti, diversificarne l'uso da backend e da frontend e molto altro.
Nota: in questo tutorial facciamo riferimento alla versione 2.3 di JCE con Joomla!® 2.5.

1. Installare ed attivare l'editor JCE di Joomla!®

L'installazione del componente è molto semplice, dopo averla scaricata dal sito ufficiale si procede come al solito, da:
Estensioni --> Gestione estensioni.
Dopo averlo installato va attivato. Qui optiamo per una attivazione a livello globale (quindi valida per tutti gli utenti del sito).
Da Sito --> Configurazione globale nella tendina dell'Editor predefinito selezioniamo: Editor - JCE e poi Salviamo.
Ora JCE è configurato come editor predefinito per tutti gli utenti del sito e possiamo procedere con la sua configurazione.

Installare la lingua italiana

Vi ricordo che è possibile installare anche la lingua utilizzata nell'editor, dopo averla scaricata da qui, va installata in JCE dall'installer di JCE (non da quello di Joomla!®). Da Componenti --> JCE Editor --> Install Add-ons, seleziono la lingua e poi clic su Install Package (in questo tutorial non è stata installata ndr.).

2. Configurare e personalizzare JCE

Editor Configurazione Globale

Per accedere al pannello di configurazione di JCE partiamo da Componenti --> JCE Editor --> Global Configuration
Qui troviamo le configurazioni globali dell'editor. Io solitamente imposto il Reset Editor Styling su Yes in modo da partire sempre con l'allineamento a sinistra e il testo nero su sfondo bianco e lascio stare tutto il resto, poi Salviamo.

Editor Profili

Questa è la parte che più ci interessa. Qui possiamo vedere alcune tipologie di profili pre-confezionati tra cui quello "Default" che è quello che viene applicato di default a tutti gli utenti.
Il nostro scopo è quello di creare un profilo JCE personalizzato che tenga conto delle nostre preferenze riguardo alle iconcine presenti nella finestra dell'editor e alle svariate impostazioni di editor e plugin.
Per comodità anzichè creare un nuovo profilo, facciamo una copia di quello di Default (che così si replica con tutte le sue impostazioni) e procediamo poi a rinominarlo e configurarlo come meglio ci aggrada.
Per duplicarlo mettiamo una spunta sul profilo Default, clic su Copy e poi, per rinominarlo, spunta su Copy of Default e clic su Modifica per arrivare alla pagina Setup da dove procederemo con la rinomina.

Setup

Da qui procediamo con le seguenti operazioni:
a. salvataggio - con il nuovo nome di nostra scelta (nell'esempio: Amministratore)
b. ordinamento - trascinandolo al primo posto o cambiando l'indice numerico nella colonna Ordering
c. attivazione del profilo appena creato - clic sul dischetto rosso per passare al verde
d. disattivazione del profilo "Default" - clic sul dischetto verde per passare al rosso

Features & Layout

Per accedere a questo pannello basta cliccare sul nome del profilo appena creato e selezionare il tab Features & Layout.
Da questo pannello iniziamo la vera e propria personalizzazione del profilo nascondendo alcune icone poco (o mai) usate presenti di default nell'editor al fine di arrivare ad una finestra più snella e ottimizzata.
Nota: tengo a precisare che le modifiche descritte e commentate sono quelle che utilizzo nel "mio" profilo personalizzato, ognuno di voi è invitato ad apportare quelle che ritiene opportune in funzione delle proprie esigenze.
Dalla configurazione di default Current Editor Layout (img di sx), trasciniamo le icone da nascondere sul pannello più in basso Available Buttons & Toolbars (quello con le righe vuote) e riorganizziamo quelle rimaste nell'ordine a noi più congeniale (img di dx). Una volta terminato, clic su Salva.

Editor Parameters

Passiamo ora ai parametri dell'editor cliccando su Editor Parameters, lasciamo pure stare il Setup così com'è e andiamo a modificare in Typography l'elenco dei Format Elements che sono quelli poi mostrati nella tendina corrispondente al Format nella finestrella dell'editor. Da tutta questa lista io preferisco tenere solo quelli relativi agli "Heading" dal 2 al 4 compresi e disattivare gli altri (togliendo le spunte). Poi clic su Salva
Nota: l'Heading 1 viene normalmente assegnato al titolo dell'articolo e per questo non lo utilizzo direttamente dall'editor.

Plugin Parameters

Clic su Plugin Parameters. Anche qui sono presenti moltissime opzioni e sta a noi scegliere come personalizzarle.
Sono piccoli dettagli che però ci permettono di muoverci più velocemente e con meno distrazioni.
Ne segnalo alcune che sono solito modificare:

- in Image Manager nella sezione Permissions, disabilito lo Show Rollover Tab e lo Show Advanced

- in Link disabilito lo Show Advanced Tab e da Joomla!® Links limito la scelta dei link alle voci in figura:

- in Source Code Editor cambio il tema di default (textmate) con blackboard per avere nella vista "codice sorgente" il testo in chiaro su sfondo scuro, poi Salva e Chiudi

3. Disattivare i plugin "editors-xtd" di Joomla!®

Ora per finire disabilito i 4 bottoncini che compaiono sotto alla finestra dell'editor perchè le loro funzioni preferisco gestirle attraverso JCE. Per ottenere questo, devo disabilitare i plugin ad essi associati. Da Estensioni --> Gestione plugin filtro mettendo editors-xtd nella tendina Seleziona Tipo e disabilito i 4 plugin che vediamo nella foto.

4. Esportare ed Importare un profilo personalizzato in JCE

Bene, ora siamo pronti a provare sul campo questo nuovo profilo personalizzato. Probabilmente con l'uso ognuno di noi apporterà dei cambiamenti ma è utile sapere che una volta creato un profilo è molto semplice esportarlo ed importarlo poi in una nuova installazione di JCE per poterlo così riutilizzare sito dopo sito.
Per esportare un profilo, dal pannello Editor Profiles mettiamo una spunta sul profilo scelto e poi clic su Export.
Si crea così un file jce_profile_data.xml che conserveremo per future implementazioni in altri siti.

Per importare un profilo, sempre da Editor Profiles selezioniamo il profilo con Browse, clic su Import e poi attiviamolo.

Vi ricordo che è possibile anche associare diversi profili personalizzati a determinati utenti e mantenere quindi attivo anche quello di default che varrà per tutti gli altri.