Personalizzare l'editor WYSYWYG TinyMCE di Joomla! con classi css

Come primo step  entrare nel plugin Editor - TinyMCE 2.0 da Estensioni → Gestione Plugin e verificare che l'editor in oggetto sia attivo. Cliccare sul nome dell'editor ed entrare nella sua area dei parametri, sulla parte destra. Nel tab Parametri Plugin possiamo scegliere se abilitare o meno qualche funzione nativa tra cui:

• versione avanzata o semplice;
• se deve apparire un messaggio di alert alla chiusura dell'editor e non si è salvato il lavoro;
• se l'URL che andremo ad inserire per i link dovrà essere relativo oppure assoluto. 

La label sulla quale presteremo attenzione è Classi CSS template. Se portiamo il mouse sulla label, appare il tooltip nel quale è scritto che l'editor, normalmente, va alla ricerca del file editor.css, nella cartella del template che abbiamo stabilito essere quello di default. Se tale file .css non viene trovato, l'editor si basa su quello di sistema.

Cosa vuol dire quanto appena scritto: se abbiamno fatto caso, quando scriviamo un articolo dal backend di Joomla!, la dimensione del font è, solitamente, molto piccola e di colore nero. Se volessimo cominciare a personalizzare il font-size dell'editor, non dobbiamo fare altro che portarci in:

Root-Joomla/templates/system/css

e scaricare sul nostro desktop il file editor.css nel quale inseriremo una semplicissima dichiarazione, modificando quella esistente, come il codice di seguito riportato:

body {
    background: #fff;
    font-family: Tahoma,Helvetica,Arial,sans-serif;
    line-height: 1.6em;
    font-size: 13px;
    color: #333;
    margin:5px 10px;
} 

Salviamo il tutto e trasferiamo tale file nella stessa cartella. Apriamo un articolo qualsiasi e noteremo, sicuramente, la differenza rispetto alle volte precedenti. Si noti bene che tali modifiche valgono solo e soltanto per la textarea dell'editor e non, nel caso del body appena modificato, per il colore della pagina del backend.

Se volessimo, invece, un file editor.css completamente diverso da quello di sistema non dobbiamo fare altro che portarci nei parametri del TinyMCE, come scritto più su, in corrispondenza della label: Classi CSS Template. Se nel campo di testo scrivessimo il path del nostro file .css personalizzato, questo sovrascriverà le regole delle classi CSS scritte nel file editor.css di sistema.

Si faccia una prova a creare un secondo file editor.css e lo si trasferisca via FTP nella cartella del template attivo. Tornare nella gestione plugin e fare click  su Editor - TinyMCE 2.0. Inserire il percorso nel campo di testo Classi CSS Template; il path sarà simile al seguente:

Root-Joomla/templates/Mio-Template-Attivo/editor.css

Invece di avere il background di colore bianco, come scritto nella regola precedente, si cambi colore esadecimale; per esempio: 

background:#ccc; 

lasciando inalterato tutto il resto relativo al body. Trasferire il file nella cartella del template, aprire un articolo qualsiasi nel backend di Joomla! e verificare se il colore di sfondo della textarea è diventato di colore grigio. Se non è stata sovrascritta la regola principale del file di sistema, svuotare la cache di Joomla! e riprovare.

Creare una classe CSS personalizzata per l'editor

Fatta questa prima prova con l'assegnazione di un colore differente per il background, passiamo adesso alla creazione di una classe CSS con anteprima nell'editor. Il metodo da utilizzare, sia che si utilizzi il file editor.css di sistema oppure uno creato da noi, è indifferente; per questo esempio useremo l'editor.css di default (quello di sistema).

Supponiamo che si voglia creare un paragrafo con una classe che chiameremo alert; tale paragrafo richiamerà l'attenzione dell'utente (se per esempio si vuol descrivere qualche passaggio molto delicato per qualche operazione da compiere in una ipotetica descrizione). Ad esso assoceremo anche una piccola icona per rendere più simpatico il paragrafo.

Innanzitutto porteremo, via FTP,  l'icona nella cartella:

Root-Joomla/templates/system/images

Effettuato il download sul desktop del file editor.css di sistema, apriamolo con un programma qualsiasi (che non sia il Word) e scriviamo:

.alert
{
background: #fff6bf url(../images/alert.gif) no-repeat 5px 50%;
border-width:2px 0px 2px 0px;
border-style: solid;
border-color: #ffd324 #000 #ffd324 #000;
margin:10px;
padding: 10px  10px 10px 30px; 
} 

Salviamo ed uplodiamo il foglio di stile nella cartella dalla quale lo abbiamo prelevato. Apriamo un articolo qualsiasi nell'editor di Joomla! ed espandiamo la select "-- Stili --". Dovremmo vedere la classe "alert" appena creata, simile alla figura riportata di seguito:

Come si può vedere dall'immagine, contrassegnate dalle frecce, ci sono quattro classi personalizzate; le prime due:

1. caption
2. system-pagebreack

sono già dichiarate di default nel file .css. Le altre tre classi:

1. info
2. warning
3. note

le ho create per l'esempio in oggetto e per semplice scopo dimostrativo. Come per la classe alert, si creano alla stessa ed identica maniera.

Anteprima nell'editor delle classi personalizzate

Una volta create tutte le classi che si desidera, non ci resta che assegnarle ad un determinato elemento. Si vuole, per esempio, creare un paragrafo con la classe "alert". Scrivere il testo del paragrafo; una volta terminato, selezionare il tutto ed espandere il menu select "Stili"; assegnare la classe desiderata.

Stesso procedimento con le altre classi, se ce ne sono. Al termine, per essere certi che la classe creata risponda alle nsotre esigenze, avremo il riscontro immediato e diretto già nell'editor. L'immagine di seguito riportata,  mostra l'applicazione delle diverse classi a quattro paragrafi distinti  e separati:

Per motivi di spazio ho solo preso parte della screen di quanto ottenuto con l'applicazione delle classi personalizzate.

Visualizzare le classi nel frontend del sito

Dopo aver visto il risultato in anteprima, non ci resta che riportare  le classi nel file template.css affinchè le stesse siano visualizzate anche nel testo di frontend. Con un programma FTP fare il download del file template.css dalla cartella del template attualmente in uso. Basta il semplice Copia / Incolla delle classi dal file editor.css, salvare ed uplodare il tutto.

N.B. Fare attenzione al percorso delle immagini di background ed accertarsi che, nel frontend, siano esattamente visibili come nell'anteprima dell'editor.

Adesso possiamo divertirci come vogliamo con la personalizzazione del nostro editor ed avere un riscontro immediato di quello che gli utenti vedranno nel sito.

Buon lavoro con TinyMCE