Quindi questa domanda è stata sollevata molte volte sotto diverse bandiere, tuttavia vorrei presentare un thread unificato per una soluzione definitiva a questo problema.
In WordPress, per impostazione predefinita, quando si passa avanti e indietro tra gli editor HTML e Visual in TinyMCE, alcuni tag vengono rimossi dal contenuto e si verificano altre strane funzionalità. Due soluzioni alternative note per la scrittura di codice HTML più efficiente sono l'utilizzo della rimozione della funzione wp_auto_p mediante i filtri e l'installazione di TinyMCE Advanced e l'attivazione dell'opzione "smetti di rimuovere i tag p & br".
Questo funziona solo così bene, sfortunatamente.
Prendi, ad esempio, il seguente esempio:
<h2>How does it work?</h2>
<p>In order to use jQuery Easy Columns, you must install it as you would any other jQuery plugin. First, download the zip file using the button above. After downloading the file, extract it to a location of your choice, and move the extracted folder to your server using your favorite FTP client. After moving the plugin to your server (and of course calling the jQuery source into your document), call it in on your site using the following snippet of code:</p>
<pre>
<script type="text/javascript" src="/path/to/jquery.easycolumns.js"></script>
</pre>
Se scrivo questo codice nell'editor HTML, con entrambe le opzioni sopra elencate già abilitate, quando passo tra i due diversi editor, non succede nulla, cosa che ci si aspetta. Sfortunatamente, durante il salvataggio, il codice si converte automaticamente in questo:
<h2>How does it work?</h2>
<p>In order to use jQuery Easy Columns, you must install it as you would any other jQuery plugin. First, download the zip file using the button above. After downloading the file, extract it to a location of your choice, and move the extracted folder to your server using your favorite FTP client. After moving the plugin to your server (and of course calling the jQuery source into your document), call it in on your site using the following snippet of code:</p>
<pre>
<script type="text/javascript" src="/path/to/jquery.easycolumns.js"></script>
</pre>
Come puoi vedere, tutte le entità all'interno del pre tag vengono riconvertite in caratteri HTML reali. Quindi, se salvo di nuovo questo stesso post, ottengo qualcosa di simile al seguente:
<h2>How does it work?</h2>
<p>In order to use jQuery Easy Columns, you must install it as you would any other jQuery plugin. First, download the zip file using the button above. After downloading the file, extract it to a location of your choice, and move the extracted folder to your server using your favorite FTP client. After moving the plugin to your server (and of course calling the jQuery source into your document), call it in on your site using the following snippet of code:</p>
<pre><br />
<script type="text/javascript" src="/path/to/jquery.easycolumns.js"></script><br />
</pre>
Si noti che Wordpress in realtà inserirà i tag br nel post. Inutile dire che, quando questo post è stato aggiornato alcune volte, quando lo si visualizza sul frontend, il display non si trova da nessuna parte vicino al display previsto.
L'unico modo in cui mi è sembrato di sbarazzarmi di tutte le "funzionalità di formattazione" aggiunte è stato disabilitare l'editor Visual tramite il mio profilo.
Questa è un'ottima soluzione per me, considerando che sono uno sviluppatore web professionista. Per i miei clienti, questa soluzione è tutt'altro che elegante. I miei clienti, per la maggior parte, useranno l'editor visivo. Molti dei miei clienti non sono molto esperti di tecnologia e talvolta hanno bisogno che io aggiorni i loro post quando il layout si rompe. Questo mi limita a usare l'editor visivo, poiché non posso passare all'editor HTML senza timore di interrompere il layout.
Principalmente, (e penso che ci sia una grande comunità che potrebbe beneficiare di questa risposta), quali passi espliciti posso seguire per garantire quanto segue:
- Un post può essere modificato dall'editor Visual o HTML.
- Il contenuto di un post non viene modificato in alcun modo quando si passa da una scheda all'altra.
- Quando si salva un post dall'editor HTML, non viene aggiunto alcun contenuto aggiuntivo.
- Quando si salva un post dall'editor HTML, nessuna entità viene convertita.
- BONUS: quando si salva un post dall'editor HTML, qualsiasi codice (ad esempio HTML) racchiuso in un pre tag e non già convertito in entità verrà automaticamente convertito in entità.
In sostanza, se siamo in grado di creare il comportamento sopra menzionato in TinyMCE mediante l'uso di un plug-in di terze parti, possiamo porre fine a tutte le altre domande relative alla falsa formattazione mediante l'uso di TinyMCE. Sento che molte persone potrebbero trarne beneficio.
Sembra logico che ci sia una certa funzionalità che ci si aspetterebbe da un editor WYSIWIG, e questo va contro di essa. Secondo ogni logica e ragione, le funzioni di formattazione integrate di Wordpress sono piuttosto inutili con la loro configurazione attuale. Mi sembra che se vogliono usare queste opzioni di formattazione, la loro scommessa migliore sarebbe quella di abilitare un editor o l'altro, non entrambi.
E PER FAVORE: non rispondere a questa discussione con soluzioni alternative e download per altri editor WYSIWIG che "risolvono" il problema. Questo è un problema di fondo (anche se non proprio un bug) con il core di Wordpress che deve essere corretto.
EDIT : Va bene, ho lavorato su questo e penso che il reverse engineering sarà il modo migliore per risolvere questo problema. Quindi per ora, ho disabilitato wpautop (che solo per chiarezza è una funzione che si aggancia al filtro "the_content" per aggiungere tag p e br prima che il testo venga visualizzato , non quando il testo viene salvato. Penso che esista un po 'di confusione per quanto riguarda il funzionamento di questa funzione. wpautop non è responsabile delle modifiche che si verificano quando si passa da una scheda dell'editor all'altra. È qualcosa di completamente diverso.
Comunque, ho disabilitato wpautop, come è buona pratica quando usi l'editor HTML. Da quel momento, ho disabilitato l'editor visivo per iniziare prima con gli errori di entità html presenti durante il salvataggio di un post. Grazie all'aiuto di un C. Bavota, ho trovato uno snippet per convertire qualsiasi tag nell'editor HTML in entità equivalenti prima di visualizzarli sul front-end del sito (credito: http://bavotasan.com/2012/convert -pre-tag-contents-to-html-entity-in-wordpress / ).
#add_filter( 'the_content', 'pre_content_filter', 0 );
/**
* Converts pre tag contents to HTML entities
*
* This function is attached to the 'the_content' filter hook.
*
* @author c.bavota
*/
function pre_content_filter( $content ) {
return preg_replace_callback( '|<pre.*>(.*)</pre|isU' , 'convert_pre_entities', $content );
}
function convert_pre_entities( $matches ) {
return str_replace( $matches[1], htmlentities($matches[1] ), $matches[0] );
}
add_filter( 'the_content', 'pre_content_filter', 10, 2 );
Questo elimina efficacemente i problemi con Wordpress convertendo tutte le entità in tag al momento del salvataggio, eludendolo. Ora puoi utilizzare l'editor HTML e scrivere il codice standard tra i tag "pre" senza eseguire tu stesso la conversione dell'entità. Questo risolve tutti i problemi con la conversione delle entità in Wordpress e assicura che tutto venga visualizzato correttamente sul front-end. Ora, dobbiamo capire cosa agganciare per modificare il comportamento sperimentato quando si fa clic avanti e indietro tra le schede. In questo momento, sembrerebbe che quando si passa dall'HTML alla scheda visiva, i contenuti della scheda HTML vengono interpretati da javascript o qualcosa per cercare di fornire un aggiornamento dal vivo di come dovrebbe apparire il contenuto. Questo fa sì che i tag (che sono visualizzati in forma non entità nella scheda HTML) vengano elaborati anziché visualizzati. Poi, quando si torna alla scheda HTML, sembrerebbe che TinyMCE trasmetta i dati correnti. Ciò significa che quando torni indietro, perdi la tua struttura HTML. Dobbiamo trovare un modo per dire a TinyMCE di convertire tutto in pre tag in entità equivalenti prima di caricarlo nella finestra (essenzialmente la versione backend di ciò che abbiamo fatto sul frontend ma con tinymce e javascript anziché php e hook), in modo che venga visualizzato anziché elaborato. Suggerimenti? s entità equivalenti prima di caricarlo nella finestra (essenzialmente la versione backend di ciò che abbiamo fatto sul frontend ma con tinymce e javascript anziché php e hook), in modo che venga visualizzato anziché elaborato. Suggerimenti? s entità equivalenti prima di caricarlo nella finestra (essenzialmente la versione backend di ciò che abbiamo fatto sul frontend ma con tinymce e javascript anziché php e hook), in modo che venga visualizzato anziché elaborato. Suggerimenti?
EDIT 2 :
Dopo ulteriori ricerche, la conversione delle entità nel pre-tag quando vengono visualizzate funziona correttamente per i contenuti all'interno del pre-tag, ma supponiamo che io abbia un post sul blog con una riga come questa:
"Successivamente, dobbiamo aggiungere questa riga al nostro file HTML: <p> Ciao, mondo! </p>"
Guardando questa riga, puoi dire che il codice dovrebbe essere visualizzato sul sito e non analizzato, tuttavia quando il post viene salvato, queste entità vengono decodificate al successivo caricamento di modifica del post e ad ogni salvataggio successivo vengono salvate come tag html non elaborati, che li induce ad essere analizzati sul front-end. L'unica soluzione a cui riesco a pensare finora sarebbe quella di scrivere in un codice simile per il tag "code" come sto usando per il pre, e quindi avvolgere solo un piccolo liner nel tag "code", e grossi pezzi nel tag "pre". Qualcuno ha altre idee?
