Editor di testo e immagini per WordPress. Editor visivo avanzato TinyMCE Advanced

25.07.2019 Consiglio

TinyMCE Advanced introduce un blocco “Paragrafo classico” e una “Modalità ibrida” per il nuovo Block Editor (Gutenberg).
Se non sei ancora pronto per passare all'Editor blocchi o disponi di plugin che non possono essere utilizzati lì (ancora), utilizzare il blocco Paragrafo classico e la modalità ibrida è la soluzione migliore.
Ti consente di continuare a utilizzare il familiare editor TinyMCE per la maggior parte delle attività e allo stesso tempo ti dà pieno accesso a tutti i blocchi e alle nuove funzionalità nell'editor blocchi.

La versione 5.0 è un importante aggiornamento di TinyMCE Advanced. Introduce pulsanti e impostazioni aggiuntivi per le barre degli strumenti "Rich Text" nell'editor blocchi. Similmente alle barre degli strumenti dell'editor classico, la maggior parte dei pulsanti può essere aggiunta, rimossa o riorganizzata.

Se desideri continuare a utilizzare l'editor precedente (“classico”) in WordPress 5.0 e versioni successive, questo plugin ha un'opzione per sostituire il nuovo editor con quello precedente. Se preferisci avere accesso a entrambi gli editor affiancati o consentire ai tuoi utenti di cambiare editor, sarebbe meglio installare il plug-in Editor classico. TinyMCE Advanced è completamente compatibile con il plugin Classic Editor e plugin simili che ripristinano l'uso del precedente editor WordPress.

Come sempre, questo plug-in ti consentirà di aggiungere, rimuovere e organizzare i pulsanti visualizzati sulla barra degli strumenti dell'editor visivo nel paragrafo classico e nei blocchi classici nel nuovo editor a blocchi e nell'editor classico (se abilitato da un plug-in). Qui puoi configurare fino a quattro righe di pulsanti tra cui dimensioni dei caratteri, famiglia di caratteri, colori del testo e dello sfondo, tabelle, ecc.

In questi termini TinyMCE Advanced non influisce in alcun modo sulla privacy degli utenti del tuo sito web.

Schermate

Installazione

La cosa migliore è installarlo direttamente da WordPress. Se è necessaria l'installazione manuale, assicurati che i file dei plugin si trovino in una cartella denominata "tinymce-advanced" (non due cartelle annidate) nella cartella dei plugin di WordPress, solitamente "wp-content/plugins".

FAQ

Vedo un errore del tipo: "Impossibile caricare il plugin dall'URL..."

Questi errori sono solitamente causati dal file in questione bloccato da alcune impostazioni di sicurezza sul server o (raramente) da problemi di memorizzazione nella cache o autorizzazioni errate.

Il primo passo per eseguire il debug è provare ad accedere al file direttamente nel browser (ovvero copiare l'URL e incollarlo nel browser e premere Invio).

Se vedi il file (che di solito è JS minimizzato, quindi è tutto su una riga) è probabile che si trattasse di una sorta di problema di memorizzazione nella cache che ora è stato risolto. Prova a utilizzare nuovamente l'editor.

Se vedi un errore HTTP (come 403 o 500) la cosa migliore sarebbe contattare la tua società di web hosting per ricevere assistenza. In alcuni casi può essere utile eliminare e reinstallare il plug-in.

Le tabelle hanno un aspetto diverso (mancano gli stili in linea) quando inserisco una tabella

Il modo in cui vengono formattate le tabelle dipende da due cose:
1. Impostazioni per il plugin “tabella” in TinyMCE.
2. Se ridimensioni la tabella trascinandola.

Per impostazione predefinita TinyMCE Advanced imposta l'editor in modo che non vengano aggiunti stili aggiuntivi alle tabelle. In questo modo le tabelle vengono visualizzate esattamente come previsto dal tema. Questo può essere cambiato modificando alcune impostazioni dell'editor. Ciò può essere fatto utilizzando il plugin Advanced TinyMCE Configuration. Tutte le impostazioni dell'editor relative alla tabella sono descritte qui: https://www.tiny.cloud/docs/plugins/table/#table_default_attributes.

Indipendentemente dalle impostazioni di cui sopra, se ridimensioni una tabella trascinando l'altezza e/o la larghezza del tag della tabella e dei tag della cella verranno impostati come stili in linea.

Nessuno stile viene importato nel sottomenu Formati

Questi stili vengono importati dal file editor-style.css del tema corrente. Tuttavia alcuni temi non dispongono di questa funzionalità. Per questi temi TinyMCE Advanced ha la possibilità di farti aggiungere un editor-style.css personalizzato e importarlo nell'editor.

Ho appena installato questo plugin, ma non fa nulla

Modifica alcuni pulsanti su una delle barre degli strumenti, salva le modifiche, svuota la cache del browser e riprova. Se il problema persiste, prova a reimpostare la pagina di modifica più volte tenendo premuto Maiusc o Ctrl. Potrebbe anche esserci una cache di rete da qualche parte tra te e il tuo host. Potrebbe essere necessario attendere alcune ore prima che la cache scada.

Quando aggiungo "Smilies", non vengono visualizzate nell'editor

Il pulsante “Emoticon” in TinyMCE aggiunge i codici per le faccine. Le immagini effettive vengono aggiunte da WordPress durante la visualizzazione del post. Assicurati che la casella "Converti emoticon in grafica sul display" in "Opzioni - Scrittura" sia selezionata.

Il plugin non aggiunge alcun pulsante

Assicurati che la casella di controllo "Disabilita l'editor visivo durante la scrittura" in "Utenti - Il tuo profilo" sia attiva non controllato.

Vedo ancora i "vecchi" pulsanti nell'editor

Salva nuovamente le impostazioni o fai clic sul pulsante "Ripristina impostazioni predefinite" nella pagina delle impostazioni del plug-in, quindi imposta nuovamente i pulsanti e salva.

Altre domande? Altri screenshot?

Pubblica un messaggio nel forum di supporto o visita la home page di TinyMCE Advanced.

Recensioni

Partecipanti e sviluppatori

TinyMCE Advanced è un progetto open source. I seguenti contributori hanno contribuito allo sviluppo del plugin:

Partecipanti

Registro delle modifiche

5.1.0

Aggiornato per WordPress 5.1 e TinyMCE 4.9.2.

5.0.1

Risolto il problema con l'importazione delle impostazioni di cui è stato eseguito il backup.
Aggiornata la sezione FAQ nel file readme.

5.0.0

Aggiunti diversi nuovi pulsanti alla barra degli strumenti RTF nell'editor blocchi.
Aggiunta funzionalità per aggiungere, rimuovere e organizzare la maggior parte dei pulsanti sulla barra degli strumenti RTF nell'editor blocchi.
Aggiunta posizione alternativa per i pulsanti per il componente rich-text. Ciò consente agli utenti di spostare i pulsanti che non vengono utilizzati frequentemente.
Aggiunte impostazioni per il colore del testo selezionato e il colore dello sfondo.
Correzioni e miglioramenti migliorati per il blocco classico.
Migliorato il blocco paragrafo classico e aggiunto il supporto per la conversione dalla maggior parte dei blocchi in paragrafi classici e per la conversione di un paragrafo classico in blocchi separati.

4.8.2

Correzioni e miglioramenti per 4.8.1.
Aggiunta un'opzione separata per abilitare il blocco paragrafo classico.
Aggiunta la conversione della maggior parte dei blocchi predefiniti in paragrafi classici e dai paragrafi classici in blocchi predefiniti.

4.8.1

Aggiornato per WordPress 5.0.
Aggiunta la modalità ibrida per l'editor a blocchi. Include un blocco paragrafo classico che sostituisce il blocco paragrafo predefinito.
Aggiunta l'opzione per sostituire l'editor a blocchi con l'editor classico.
Aggiunta un'altra sezione delle impostazioni per configurare le barre degli strumenti nel Blocco classico e nel Blocco paragrafo classico.
Aggiunti alcuni problemi CSS per il Blocco Classico.
Corretta (rimossa) l'impostazione del CSS in linea per le celle della tabella quando si inserisce una tabella. Il CSS in linea viene comunque aggiunto quando una tabella viene ridimensionata mediante trascinamento.

4.8.0

Aggiornato per WordPress 4.9.8 e TinyMCE 4.8.0.

4.7.13

Aggiornati i plugin di tabella e ancoraggio alla versione 4.7.13 (16-05-2018). Risolve un bug nel plug-in della tabella in Edge.

4.7.11

Aggiornato per WordPress 4.9.6 e TinyMCE 4.7.11.

4.6.7

Risolta la compatibilità con il blocco a forma libera Gutenberg.
Aggiornamento forzato dei plugin TinyMCE dopo l'attivazione.
Aggiornato per WordPress 4.9 e TinyMCE 4.6.7.

4.6.3

Aggiornato per WordPress 4.8 e TinyMCE 4.6.3.

4.5.6

Aggiornato per WordPress 4.7.4 e TinyMCE 4.5.6.
Risolto il problema con l'avviso PHP dopo l'importazione delle impostazioni.

4.4.3

Aggiornato per WordPress 4.7 e TinyMCE 4.4.3.
Risolto il bug del pulsante "Codice sorgente" mancante.

4.4.1

Aggiornato per WordPress 4.6 e TinyMCE 4.4.1.
Risolto bug di salvataggio multisito.
Aggiunto nuovo pulsante nell'editor di testo per aggiungere o reimpostare le interruzioni di riga. Aggiunge interruzioni di riga solo tra i tag. Funziona solo quando rileva che mancano le interruzioni di riga, quindi non riformatta i post con paragrafi rimossi.

4.3.10.1

Risolto il problema con l'aggiunta di tag di paragrafo durante il caricamento di post salvati prima della disattivazione di wpautop.
Disabilitata la (nuova) barra degli strumenti in linea per le tabelle poiché in alcuni casi si sovrapponeva alla tabella.

4.3.10

Aggiornato per WordPress 4.5.1 e TinyMCE 4.3.10.
Risolto il problema con il supporto per l'aggiunta di editor-style.css ai temi che ne erano sprovvisti.

4.3.8

Aggiornato per WordPress 4.5 e TinyMCE 4.3.8.
Opzioni standard e opzioni di amministrazione separate.
Aggiunte impostazioni che possono disabilitare il plugin per l'editor principale, altri editor in wp-admin o editor sul front-end.
Traduzione coreana di Josh Kim e traduzione greca di Stathis Mellios.

4.2.8

Aggiornato per WordPress 4.4 e TinyMCE 4.2.8.
Traduzione giapponese di Manabu Miwa.

4.2.5

Aggiornato per WordPress 4.3.1 e TinyMCE 4.2.5.
Corretto il dominio di testo e le intestazioni dei plugin.

4.2.3.1

Correggi l'errore con la rimozione del plugin textpattern.

4.2.3

Aggiornato per WordPress 4.3 e TinyMCE 4.2.3.
Rimosso il plugin textpattern poiché WordPress 4.3 include funzionalità simili per impostazione predefinita.
Traduzione francese di Nicolas Schneider.

4.1.9

Aggiornato per WordPress 4.2 e TinyMCE 4.1.9.
Risolti bug relativi alla visualizzazione delle anteprime di oEmbed quando si incolla un URL.
Risolti bug relativi al recupero del contenuto da TinyMCE con interruzioni di riga.

4.1.7

Aggiornato per WordPress 4.1 e TinyMCE 4.1.7.
Risolto bug per cui i codici brevi di didascalie consecutive potevano essere divisi con un tag di paragrafo vuoto.

4.1.1

Risolto bug con le didascalie delle immagini quando wpautop è disabilitato.
Aggiungi il supporto per la traduzione alla pagina delle impostazioni. I nomi/descrizioni dei pulsanti vengono tradotti da JS utilizzando la traduzione WordPress esistente, quindi questa parte della pagina delle impostazioni verrà tradotta per impostazione predefinita. L'altro testo necessita ancora di una traduzione separata.

4.1

Aggiornato per WordPress 4.0 e TinyMCE 4.1.
Aggiungi il plugin textpattern che supporta parte della sintassi markdown durante la digitazione, (ulteriori informazioni).
Aggiungi il plug-in "tabella" aggiornato che supporta il colore dello sfondo e del bordo.

4.0.2

Corretta la visualizzazione della seconda, terza e quarta riga di pulsanti quando il pulsante di attivazione/disattivazione della barra degli strumenti non viene utilizzato.
Risolto il problema con l'aggiunta del plug-in di direzionalità quando è selezionato il pulsante RTL o LTR.
Mostra le "Opzioni avanzate" ai super amministratori nelle installazioni multisito.
Aggiungi il plug-in di collegamento inclusa l'impostazione del collegamento rel. Sostituisce la finestra di dialogo Inserisci/Modifica collegamento quando abilitata.
Include il plugin "tabella" aggiornato che supporta l'allineamento verticale delle celle.

4.0.1

Correggi gli avvisi su pagine diverse da Modifica post. Aggiorna la descrizione.

4.0

Aggiornato per WordPress 3.9 e TinyMCE 4.0. Aggiornata la schermata delle impostazioni. Aggiunto il supporto per l'esportazione e l'importazione delle impostazioni.

3.5.9.1

Aggiornato per WordPress 3.8, corretto l'incorporamento automatico di URL a riga singola quando non si rimuovono i tag di paragrafo.

3.5.9

Aggiornato per WordPress 3.7 e TinyMCE 3.5.9.

3.5.8

Aggiornato per WordPress 3.5 e TinyMCE 3.5.8.

3.4.9

Aggiornato per WordPress 3.4 e TinyMCE 3.4.9.

3.4.5.1

Risolto un bug che impediva a TinyMCE di importare classi CSS da editor-style.css.

3.4.5

Aggiornato per WordPress 3.3 o successivo e TinyMCE 3.4.5.

3.4.2.1

Correggi la rimozione di media plugin in modo che non sia necessario salvare nuovamente le impostazioni.

3.4.2

Compatibilità con WordPress 3.2 e TinyMCE 3.4.2, rimosse le opzioni per il supporto degli elementi iframe e HTML 5.0 in quanto supportati di default in WordPress 3.2, rimosse le media plugin poiché è incluso per impostazione predefinita.

3.3.9.1

Aggiunte opzioni avanzate: interrompi la rimozione di iframe, interrompi la rimozione di elementi HTML 5.0, spostato il supporto per gli stili dell'editor personalizzati su editor-style.css nel tema corrente.

Attenzione: se hai un file tadv-mce.css personalizzato e il tuo tema non ha editor-style.css, scarica tadv-mce.css , rinominalo in editor-style.css e caricalo nella directory del tema corrente . In alternativa puoi aggiungere lì l'editor-style.css dal tema Twenty Ten. Se il tuo tema ha editor-style.css puoi aggiungere lì eventuali stili personalizzati.

3.3.9

Compatibilità con WordPress 3.1 e TinyMCE 3.3.9, opzione tag P e BR migliorata.

3.2.7

Compatibilità con WordPress 2.9 e TinyMCE 3.2.7, diverse correzioni di bug minori.

3.2.4

Compatibilità con WordPress 2.8 e TinyMCE 3.2.4, correzioni di bug minori.

3.2

Compatibilità con WordPress 2.7 e TinyMCE 3.2, correzioni di bug minori.

3.1

Compatibilità con WordPress 2.6 e TinyMCE 3.1, mantiene i paragrafi vuoti disabilitando la rimozione dei tag P e BR, è possibile organizzare i pulsanti per MCImageManager e MCFileManager (se installati).

3.0.1

Compatibilità con WordPress 2.5.1 e TinyMCE 3.0.7, aggiunta opzione per disabilitare la rimozione dei tag P e BR durante il salvataggio e nell'editor HTML (wpautop), aggiunti altri due pulsanti nell'editor HTML: wpautop e annulla, corretta la rimozione di pulsanti TinyMCE non predefiniti.

3.0

Supporto per WordPress 2.5 e TinyMCE 3.0.

2.2

Pagina delle opzioni di disattivazione/disinstallazione, menu a discesa della dimensione del carattere e altre piccole modifiche.

2.1

Selezione della lingua migliorata, compatibilità migliorata con WordPress 2.3 e TinyMCE 2.1.1.1, opzione per sovrascrivere alcune delle classi CSS importate e altri piccoli miglioramenti e correzioni di bug.

2.0

Include una pagina di amministrazione per organizzare i pulsanti della barra degli strumenti TinyMCE, installazione semplice, molte correzioni di bug, plug-in "Smilies" personalizzato che utilizza le faccine integrate di WordPress, ecc. La pagina di amministrazione utilizza jQuery e jQuery UI che ti consentono di "trascinare e rilasciare" i pulsanti TinyMCE per organizzare le tue barre degli strumenti e abilitare/disabilitare i plugin corrispondenti a seconda dei pulsanti utilizzati.

Aver compreso le funzionalità di base del pannello di amministrazione di WordPress. Dopo aver gettato le basi del nostro sito, dedicheremo la maggior parte del tempo agli articoli, alla loro scrittura e all'ottimizzazione. È stato introdotto un editor per digitare e formattare i post in WordPress, ma è molto inferiore ai plugin specializzati per queste esigenze. Dopo aver installato e configurato il plug-in dell'editor visivo e html Tinymce Advanced, la modifica delle voci sarà molto più semplice.

Esistono molti plugin per l'editor di testo, uno dei quali è un plugin funzionale che è stato scelto da un numero enorme di persone: TinyMCE avanzato.

Navigazione nell'articolo:

Per iniziare a utilizzare e testare questo plugin TinyMCE Advanced, è necessario scaricarlo e installarlo, come mostrato nel video tutorial qui sotto.

Descrizione del plugin TinyMCE Advanced

Il plug-in aggiuntivo dell'editor TinyMCE Advanced è in circolazione da molto tempo e probabilmente il 90% degli utenti della piattaforma WordPress lo ha installato e lo utilizza quotidianamente.

Il plugin TinyMCE Advanced è molto semplice, ma allo stesso tempo fornisce tutte le funzionalità necessarie quando si lavora con pagine e post.

Grazie a TinyMCE Advanced potremo aggiungere al nostro editor standard, disponibile a partire dal , un gran numero di nuovi pulsanti che ti saranno sicuramente utili.

È quasi impossibile sopravvalutare questo plugin, viene utilizzato ogni ora, ogni minima e fine regolazione diventerà semplice e accessibile con TinyMCE Advanced.

Recensione video di TinyMCE Advanced, sua installazione e configurazione

In questo video vedrai i vantaggi disponibili durante l'installazione e l'utilizzo di TinyMCE Advanced.

Perché TinyMCE Advanced è migliore dello standard

Per coloro che non conoscono ancora lo scopo dei plugin, ne abbiamo uno speciale, ma gli altri possono tuffarsi a capofitto nell'articolo.

TinyMCE Advanced esiste per creare le tue pubblicazioni in comodi formati visivi e di codice, per modificare e creare uno stile di scrittura per testi unici. L'editor offerto nel pacchetto base di WordPress è a dir poco scadente e dispone solo di strumenti di base.

Come vediamo, a conferma di quanto detto sopra, con l’editor standard non si va molto lontano, ecco perché TinyMCE Advanced con le sue funzionalità ampliate ci viene in aiuto.

A prima vista, è chiaro che le nostre capacità aumenteranno in modo significativo con questa funzionalità di TinyMCE Advanced. Chiunque abbia mai lavorato con editor di testo può facilmente comprendere le icone e le funzionalità del plugin. Per chi non vuole cercare a caso gli elementi necessari, analizzeremo le principali caratteristiche e impostazioni di TinyMCE Advanced.

Cosa ci darà TinyMCE Advanced

Pertanto, l'utilizzo dell'editor TinyMCE Advanced ci consentirà di aggiungere e utilizzare le seguenti funzionalità:

Creazione semplice e conveniente di tabelle direttamente durante la scrittura di un articolo. Modifica e compilazione che non ti causeranno alcun inconveniente.
Formattazione avanzata e conveniente della struttura della pagina. Possibilità di creare e regolare il posizionamento degli strati (
blocchi).
Potrai anche inserire apici e pedici.
Cambiare il colore di sfondo del testo con TinyMCE Advanced è molto semplice senza usare CSS.
Incorporare file video diventerà molto più conveniente con l'editor TinyMCE Advanced.
Cambiare la dimensione del font.
Ampia selezione di famiglie di caratteri.
Una serie di tasti di scelta rapida aggiungerà velocità alla scrittura e alla formattazione dei tuoi testi.
Sarà possibile cancellare tutta la formattazione con un solo tasto.

Queste e altre funzionalità ti aiuteranno a dare forma alle tue creazioni con WordPress.

Il plugin viene costantemente aggiornato, il che ci rende felici, perché questo è il segno principale che gli sviluppatori pensano alla tua comodità.

Usando TinyMCE Advanced scriverai i tuoi post fiducioso nelle tue capacità, ti auguriamo ispirazione e testi unici, alla prossima volta

Possibili problemi con TinyMCE Advanced e metodi per risolverli

Il plugin TinyMCE Advanced è scritto in PHP, proprio come qualsiasi programma, potrebbe non funzionare per un motivo o per l'altro. Di seguito sono riportati i problemi che gli utenti riscontrano più spesso. Cosa c'è che non va nell'editor di WordPress?

L'editor visivo avanzato TinyMCE di WordPress non funziona

Se, quando colleghi un plugin, non riesci a modificarlo, utilizzare le icone, aggiungere o modificare le impostazioni, prova la seguente operazione:

Controlla la funzionalità degli altri plugin che gestisci dal pannello di amministrazione, se i loro pulsanti di impostazione funzionano, quindi passa al punto successivo. Se sorgono problemi con altri componenti aggiuntivi, è necessario cercare i motivi delle impostazioni interne e non nel plug-in stesso.
Aggiorna WordPress all'ultima versione.
Disinstalla completamente il plugin e scarica TinyMCE Advanced dal sito ufficiale.
Dopo l'installazione, attivalo e verificane la funzionalità.

Se questo non ti aiuta i problemi potrebbero essere legati ad altri plugin, a volte potrebbero entrare in conflitto, prova a disabilitare tutti i plugin e controlla se la situazione è cambiata. Se TinyMCE Advanced non funziona e hai bisogno di cercare problemi più profondi con un motore “pulito”, ti conviene contattare un programmatore.

Nella pagina di amministrazione: i pulsanti di TinyMCE non sono ordinati, non si muovono, la barra degli strumenti è vuota, altri errori nella pagina

Questo di solito è causato da altri plugin che aggiungono librerie JavaScript incompatibili a tutte le pagine, non solo dove necessario. Una soluzione alternativa a questo problema è provare a scoprire quali plugin stanno facendo questo, disabilitare temporaneamente i plugin rimanenti finché non vengono visualizzati tutti i pulsanti TinyMCE e abilitarli uno per uno, controllando le modifiche nelle impostazioni.

Se il problema persiste, prova una risoluzione generale dei problemi Javascript: svuota la cache, prova un altro browser, prova un altro computer se possibile, elimina e scarica nuovamente tutti i file plug-in e infine installa Firefox con Firebug o Opera, nota il primo JS che causa errori (importante) e pubblicalo di seguito o cerca online per scoprire la causa.

Ho organizzato i pulsanti e li ho salvati, ma non cambia nulla nell'editor visivo nella pagina dei post

Fare clic sul pulsante “Elimina” (accanto al pulsante Salva) e poi su “Continua”. Quindi spegni e attiva nuovamente il plugin. Ciò ripristinerà tutte le impostazioni archiviate nel database.

Mancano alcuni pulsanti dal menu TinyMCE, oppure alcuni strumenti non vengono visualizzati affatto, oppure TinyMCE si comporta in modo strano dopo l'installazione del plugin

Quasi tutti questi problemi sono causati dalla cache del browser o dalla cache di rete. Svuota la cache del browser, chiudi il browser, quindi avvialo e riprova. Se il problema persiste, prova a ricaricare la pagina tenendo premuto Ctrl (in IE) o Maiusc (in Firefox) per dire al browser di ricaricare la pagina dal server. Ciò potrebbe anche essere causato da una cache di rete da qualche parte tra te e il tuo host web. Basta aspettare qualche ora affinché il problema scompaia.

Non vedo nessuno stile importato nel menu a discesa "stile".

Questi stili (solo classi) vengono importati dall'editor nel file style.css del tema corrente. Tuttavia, alcuni temi non includono questo file. In questo caso, segui le istruzioni nella pagina delle impostazioni di TinyMCE Avdanced per aggiungere il tuo file editor style.css al tuo tema. Quando definisci gli stili, tieni presente che TinyMCE importerà solo i nomi delle classi:

La mia classe()

La mia_altra_classe()

Ho appena installato il plugin TinyMCE Avdanced ma non è successo nulla

Esci da WordPress, svuota la cache del browser, riavvia il browser e riprova. Se questo non funziona, potrebbe esserci un proxy caching o una cache di rete da qualche parte tra te e il tuo host. Potrebbe essere necessario attendere alcune ore prima che la cache scada.

Quando aggiungo "emoticon" queste non vengono visualizzate nell'editor

Il pulsante Emoji in TinyMCE aggiunge codici emoji. Le immagini effettive vengono aggiunte da WordPress durante la visualizzazione di un post/pagina. Assicurati che l'opzione "Converti emoji come :-) e :-P in immagini" nel menu Impostazioni/Scrittura sia selezionata.

Il plugin non aggiunge alcun pulsante, non ci sono schede “Visivo” e “Testo HTML”.

Assicurati che la casella di controllo "Disabilita Visual Editor" in "Utenti"/"Il tuo profilo" sia deselezionata.

Questa istruzione è completa, ma contiene collegamenti a materiali che non sono ancora stati pubblicati. Non allarmarti se uno qualsiasi dei collegamenti non si apre. Tutto funzionerà presto! 🙂

Cordiali saluti, Alessandro.

Un editor visivo è il modo più conveniente e veloce per pubblicare materiali su un sito web. Viene utilizzato durante la creazione di post e pagine, alcuni plugin lo utilizzano anche nelle loro impostazioni.

Nella nota abbiamo esaminato brevemente le funzionalità delle modalità visiva e di testo dell'editor, ora andiamo un po' più in profondità e esaminiamo i pulsanti principali.

Una volta installato WordPress, l'editor apparirà molto povero e non funzionale:

Scusate ma ritaglierò volutamente alcune immagini in altezza per non allungare gli articoli già lunghi. Se vedi un'interruzione netta nella parte inferiore dell'immagine, significa che lì non c'è nulla di utile. In alcuni casi specifici presterò attenzione a questo.

In generale, come puoi vedere, l'editor non offre tutti i pulsanti che vorremmo. Ma anche loro sono sufficienti per lavorare efficacemente sui materiali.

Tutto ciò di cui hai bisogno per la formattazione di base è qui:

Selezione del testo in grassetto, corsivo e barrato
Elenchi puntati e numerati
Evidenziare il testo come citazione con decorazione
Linea di divisione orizzontale
Allinea il testo a sinistra, al centro e a destra
Inserimento ed eliminazione di un collegamento
Pulsante Interruzione di pagina
Pulsante per attivare funzionalità aggiuntive
Pulsante per passare alla modalità a schermo intero

Questi pulsanti funzionano in due modalità, consideriamole entrambe.

Esempio 1

È molto semplice capire come funziona questo metodo: fai clic sul disegno che ti serve nella barra degli strumenti e inizi a digitare il testo. Il pulsante viene visivamente premuto e sembra premuto.

Qualsiasi testo inserito in questa modalità riceverà automaticamente l'opzione di progettazione attiva nella barra degli strumenti.

Guarda:

Ho scritto le prime due frasi senza premere il pulsante [B], le ho scritte e ho premuto Invio. Nell'editor si è formato un nuovo paragrafo vuoto, prima di inserirlo ho fatto clic sul pulsante in grassetto e ho iniziato a inserire il testo.

Tutto ciò che ho inserito è diventato automaticamente in grassetto. Per disabilitare l'uso di questo stile basta premere il pulsante e poi i simboli successivi non verranno più decorati.

Tutte le altre opzioni di progettazione funzionano allo stesso modo.

Esempio 2

Esiste un altro modo che (secondo la mia opinione personale) è più comodo e veloce. Consiste in questo: prima scrivi un foglio di testo senza disegno, quindi disegni il testo come desideri.

All'inizio potevo semplicemente scrivere lo stesso testo:

Quindi devo selezionare il paragrafo che voglio rendere in grassetto e fare clic sul pulsante corrispondente sulla barra degli strumenti:

Dopodiché il nostro paragrafo diventerà in grassetto. Non è necessario premere il pulsante [B] per questo: il disegno verrà applicato automaticamente a tutto il testo selezionato.

Esempio 3

WordPress, come Microsoft Word, ti consente di eseguire varie azioni non con il mouse, ma con scorciatoie da tastiera. Ogni azione ha il proprio set di pulsanti che, quando premuti, applicano determinati stili.

Ad esempio, se nel secondo esempio di questa istruzione non avessimo premuto il pulsante [B] sulla barra degli strumenti, ma utilizzato la combinazione di “Ctrl” e “B” (scritto come Ctrl+B, il pulsante “B” è in inglese, dalla parola “Bold”) , la selezione in grassetto verrebbe immediatamente applicata al nostro paragrafo.

Alla fine di questo manuale sarà presente materiale sulle scorciatoie da tastiera.

Attivazione di pulsanti aggiuntivi

Ad un certo punto ti renderai conto che le attuali capacità dell’editor non ti bastano e vorresti evidenziare il testo con uno stile sottolineato o impostare dei titoli nel testo. Per fare ciò, è necessario attivare la barra degli strumenti aggiuntiva.

Troviamo questo pulsante:

Apparirà una seconda fila di pulsanti che aggiungono nuove funzionalità al tuo editor:

Qui possiamo già vedere opzioni aggiuntive per la formattazione del testo, esaminiamole da sinistra a destra:

Crea intestazioni di uno qualsiasi dei sei livelli disponibili
Sottolinea il testo
Allineamento del testo alla larghezza della pagina
Imposta il colore del testo
Attivazione della modalità per incollare testo dagli appunti senza formattazione
Cancella la formattazione da una parte di testo selezionata
Inserimento di caratteri speciali
Rimozione e aggiunta di rientri a sinistra ai paragrafi
Annulla o ripeti un'azione precedente
Aiuto con l'editore

Come puoi vedere, queste funzionalità sono davvero sufficienti per lavorare sul testo e sul suo design.

Benvenuti nel sito del blog. In questo articolo ti dirò come sostituire e allo stesso tempo riparare uno standard editor visivo di post WordPress. Cominciamo quindi dal fatto che un editor di testo standard non è essenzialmente altro che un normale Word, che ognuno di noi ha utilizzato, ma solo in una forma molto semplificata. Molte persone trovano semplicemente scomodo scrivere articoli quando ci sono solo un paio di pulsanti per formattare le loro voci, e quindi molti iniziano a studiare per scrivere quello che vogliono nel codice, ma anche qui li attende un problema.

L'editor HTML non permette di utilizzare tutti i tag conosciuti, ma solo quelli principali. A proposito, ecco un elenco di quei tag che l'editor di WordPress capisce: indirizzo, a, abbr, acronimo, area, articolo, a parte, b, big, blockquote, br, caption, cite, class, code, col, del , dettagli, gg, div, dl, dt, em, figura, figcaption, piè di pagina, font, h1, h2, h3, h4, h5, h6, intestazione, hgroup, hr, i, img, ins, kbd, li, mappa , ol, p, pre, q, s, sezione, piccolo, campata, sciopero, forte, sub, sommario, sup, tavola, tcorpo, td, tpiede, th, thead, tr, tt, u, ul, var.

Se provi a inserire qualsiasi altro tag non incluso in questo elenco, l'editor di WordPress lo rimuoverà semplicemente dal post. Inoltre, il codice PHP e JavaScript non possono essere utilizzati nell'editor html. Se desideri comunque inserire il codice JavaScript in un articolo, dovrai inserire questo codice in un file separato, quindi caricarlo sul blog e scrivere il percorso per aprire questo file nell'editor html.

Tutto ciò rende difficile dedicare al lavoro molto più tempo di quanto molti possano permettersi. Pertanto, molti stanno cercando come sostituire l'editor visivo standard di WordPres che soddisfi le loro esigenze e obiettivi. Oggi parleremo di uno di questi.

L'editor si chiama TinyMCE Advanced, che lo rende sofisticato Plug-in CKEditor. Non ho detto solo questo, perché al suo interno sono stati inseriti ben 15 plugin: Advanced HR, Advanced Image, Advanced Link, Menu contestuale, Emozioni (Smilies), Data e ora, IESpell, Layer, Nonbreaking, Print, Search e Sostituisci, Stile, Tabella, Caratteri visivi ed Extra XHTML.

Questo è di gran lunga l'editor di testo più sofisticato che esista. In generale, risulta che il plugin è a pagamento, ma per qualche motivo è distribuito in modo assolutamente gratuito. Gli sviluppatori scrivono che dicono che puoi usarlo gratuitamente solo per fare conoscenza, ma per i siti commerciali è necessario acquistare una licenza.

Anche se penso che questo sia qualcos'altro. Il plugin in sé pesa molto e non tutti hanno bisogno di determinate funzioni, pulsanti, di cui ci sono semplicemente mari, quindi il plugin può essere assemblato da solo, lasciando solo ciò che serve, riducendo così le sue dimensioni senza rallentare il lavoro del blog.

Ciao a tutti!

Oggi ti parlerò del plugin Ultimate tinyMCE, che ti consente di espandere notevolmente le funzioni dell'editor visivo standard di WordPress.

Utilizzando il plugin Ultimate tinyMCE, puoi selezionare il carattere del testo appropriato, specificarne le dimensioni ed elaborare immagini e video in modo più funzionale.

Quando scrivi un articolo, metti le varie emoticon e molto altro nei posti giusti. E anche se non sei un sostenitore dei plugin non necessari, in questo caso l'articolo ti sarà utile, perché in esso mostrerò come implementare alcune delle funzioni utilizzando codici regolari.

Allora, cominciamo! Chiunque lavori con il motore WordPress sa perfettamente come si presenta il pannello di lavoro di un editor visivo standard:

Include un insieme minimo di funzioni che consentono ai web master di scrivere e pubblicare materiale utile sul proprio blog. Personalmente sono abbastanza soddisfatto del set di funzioni standard dell'editor WordPress, ma non tutti ne sono contenti e preferiscono utilizzare altri editor o programmi.

Plug-in TinyMCE definitivo. Miglioramento dell'editor visivo di WordPress

Puoi scaricare il plugin Ultimate TinyMCE. Successivamente, installalo sul tuo blog e attivalo. Per coloro che non sanno come vengono installati i plugin, . Dopo aver installato e attivato il plug-in, nel pannello amministrativo della tua risorsa verrà visualizzata una scheda aggiuntiva Ultimate TinyMCE:

Accedendo alla scheda, vedrai un elenco impressionante di diversi pulsanti, ognuno dei quali ha una funzione specifica. Ora puoi aggiornare il tuo editor visivo con qualsiasi funzionalità mancante presente nel plugin.

Non descriverò ciascun pulsante, perché... La maggior parte di essi è stata tradotta in russo e ognuno di voi sarà in grado di capirli da solo. L'unica cosa degna di nota è la loro implementazione sul blog.

Per visualizzare un determinato pulsante nel pannello di lavoro dell'editor visivo, è sufficiente selezionare la casella accanto al pulsante desiderato nella colonna "Abilita". Inoltre, il plugin ti offre la possibilità di scegliere tu stesso la posizione dei pulsanti, cosa che puoi fare nella colonna “Selezione riga”:

Come probabilmente avrai notato, tutti i pulsanti nel pannello dell'editor si trovano su due righe, ma grazie a Ultimate tinyMCE puoi aumentare il numero di righe a quattro, ma non di più. Ciò è facilitato dal valore “ROW”, che significa “Riga”.

Per impostazione predefinita, ciascuna voce è impostata su “RIGA 1”. Se lasci tutto invariato, la funzione sotto forma di pulsante continuerà la prima riga del pannello dell'editor visivo e apparirà alla fine, dopo tutte le funzioni standard.

Se si seleziona, ad esempio, il valore “RIGA 3” dall'elenco, il pulsante con la funzione si sposterà sulla terza riga. Penso che sia chiaro! Dopo aver attivato tutte le funzioni aggiuntive (ne ho contate 53) e averle sparse lungo le righe, ho ottenuto questa immagine:

Impressionante, non è vero? E ho dimenticato di dire che quando aggiungi o rimuovi qualsiasi funzione, non dimenticare di fare clic sul pulsante "Opzioni pulsanti di aggiornamento" nella parte inferiore del plugin per salvare le impostazioni.

Come estendere la funzionalità dell'editor visivo di WordPress utilizzando il codice

Quindi quali funzionalità puoi aggiungere utilizzando il codice e come lo fai?

1. Puoi aggiungere "Famiglia di caratteri", ad es. puoi scegliere il carattere che ti serve dall'elenco e scrivere con esso un intero post o un breve estratto. Per implementare questa funzione, aprire il file Functions.php per la modifica (percorso del file: /wp-content/themes/nome del tema (modello)/functions.php).

Attenzione: prima di modificare il file Functions.php assicuratevi di farlo per evitare azioni errate!

Dopo aver aperto il file, trova il tag alla fine: ?> e subito prima inserisci questo codice:

add_filter("mce_buttons_2" , "add_fontselect_row_2" ) ; funzione add_fontselect_row_2( $mce_buttons ) ( $pastetext = array_search ("incollatesto", $mce_buttons ) ; $pasteword = array_search ("incollaword", $mce_buttons ) ; $removeformat = array_search ("removeformat", $mce_buttons ) ; annulla impostazione ($mce_buttons [ $incollatesto ] ); unset ( $mce_buttons [ $pasteword ] ) ; unset ( $mce_buttons [ $removeformat ] ) ; array_splice ( $mce_buttons , $pastetext , 0 , "fontselect" ) ; return $mce_buttons ; ) add_filter("tiny_mce_before_init ", "limita_scelte_caratteri"); funzione restring_font_choices( $initArray ) ( $initArray [ "theme_advanced_fonts" ] = "Andale Mono=andale mono,volte;". "Arial=arial,helvetica,sans-serif;". "Arial Black=arial nero,avanguardia;". "Libro Antiqua=libro antiqua,palatino;". "Comic Sans MS=fumetto sans ms,sans-serif;". "Courier New=corriere nuovo,corriere;". "Georgia=georgia,palatino;" . "Helvetica=elvetica;" . "Impatto = impatto, Chicago;" . "Simbolo=simbolo;" . "Tahoma=tahoma,arial,helvetica,sans-serif;". "Terminale=terminale,monaco;" . "Times New Roman=times new roman,times;". "Trabucco MS=trabucco ms, ginevra;". "Verdana=verdana,ginevra;" . "Webdings=webdings;" . "Wingdings = ali, zapf dingbats". "" ; restituire $initArray; )

Salva il file e spostalo nuovamente nella cartella del tema del tuo blog, sostituendo quello vecchio.

2. Aggiungi pulsanti per separatore orizzontale, apice e pedice, dimensione del carattere, modifica degli stili e colore dello sfondo. Per fare ciò, tutto nello stesso file Functions.php, prima dello stesso tag?> aggiungi il seguente pezzo di codice:

funzione add_more_buttons($pulsanti) ( $pulsanti = "hr" ; $pulsanti = "canc" ; $pulsanti = "sub" ; $pulsanti = "sup" ; $pulsanti = "selezionacarattere" ; $pulsanti = "dimensionecarattereseleziona" ; $ pulsanti = "pulizia" ; $pulsanti = "styleselect" ; $pulsanti = "colore sfondo" ; return $pulsanti ; ) add_filter("mce_buttons_3", "add_more_buttons" ) ;

Successivamente, salva nuovamente il file e spostalo nuovamente sul server, sostituendo quello vecchio. Aggiorniamo la pagina con l'editor visuale e vediamo cosa abbiamo ottenuto:

Questo è tutto per me e ora sai anche come aggiungere pulsanti funzionali all'editor di WordPress, espandendo così le sue capacità standard! Auguro a tutti buona fortuna! Ciao e a presto!

Ti piace l'articolo? Forse conosci altre opzioni per migliorare le funzioni standard dell'editor visivo di WordPress? Condividili con i lettori del blog come commenti a questo post.