JCE Editor

JCE (Joomla Content Editor) è un componente che aggiunge un nuovo editor a Joomla!, che può essere utilizzato in sostituzione dell'editor predefinito.
JCE ha tutte le funzionalità di un editor wysiwyg, come MS Word, ma dobbiamo ricordarci che gli editor di Joomla! formattano il testo usando tag HTML, e che se non viene applicata nessuna formattazione il testo viene pubblicato sulla base della formattazione del file CSS del template in uso. Ciò potrebbe portare ad una visualizzazione diversa da quella che ci si aspetta di ottenere.
Questo vuol dire che se sorgono problemi nel portare in Joomla! la formattazione di un articolo creato con l’editor che usiamo normalmente sul nostro computer (come Word), per risolvere il problema è necessario eliminare la formattazione dell’articolo, ad esempio copiando il testo nel blocco note di Windows (Notepad), per poi ricreare la formattazione direttamente in Joomla!.

Per installare l’editor JCE dobbiamo scaricare dal sito del produttore i file necessari. Attualmente è distribuito in un unico pacchetto che si differenzia per le varie versioni di Joomla!. Scarichiamo anche eventuali add-on che riteniamo utili, ed il language pack in italiano (se il componente è già stato tradotto). Molto utile è Mediabox, mentre alcuni plugin sono a pagamento. JCE va installato utilizzando la normale procedura di installazione delle estensioni, tramite il menu Gestione estensioni.

Installazione JCE

Alla fine della procedura viene visualizzata una schermata che conferma la corretta installazione e indica il numero di versione dell’editor. Una nuova voce è stata inserita nel menu Componenti.

Voce di menu per JCE

 

Cliccando su JCE Administration oppure sulla sottovoce Control Panel, veniamo portati nel pannello di controllo di JCE. Il pannello è costituito da quattro schede che ci consentono di impostare i parametri del componente e gestirlo.

Pannello di controllo di JCE
Le prime tre icone sono la duplicazione delle ultime tre schede.
Se vogliamo installare un language pack italiano, lo possiamo fare da Install Add-ons, selezionando il file (Browse) e lanciando l’installazione (Install Package). La medesima procedura si deve seguire per altri add-ons, come i plugin specifici per l’editor. Nella stessa pagina vengono visualizzate tali estensioni, in modo che possano essere eventualmente disinstallate.

Estensioni per JCE

Nel caso specifico possiamo notare alcune estensioni già presenti di default.

Configurazione
Una volta installato il nuovo editor, lo si può impostare globalmente per renderlo l’editor predefinito per i nuovi utenti registrati. Questa operazione la si compie in Configurazione globale, scheda Impostazioni sito, alla voce Editor predefinito. I nuovi utenti potranno comunque modificare successivamente l’editor nei loro profili.

Impostazione editor globale
Per assegnare JCE ad utenti già registrati è necessario, ulteriormente, impostarlo per i singoli utenti. Ci portiamo, quindi, in Gestione utenti, selezioniamo il singolo utente (ad esempio Super User) e poi impostiamo il nuovo Editor in Impostazioni di base. Questo per tutti gli utenti già registrati che dovranno utilizzare JCE.

Impostazione editor per i singoli utenti

Possiamo notare immediatamente la differenza tra i due editor. Questo è il pannello di TinyMCE:

Pannello di TinyMCE

Questo, invece, è quello di JCE:

Pannello di JCE


JCE ha numerose icone che aiutano nella redazione dell’articolo e nella formattazione del testo. È possibile, ad esempio, copiare testo già formattato direttamente da MS Word. In ogni caso posizionando il mouse su ognuna delle icone viene visualizzata una breve descrizione della sua funzione.
JCE consente anche funzionalità avanzate nella gestione delle immagini. In particolare l’inserimento di un effetto rollover (cioè quando si posiziona il mouse sull’immagine, senza cliccarci sopra, l’immagine ruota con altra immagine collegata).

Per modificare l’ordine delle icone, o per inserirne di nuove, è sufficiente entrare in Editor Profiles, selezionare la scheda Default, poi quella Feature, trascinare le icone nelle posizioni preferite e poi cliccare su Salva e Chiudi.
Sempre in Editor Profiles è possibile impostare numerosi parametri dell’editor, ed i parametri dei plugin di JCE. Prima di modificare queste impostazioni accertatevi di sapere cosa state facendo.

Nella scheda Editor global configuration vengono stabilite le impostazioni principali dell’editor. Queste impostazioni consentono di adattare l’output, sia nel back end che nel front end, offerto dal componente.
Ad esempio potrebbe accadere con alcuni template che lo sfondo della finestra dell’editor è scuro. In tale caso si deve selezionare Custom CSS Files alla voce Editor Styles nel box Formatting.
Anche qui, posizionando il mouse sulle varie voci si ottengono degli aiuti per comprendere meglio le funzioni dei vari parametri.

Infine abbiamo l’icona File Browser.

File Browser di JCE
Il File Browser consente la navigazione tra le cartelle di Joomla!, solo per quelle dedicate al caricamento di file e immagini. Le funzionalità sono la classiche, c’è la possibilità di ordinare l’elenco di file, di creare nuove cartelle, di ricerca e di upload, consentendo così il caricamento di nuovi documenti direttamente dal back end di Joomla! invece che da Ftp.

Inserimento immagini
Usando JCE al posto dell’editor predefinito di Joomla! diventa più semplice inserire immagini, link ed altro nei contenuti.
Ad esempio, volendo inserire un’immagine nel nostro articolo possiamo usufruire dell’editor delle immagini di JCE. All’interno della finestra dell’editor dobbiamo posizionare il cursore nel punto dove intendiamo inserire l’immagine, e poi cliccare sull’icona dell’editor raffigurante un quadro.

Inserimento immagine con JCE

Appare una finestra con il gestore di immagini (Image Manager) di JCE.

Image Manager di JCE


Nella parte superiore possiamo selezionare le proprietà dell’immagine, come la dimensione, i margini e l’allineamento, oltre all’eventuale effetto rollover. A destra abbiamo l’anteprima della posizione dell’immagine.
Nella parte inferiore selezioniamo l’immagine navigando tra le cartelle di Joomla!. Eventualmente possiamo anche caricare l’immagine utilizzando l’apposita icona upload.
Il tasto Insert consente l’inserimento dell’immagine nel punto scelto, Refresh serve per aggiornare una eventuale modifica dei parametri, mentre Cancel chiude il gestore immagini.

Inserimento link
Nel caso volessimo inserire un link dobbiamo selezionare la parola o la frase che diverrà il link e poi cliccare sull’icona dell’editor che raffigura una piccola catena.

Inserimento link con JCE

Con JCE, tramite il Link Browser, possiamo navigare tra i contenuti presenti nel sito al fine di sceglierne uno da linkare, che può essere un articolo, una sezione, una categoria, un contatto. Ovviamente possiamo anche linkare un contenuto esterno inserendolo nell’apposito campo URL.

Link browser di JCE

Nel campo Text viene inserito il testo selezionato nell’articolo, sul quale sarà inserito il link. In Target possiamo scegliere se il link si deve aprire nella stessa finistra, in una nuova finestra o in un frame. In Title inseriamo il titolo del link, cioè quel testo che verrà visualizzato quale tooltip posizionando il mouse sul link. Cliccando su Insert viene creato il link.

Possiamo anche linkare un file, eventualmente anche non ancora caricato, utilizzando l’apposita icona Browse. In questo caso si apre il File Browser di JCE che ci consente di selezionare un file da linkare al testo selezionato.

Spellchecker
Un plugin di JCE molto utile è Spellchecker, già installato nel componente però impostato per il controllo in inglese. Per poterlo utilizzare anche in lingua italiana sono necessarie alcune modifiche. Andiamo nel pannello di JCE e poi in Editor Profiles. Clicchiamo su Default e poi Plugin Parameters. Tra i vari plugin già installati abbiamo Spellchecker. Clicchiamolo per poi impostare i suoi parametri. Il plugin sfrutta i servizi Google per il controllo ortografico (GoogleSpell), per cui dobbiamo solo aggiungere la lingua italiana, in questo modo: Nome Lingua=codice lingua.
Per l’italiano, quindi, aggiungiamo Italian=it prima della lingua inglese, separando ciascun parametro con una virgola.


Spellchecker in italiano

Clicchiamo infine su Salva e Chiudi, in alto.
Da questo momento basterà cliccare sull’apposita icona durante la digitazione di un articolo, per ottenere che gli errori di battitura siano evidenziati da una riga rossa (purtroppo al momento il correttore in italiano non è molto fornito, come potete verificare).

Controllo ortografico con JCE

Mediabox

Un altro plugin utilissimo è Mediabox. Lo possiamo trovare sul sito dello sviluppatore e lo si installa dal pannello di controllo, scheda Install Add-ons. Ovviamente va anche abilitato. 

Mediabox ha svariati utilizzi, innanzitutto può essere usato per creare dei tooltip. Un tooltip può essere creato da qualsiasi elemento o selezione di testi, e richiede solo una identificatore di classe (jcetooltip, appunto) e un titolo. Queste proprietà devono essere inserite in AdvLink quando si crea un link, e nel manager di immagini quando si inserisce un immagine, o su ogni altro elemento usando il pulsante Insert/Edit Attributes.

Inserimento tooltip con Mediabox
Nella finestra che si apre inseriamo il testo del tooltip e selezioniamo jcetooltip per la voce Class.

Finestra attributi
Un tooltip su un semplice testo si presenta in questo modo (posizionate il mouse sulla parola tooltip all'inizio della frase per un esempio).


Esempio tooltip con Mediabox su testo
Per inserirlo su una immagine, invece, dobbiamo portarci nel manager di immagini, e nella scheda Advanced inseriamo il testo e selezioniamo jcetooltip in Class list. Così si presenta il tooltip su una immagine (posizionate il mouse sull'immagine).

Tooltip su immagine con Mediabox

Mediabox può essere utilizzato anche per inserire un video od un’immagine che si apre in un popup. In questo caso è sufficiente selezionare del testo, oppure un’immagine e cliccare sull’icona per inserire i link, inserendo il link del video ospitato su, ad esempio, YouTube, oppure quello dell’immagine. L’immagine la si seleziona col browser, che consente eventualmente anche di caricarla al momento.

Link browser di JCE
Dopo di chè nella scheda Popups dobbiamo selezionare JCE Mediabox Popups. Eventualmente possiamo inserire un titolo ed una descrizione, che verranno visualizzati sotto l’immagine del popup.

Selezione popup con Mediabox

Osserviamo anche la presenza del campo Auto Popup che consente di realizzare un popup che si apre automaticamente al caricamento della pagina.

Esempio popup con immagine

È possibile anche usare contenuti esterni nel popup (come video YouTube), basta inserire la url nell’apposito campo della scheda Link, e selezionare il tipo di contenuto in Media Type nella scheda Popups.
Il campo Group, invece, è utile per realizzare delle vere e proprie gallerie di immagini o altri contenuti. In tal caso non dobbiamo fare altro che inserire i contenuti nello stesso gruppo.

Aggiornamento
La procedura per aggiornare il componente JCE è stata semplificata. In particolare il componente verifica costantemente la presenza di aggiornamenti sul sito del produttore, e in tal caso lo comunica con un avviso nel pannello di controllo.

JCE aggiornamento
In tal caso è sufficiente cliccare sul link Aggiornamenti disponibili per visualizzare, in un pop up, l’elenco degli aggiornamenti, e poi cliccare su Installa aggiornamenti selezionati.

JCE installa aggiornamenti
In questo modo il componente si aggiornerà. Terminata la procedura viene visualizzata la conferma dell’installazione, e possiamo chiudere il pop-up per tornare al pannello di controllo di JCE.


JCE aggiornamenti installati