Trucchi per Personalizzare TinyMCE 4, un Primo Approccio

Forse non tutti Sanno Che... Mi è sempre piaciuta un sacco questa rubrica all'interno della Settimana Enigmistica e non potevo iniziare questo articolo se non con questa frase! Il motivo è semplice, per tutto il testo non farò altro che introdurti a piccoli trucchi che ti permetteranno di personalizzare il nuovo editor TinyMCE 4.

Se ancora non lo sai, sin dalla versione 3.9 la nostra piattaforma WordPress ha integrato il nuovo e più pulito editor TinyMCE; i motivi sono stati diversi ma tra i principali troviamo delle migliori API, una qualità del codice generato maggiore e una nuova UI (se vuoi approfondire il discorso ti rimando alla discussione apparsa su Make WordPress).

Personalmente non ho mai avuto la necessità di personalizzare il mio editor di testo, in fin dei conti l’ottimo TinyMCE Advanced ha sempre fatto il suo lavoro, ma con questa nuova implementazione e la promessa di API più semplici da usare mi sono deciso a fare qualche esperimento e vedere fin dove potessi essere in grado di spingermi.

Le scoperte che ho fatto sono davvero interessanti e le personalizzazioni che potrai raggiungere saranno in grado di soddisfare la curiosità di qualsiasi tuo cliente, ed è proprio per questo motivo ho deciso di scrivere questo articolo. Quello che faremo è creare un plugin che ci permetterà di popolare il nostro TinyMCE con nuovi bottoni e funzionalità, non devi far altro che continuare a leggere!

Ancora un Altro Plugin?!?

Se stai seguendo wpAndMore da diverso tempo ti sarai accorto che nell’ultimo periodo l’argomento plugin viene trattato molto spesso e personalmente non lo ritengo affatto un male, anzi la vedo proprio un’opportunità.

Cerco di spiegarmi meglio, per troppo tempo ho pensato che la realizzazione di un plugin richiedesse dei poteri magici a me del tutto ignoti ma la cosa bella è che, man mano che ho iniziato a sperimentare con questi elementi, tutto è diventato più semplice e mi sono accorto che le conoscenze richieste non sono poi così tante!

E questo è il primo punto che mi ha spinto a mostrarti diversi modi per costruire dei plugin, tante volte tu avessi avuto le mie stesse impressioni.

Il secondo motivo per il quale mi sto concentrando molto sullo sviluppo di nuovi plugin risiede all’interno di una caratteristica molto importante che sta alla base di WordPress: i plugin sono nati per aggiungere funzionalità! Fin troppo spesso mi è capitato di vedere dei temi che includono al loro interno dei CPT o altre pesanti personalizzazioni integrate attraverso il file functions.php e una complessa struttura a cartelle.

Se ancora non lo sai e tu stesso hai sviluppato dei temi in questo modo: stai facendo la cosa sbagliata!

Perche?!?

Prendiamo l’esempio di un comune CPT “Portfolio”. Tu hai creato questo elemento all’interno del tuo tema per aiutare il tuo cliente ad inserire i propri lavori e crearsi (appunto) un Portfolio di tutto rispetto; ma che succede se, per qualche arcano motivo, il tuo cliente desidera cambiare tema? Semplicemente, una volta cambiato, avrà l’impressione di aver perso tutto.

I dati del Portfolio saranno salvi all’interno del database (a meno che tu non abbia deciso di rimuoverli alla disattivazione del tema), ma il nostro cliente avrà ricevuto un tuffo al cuore e ci inizierà a chiamare terrorizzato dall’aver cancellato per sempre tutti i suoi preziosi lavori.

Questo, oltre che essere dannoso per il cuore del nostro cliente, è anche una pratica molto sbagliata perché poter cambiare tema è una funzionalità essenziale di WordPress e per questo non dobbiamo legare nessuno all’utilizzo del nostro.

Ecco che un esempio così semplice dovrebbe farti capire perché quando desideri aggiungere nuove funzionalità è sempre meglio utilizzare un plugin 😉

Creiamo il nostro Plugin per TinyMCE

Se hai già letto i precedenti articoli che trattano questo argomento, dovresti ormai sapere che le buone pratiche ci invitano a creare una cartella dentro wp-content/plugins/, creare un file con lo stesso nome della cartella, creare un index.php vuoto (per motivi di sicurezza) e popolare il file principale con dei commenti PHP che permetteranno a WordPress di riconoscere il nostro plugin.

Per farla breve, io ho creato una cartella personalizza-tinymce/ al cui interno ho inserito un file index.php e personalizza-tinymce.php, dentro quest’ultimo ho inserito quanto segue:

Anche se mi aspetto che tu conosca già questi aspetti un piccolo ripasso non ha mai ammazzato nessuno ed in fin dei conti partire da queste cose ti dovrebbe aver richiesto di avviare il tuo server, lanciare il tuo editor di testo e aprire il browser all’interno della tua installazione WordPress di sviluppo; in poche parole sei pronto all’azione!

Il codice presentato all’interno di questo articolo è contenuto all’interno di un repository GitHub. Ti ho già presentato velocemente questo sistema che permette di condividere e contribuire a del codice, quindi questo articolo prenderà come presupposto che tu conosca i comandi base per utilizzare questo strumento. Se così non fosse, ed hai bisogno di un po’ di aiuto, non esitare a scrivere nei commenti!

Aggiungi Font Size e Font Select

Con il nuovo TinyMCE questi due dropdown sono letteralmente scomparsi, benché non sia molto favorevole all’utilizzo di questi, dato che sporcano un po’ il codice, sicuramente offrono ai nostri clienti la possibilità di sentirsi padroni del testo che andranno a pubblicare.

Ovviamente questo è soltanto un primo passo dato che sia le grandezze che le famiglie di font che possiamo selezionare sono alquanto limitate ma prima di proseguire e scoprire come sia possibile aggiungere nuovi caratteri e nuove dimensioni vorrei descriverti un attimo cosa stiamo facendo.

Per prima cosa, anche se abbiamo dato un nome molto particolare alla nostra funzione, dobbiamo assicurarci che questo non entri in conflitto con le funzioni che potrebbero essere già installate all’interno della piattaforma e per questo motivo lanciamo il controllo con la funzione function_exists() disponibile grazie al PHP.

Successivamente, se questa funzione non è presente all’interno del sistema andiamo a crearla ed utilizziamo la funzione array_unshift() per inserire i valori fontselect e fontsizeselect, ma da dove è stato preso il parametro $buttons che passiamo alla nostra funzione?

Tutto questo è possibile grazie all’utilizzo del Filter Hook mce_buttons_2 che identifica la barra degli strumenti avanzati nel nostro editor. Se preferisci inserire questi pulsanti nella prima barra ti basterà utilizzare il filtro mce_buttons ma tutto questo è spiegato dalla relativa pagina del Codex.

Aggiungi Grandezze Personalizzate

Poter aggiungere i pulsanti che modificano la famiglia e le grandezze dei font è sicuramente interessante ma cosa puoi fare se il tuo cliente ti chiede di inserire una grandezza di 50px oppure la possibilità di utilizzare il font Roboto?

Ebbene esistono alcune funzioni che potresti creare, scopriamo insieme quella che ti permetterà di inserire delle grandezze personalizzate:

L’Hook che utilizziamo in questo processo  prende il nome di tiny_mce_before_init e come descritto dal Codex ci fornirà l’accesso all’array di configurazione di TinyMCE e di applicarvi le proprie modifiche.

Modifichiamo le Grandezze dei Font nell'editor WordPress

Il valore che stiamo modificando è quello presente all’interno della chiave fontsize_formats, nel nostro caso io ho sovrascritto i valori di default passati al suo interno per rimuovere le grandezze più piccole ed aggiungere quella da 50px richiesta dal mio fittizio cliente.

Rimuovi Famiglie di Font

Prima ancora di mostrarti come sia possibile aggiungere un Google Font all’interno di TinyMCE mi sembra più corretto mostrarti come sia possibile aggiungere le famiglie più generali (quelle installate su qualsiasi sistema operativo per intendersi 😉 ). L’Hook che possiamo utilizzare è tiny_mce_before_init che, come spiegato precedentemente, ci permette di mettere le mani sull’array di configurazione dell’editor.

Ridurre il numero di Famiglie dei Font nell'editor WordPress

Quando vogliamo ridurre il numero di caratteri il valore che dobbiamo modificare è quello assegnato alla chiave font_formats che contiene semplicemente dei valori stringa che identificano il nome del font da visualizzare nel menu a tendina e permettono a WordPress di trovare il font stesso, ecco un veloce esempio di come potrai ridurre il numero di  famiglie font messe a disposizione:

In questo caso la lista di font continua ad essere molto lunga e tu potrai anche organizzare questo codice in maniera diversa ma la cosa che ti devi ricordare è che con questa soluzione non è possibile concatenare più stringhe. Personalmente ho fatto qualche prova con il simbolo di concatenazione (.=) ma il risultato è stato semplicemente quello di non mostrare completamente l’editor 🙂

Per quanto si può capire questo valore deve essere dichiarato come unica stringa contenente tutti i font che vogliamo elencare all’interno dell’editor, nell’esempio precedente, ti ho mostrato come rimuoverne alcuni (dato che WordPress include tutti i font standard disponibili sul web) ma prima ti ho annunciato che avremmo visto anche come poter aggiungere dei font da Google Fonts 😉

Aggiungi nuove Famiglie da Google Fonts

Come hai già notato, selezionare le famiglie di font compatibili nel web è una cosa molto semplice; si specifica il nome che potranno leggere gli utenti e con un simbolo uguale si dichiarano le abbreviazioni che WordPress conosce per questi font (in modo da impostare anche una serie di fallback nel caso in cui il nostro utente non abbia a disposizione il font richiesto).

Aggiungere un nuovo font è una cosa altrettanto semplice, anche se richiede la creazione di una funzione aggiuntiva. Cerchiamo di capire meglio il procedimento: per prima cosa si aggiunge la nuova famiglia di font alla lista di quelli da elencare, in questo modo:

Anche in questo caso la lista dei font è molto lunga, sopratutto perché vogliamo continuare ad inserire i font compatibili, ma quello sul quale vorrei farti prestare attenzione è la dichiarazione del primo font, vedi che c’è un Roboto=Roboto? Ebbene, questo è il primo passo che dovrai fare per inserire il tuo primo Google Font; l’unico problema è che WordPress non sa ancora come utilizzarlo.

Dobbiamo dirgli dove andare a prendere il CSS che gli permetterà di includere questo nuovo font!

Ecco che dovrai crearti una nuova funzione, nell’esempio chiamata ptmce_mce_google_fonts_styles, all’interno della quale dovrai dichiarare la URL che punta al foglio di stile (in questo caso salvata all’interno della variabile $font_url) e successivamente aggiungere lo stile al nostro editor in modo che sia in grado di applicare questo carattere anche all’interno dell’editor (grazie alla funzione dedicata add_editor_style()).

Se sei stato attento, precedentemente ho messo in rilievo la parola anche e questo soltanto perché anche se non andrai ad aggiungere lo stile al tuo editor di testo puoi già utilizzare il font nel frontend della tua installazione. Ovviamente utilizzarlo anche all’interno dell’editor permette di avere un feedback instantaneo.

Come prendere la URL ed il Nome di un Google Font

Se ti stavi chiedendo come sia possibile conoscere la URL ed il nome da utilizzare per includere il font richiesto, eccoti acccontentato 😉 Come puoi vedere questa non è altro che l’immagine della sezione Quick Use presente su Google Fonts che indica anche l’abbreviazione da usare per integrare il font nella funzione ptmce_mce_google_fonts_array().

Aggiungi i Formati al tuo Editor TinyMCE

Ricordi che fin alla versione 3.8 era presente un comodo menu a tendina che permetteva di selezionare gli stili da applicare al proprio testo? Purtroppo con l’avvento di TinyMCE 4 questi sono stati rimossi, ma in questa sezione ti spiegherò come riattivarli e sfruttarli per i tuoi scopi.

La sezione stili era molto interessante perché ci permetteva di creare degli elementi personalizzati come ad esempio bottoni, effetti sul testo ed altre divertenti cose che HTML e CSS ci permettono di fare, andiamo intanto a vedere come sia possibile creare il menu dropdown che ci permetterà di includere i formati:

Già con questa piccola porzione di codice avrai accesso a diversi formati che il nostro cliente potrebbe utilizzare, ma se cosa devi creare dei formati specifici per il progetto sul quale lavori? La cosa si fa leggermente più complicata ma allo stesso modo sai benissimo che dopo qualche esperimento la WordPress Way ti tornerà più che comoda 😉

Dopo aver visto tutto il blocco di codice necessario (che non è poi così tanto) cerchiamo di capire quali sono stati i passi che ci hanno permesso di aggiungere  questa nuova lista di opzioni al nostro menu a tendina.

Per prima cosa abbiamo dichiarato l’array multidimensionale $new_styles che ci ha permesso di creare le nuovi voci Bottone ed Evidenzia. Come puoi notare tu stesso, è possibile specificare anche il tipo di elemento HTML che desideriamo aggiungere dalla selezione di questa voce ed anche la classe CSS che potremo utilizzare successivamente per personalizzare l’elemento appena creato.

Una volta creati tutti i tuoi elementi personalizzati puoi scegliere di fondere questi nuovi elementi con quelli già presenti all’interno dei formati, in questo caso dovrai usare $settings['style_formats_merge'] = true;, oppure potrai scegliere di sovrascrivere completamente i formati standard con i tuoi appena creati, questa volta ti basterà non dichiarare la variabile $settings['style_formats_merge'].

Prese queste scelte è arrivato il momento di passare queste impostazioni, ovvero devi convertire il nostro array in un oggetto JSON, questo perché TinyMCE è un editor sviluppato in JavaScript mentre noi stiamo scrivendo del PHP. JSON è un ottimo formato per passare delle informazioni da uno all’altro linguaggio.

Per nostra fortuna, dato che abbiamo strutturato $new_styles come un array multidimensionale, la funzione json_encode() farà il duro lavoro al posto nostro, tutto quello che devi fare è ricordarti di inserire nelle parentesi il nuovo array 😉

Finalmente possiamo restituire i nostri $settings e lasciare che TinyMCE crei al posto nostro questi nuovi elementi all’interno dell’editor WordPress.

Conclusioni

Se devo essere onesto con te ci sarebbero ancora molte altre personalizzazioni di TinyMCE che vorrei presentarti, da questo articolo abbiamo lasciato fuori la possibilità di creare un bottone personalizzato e anche quella di poter aprire una finestra modale, ma ritengo che questo articolo sia durato fin troppo a lungo.

Che ne dici se facciamo una cosa diversa?

Per prima cosa ti comunico che tutto il codice che abbiamo usato in questa lezione è presente all’interno di questo repository GitHub, se quindi hai qualche impostazione o modifica che vuoi pushare non esitare a clonare il progetto ed applicare le tue modifiche 😉 Oltre a questo vorrei sapere da te quanto ti interessano gli argomenti che ti ho appena presentato.

Vuoi sapere come creare un bottone oppure come poter aprire una finestra modale dal tuo nuovo TinyMCE 4? Commenta questa lezione e fammi sapere che anche tu sei interessato a scoprire come sia possibile creare questi elementi, non vedo l’ora di presentarteli da vicino!

Lascia il tuo Pensiero

5 Responses to “Trucchi per Personalizzare TinyMCE 4, un Primo Approccio”

  1. Roberto

    Complimenti, articolo davvero interessante ! Mi farebbe davvero piacere vedere una seconda puntata dedicata alle finestre modali…

    Rispondi
    • Andrea Barghigiani

      Ciao Roberto,
      mi fa piacere che tu abbia trovato l’articolo interessante. Ci tengo soltanto a chiarire una cosa, visto che si parla di TinyMCE la finestra modale alla quale faccio riferimento è quella da mostrare in backend e puoi trovare una veloce introduzione a questo argomento nell’articolo che Daniele ha pubblicato parlando di ShortCake (un plugin feature che a breve verrà integrato nel core WordPress).

      Spero di averti fornito le informazioni necessarie, a presto
      Andrea

      Rispondi
  2. Marco

    Ciao Andrea,
    complimenti per l’articolo e tutto il tuo lavoro in generale.
    Ti faccio una domanda stupida:
    per aggiungere altri Google font va ripetuta esattamente quello che hai fatto per il font Roboto?

    Rispondi
    • Andrea Barghigiani

      Ciao Marco,
      e ricorda che nessuna domanda è stupida ma semplicemente un segnale di creatività 🙂

      Venendo al tuo dubbio diciamo che la risposta da una parte è sì mentre dall’altra il mio consiglio è quello di utilizzare direttamente le API di Google per interrogare la lista, ma questo se vuoi ottenere tutti i caratteri che questo servizio mette a disposizione. Se ne hai selti soltanto alcuni che vanno bene per il tuo tema allora inserisci soltanto quelli.

      Tra l’altro penso che ci sia un limite di richieste orarie che se superate ti impedirà di caricare i font e non penso che questo sia qualcosa che desideri fare…

      Rispondi
      • Marco

        Ciao Andrea,
        grazie.

        Ho provato ad aggiungere un altro Google font, mi appare nel menu dell’editor ma quando lo uso non succede nulla. Scusa l’incompetenza: potresti mostrarmi un esempio i pratica?

        Grazie comunque. 😉

        Rispondi