Aggiungere Pulsanti Custom a Classic Editor con TinyMCE Advanced

Aggiungere Pulsanti Custom a Classic Editor con TinyMCE Advanced

TinyMCE Advanced è il compagno perfetto di Classic Editor. Questo plugin gratuito, con oltre 2 milioni di installazioni attive, trasforma la personalizzazione della barra degli strumenti di TinyMCE da un’operazione che richiede codice PHP a un semplice drag-and-drop nella dashboard di WordPress. In questa guida completa vedremo come installare TinyMCE Advanced, configurarlo al meglio e sfruttare tutte le sue funzionalità per creare un’esperienza di editing professionale e personalizzata.

Cos’è TinyMCE Advanced

TinyMCE Advanced (rinominato “Advanced Editor Tools” nelle versioni più recenti) è un plugin che estende le funzionalità dell’editor TinyMCE integrato in WordPress. Il suo scopo principale è duplice: aggiungere pulsanti e funzionalità che TinyMCE offre nativamente ma che WordPress non include nella configurazione predefinita, e permettere di riorganizzare la toolbar tramite un’interfaccia visuale intuitiva.

Il plugin è sviluppato da Andrew Ozz, uno dei contributori storici del core di WordPress, il che garantisce piena compatibilità e aggiornamenti costanti. Funziona perfettamente sia con Classic Editor che con Gutenberg (dove aggiunge funzionalità al blocco “Classic”), ma è con l’editor classico che esprime il suo massimo potenziale.

Installazione e Attivazione

L’installazione di TinyMCE Advanced segue la procedura standard di qualsiasi plugin WordPress. Vai su Plugin > Aggiungi Nuovo, cerca “TinyMCE Advanced” o “Advanced Editor Tools”, installa e attiva il plugin. Dopo l’attivazione, troverai la pagina di configurazione in Impostazioni > Advanced Editor Tools (o “TinyMCE Advanced” nelle versioni meno recenti).

Importante: TinyMCE Advanced e Classic Editor sono plugin indipendenti ma perfettamente complementari. Non è necessario avere Classic Editor installato per usare TinyMCE Advanced (funziona anche con il blocco Classic di Gutenberg), ma la combinazione dei due offre l’esperienza più completa per chi preferisce l’editor tradizionale.

L’Interfaccia di Configurazione Drag-and-Drop

La pagina di configurazione di TinyMCE Advanced è divisa in due aree principali. Nella parte superiore trovi la rappresentazione visiva delle quattro righe della toolbar, ciascuna contenente i pulsanti attualmente attivi. Nella parte inferiore trovi il “cassetto” dei pulsanti inutilizzati, ovvero tutti i pulsanti disponibili che non sono attualmente nella toolbar.

La personalizzazione è intuitiva: trascina i pulsanti dal cassetto alle righe della toolbar per aggiungerli, trascinali dalla toolbar al cassetto per rimuoverli, e riordinali semplicemente spostandoli nella posizione desiderata all’interno della stessa riga o tra righe diverse. Ogni modifica viene visualizzata in tempo reale, dandoti un’anteprima esatta di come apparirà la toolbar nell’editor.

Pulsanti Disponibili in TinyMCE Advanced

TinyMCE Advanced rende disponibili decine di pulsanti aggiuntivi che WordPress non include nella configurazione predefinita. Ecco i più utili raggruppati per categoria:

Tabelle: uno dei pulsanti più richiesti. Il pulsante tabella permette di creare, modificare e formattare tabelle direttamente nell’editor visuale senza toccare il codice HTML. Puoi aggiungere e rimuovere righe e colonne, unire e dividere celle, impostare larghezze e allineamenti, aggiungere bordi e sfondi. Questa funzionalità da sola giustifica l’installazione del plugin per molti utenti.

Font e dimensioni: i selettori fontselect e fontsizeselect permettono di cambiare il font e la dimensione del testo direttamente nell’editor. Attenzione però: l’uso di font inline può creare problemi di coerenza stilistica con il tema del sito. Usa questi selettori con moderazione e solo quando necessario.

Colori avanzati: oltre al selettore colore base di WordPress, TinyMCE Advanced aggiunge backcolor per il colore di sfondo del testo, utile per evidenziare passaggi importanti.

Elementi di blocco: pulsanti per inserire codice preformattato (pre), blocchi di codice, citazioni estese e altri elementi HTML semantici.

Cerca e sostituisci: il pulsante searchreplace aggiunge la funzionalità di ricerca e sostituzione all’interno dell’editor, estremamente utile per articoli lunghi dove devi correggere un termine ricorrente.

Emoticon: il pulsante emoticons apre un pannello con le emoji più comuni, inserite come caratteri Unicode (non come immagini), garantendo compatibilità universale.

Opzioni Avanzate del Plugin

Sotto l’area drag-and-drop, TinyMCE Advanced offre diverse opzioni avanzate che meritano attenzione:

Aggiungi CSS per le tabelle all’editor e al front-end: questa opzione aggiunge stili CSS di base per le tabelle create con l’editor. È utile se il tuo tema non include stili per le tabelle HTML, ma potrebbe creare conflitti se il tema ha già regole CSS specifiche per le tabelle.

Mantieni i tag paragrafo durante il cambio tra Visuale e Testo: per impostazione predefinita, WordPress converte i tag <p> e <br> in caratteri di nuova riga quando passi alla modalità Testo e li ricrea quando torni alla modalità Visuale. Questa conversione può causare problemi di formattazione. Abilitando questa opzione, i tag vengono preservati in entrambe le modalità, offrendo un controllo più preciso sul markup HTML.

Rimuovi i tag <p> e <br> quando salvi e mostra nel modo Testo: l’opposto dell’opzione precedente. Utile per chi lavora prevalentemente in modalità Testo e preferisce un codice HTML più pulito.

Abilita il menu contestuale dell’editor: attiva un menu contestuale (clic destro) personalizzato all’interno dell’editor che offre accesso rapido a funzionalità come incolla, inserisci link e formattazione del testo.

Creare Pulsanti Custom con TinyMCE Advanced

Oltre ai pulsanti predefiniti, puoi creare pulsanti completamente personalizzati che eseguono azioni specifiche. Questa funzionalità richiede un po’ di codice JavaScript e PHP ma il risultato è un pulsante integrato perfettamente nella toolbar che esegue esattamente l’azione che desideri.

Il processo prevede tre passaggi: registrare un plugin TinyMCE personalizzato tramite il filtro mce_external_plugins, aggiungere il pulsante alla toolbar tramite mce_buttons, e creare il file JavaScript che definisce il comportamento del pulsante.

// Nel functions.php o plugin personalizzato
function register_custom_tinymce_plugin($plugins) {
    $plugins[custom_button] = get_template_directory_uri() . /js/tinymce-custom.js;
    return $plugins;
}
add_filter(mce_external_plugins, register_custom_tinymce_plugin);

function add_custom_tinymce_button($buttons) {
    $buttons[] = custom_button;
    return $buttons;
}
add_filter(mce_buttons, add_custom_tinymce_button);

Nel file JavaScript tinymce-custom.js, definisci il plugin TinyMCE con il suo comportamento. Ad esempio, un pulsante che inserisce un box di avviso potrebbe avere un codice simile a:

tinymce.PluginManager.add(custom_button, function(editor) {
    editor.addButton(custom_button, {
        title: Inserisci Box Avviso,
        icon: warning,
        onclick: function() {
            editor.insertContent(
                <div class="alert-box"> +
                <strong>Attenzione:</strong> Il tuo messaggio qui +
                </div>
            );
        }
    });
});

Configurazioni Consigliate per Tipo di Sito

La configurazione ottimale della toolbar dipende dal tipo di contenuti che il sito produce. Per un blog editoriale che pubblica principalmente articoli testuali, consigliamo una toolbar snella con formattazione base, link, tabelle e cerca/sostituisci. Per un sito di documentazione tecnica, aggiungi i pulsanti per codice preformattato, ancora (anchor) e il selettore stili con classi personalizzate per note, avvisi e suggerimenti. Per un sito e-commerce dove le schede prodotto richiedono formattazione ricca, includi tabelle, colori, font e il pulsante per le emoticon.

Compatibilità con Altri Plugin

TinyMCE Advanced è compatibile con la maggior parte dei plugin che interagiscono con l’editor. Tuttavia, alcuni plugin aggiungono i propri pulsanti alla toolbar tramite filtri PHP, e questi pulsanti non appariranno nell’interfaccia drag-and-drop di TinyMCE Advanced. I pulsanti aggiunti da altri plugin continueranno a funzionare normalmente; semplicemente, non potranno essere riposizionati tramite l’interfaccia visuale.

Se riscontri conflitti tra TinyMCE Advanced e altri plugin che modificano la toolbar, la soluzione più comune è regolare la priorità dei filtri nel codice PHP. I filtri con priorità più alta (numero più basso) vengono eseguiti per primi, e il risultato finale dipende dall’ordine di esecuzione.

Esportare e Importare le Impostazioni

TinyMCE Advanced include una funzionalità di esportazione e importazione delle impostazioni. Nella parte inferiore della pagina di configurazione, trovi i pulsanti per esportare la configurazione attuale come stringa JSON e per importare una configurazione precedentemente esportata. Questa funzionalità è preziosa quando devi replicare la stessa configurazione della toolbar su più siti WordPress, risparmiando il tempo di configurazione manuale.

Conclusioni

TinyMCE Advanced è un plugin indispensabile per chiunque utilizzi Classic Editor e desideri personalizzare la propria esperienza di editing senza scrivere codice PHP. La sua interfaccia drag-and-drop rende accessibile a tutti una personalizzazione che altrimenti richiederebbe competenze di sviluppo. Combinato con Classic Editor, crea un ambiente di editing potente, flessibile e perfettamente adattato alle tue esigenze.

Che tu sia un blogger che scrive articoli di testo, un e-commerce manager che cura le schede prodotto o un’agenzia che gestisce siti per più clienti, TinyMCE Advanced ti offre gli strumenti per ottimizzare il tuo flusso di lavoro editoriale.

Hai bisogno di aiuto per configurare TinyMCE Advanced o per creare pulsanti personalizzati per il tuo editor WordPress? Il team di G Tech Group può sviluppare soluzioni su misura per il tuo flusso editoriale. Contattaci per una consulenza.

Migliora il Tuo Sito WordPress

Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:

• Come Installare Elementor su WordPress
• Come Installare e Configurare WP Rocket
• Come Installare e Configurare SEOPress
• Come Installare e Configurare UpdraftPlus