Forzare la ricarica di editor-style.css


11

Esiste un metodo per forzare l'aggiornamento di editor-style.css, quando cambio manualmente il foglio di stile per l'editor TinyMCE? Le modifiche non vengono visualizzate immediatamente ma verranno memorizzate nella cache dal lato amministratore del back-end amministrativo.

Ad esempio in questo modo:

editor-style.css?ver=3393201

Se è per i tuoi scopi di sviluppo, perché non semplicemente eseguire un aggiornamento intenso nel browser o disattivare la cache del browser?
sanchothefat,

3
Ho avuto lo stesso problema e un aggiornamento intenso non sempre funziona. La memorizzazione nella cache sembra essere piuttosto testarda.
Ray Gulick,

Risposte:


10

C'è un gancio che: 'mce_css'. Viene chiamato _WP_Editors::editor_settings()e ottieni tutti i fogli di stile caricati separati da virgola come primo e unico parametro.

Ora è facile: usa la variabile globale $editor_styles(ecco i fogli di stile dell'editor del tuo tema e del tema principale già memorizzati), aggiungi il tempo dell'ultima modifica del file come parametro e ricostruisci la stringa.

Come plugin :

<?php # -*- coding: utf-8 -*-
/**
 * Plugin Name: Refresh Editor Stylesheets
 * Description: Enforces fresh editor stylesheets per version parameter.
 * Version:     2012.07.21
 * Author:      Fuxia
 * Plugin URI:  http://wordpress.stackexchange.com/q/33318/73
 * Author URI:  https://fuxia.me
 * License:     MIT
 * License URI: http://www.opensource.org/licenses/mit-license.php
 */

    add_filter( 'mce_css', 't5_fresh_editor_style' );

    /**
     * Adds a parameter of the last modified time to all editor stylesheets.
     *
     * @wp-hook mce_css
     * @param  string $css Comma separated stylesheet URIs
     * @return string
     */
    function t5_fresh_editor_style( $css )
    {
        global $editor_styles;

        if ( empty ( $css ) or empty ( $editor_styles ) )
        {
            return $css;
        }

        // Modified copy of _WP_Editors::editor_settings()
        $mce_css   = array();
        $style_uri = get_stylesheet_directory_uri();
        $style_dir = get_stylesheet_directory();

        if ( is_child_theme() )
        {
            $template_uri = get_template_directory_uri();
            $template_dir = get_template_directory();

            foreach ( $editor_styles as $key => $file )
            {
                if ( $file && file_exists( "$template_dir/$file" ) )
                {
                    $mce_css[] = add_query_arg(
                        'version',
                        filemtime( "$template_dir/$file" ),
                        "$template_uri/$file"
                    );
                }
            }
        }

        foreach ( $editor_styles as $file )
        {
            if ( $file && file_exists( "$style_dir/$file" ) )
            {
                $mce_css[] = add_query_arg(
                    'version',
                    filemtime( "$style_dir/$file" ),
                    "$style_uri/$file"
                );
            }
        }

        return implode( ',', $mce_css );
    }

In WordPress 3.9 questo plugin ora sembra rompere i pulsanti di modifica delle immagini. Non ho avuto la possibilità di provare a capire perché.
mrwweb,

Aggiornamento 2016 : aggiungendo questo codice esattamente come è (ma nel mio functions.phpfile anziché in un plug-in) con WP 4.6.1, funziona perfettamente. Sembra che non ci siano problemi con l'aggiunta di supporti o la modifica di supporti in linea. E 'pazzesco che non è possibile aggiungere un argomento per add_editor_csscon filemtimeil modo in cui è possibile con wp_enqueue_style, o anche una stringa di immondizia alla fine del nome del file ... ma questo funziona del tutto.
indextwo

Grazie per questo utile plugin! Lo sto usando con WP 4.9.6. L'unico bug che ho trovato al momento è quando il plugin è attivato il <!--more-->tag non viene visualizzato in TinyMCE. Qualche idea su come posso risolvere questo?
pa4080,

Ciò interrompe il caricamento degli stili editor predefiniti.
xsonic,

9

Non sono riuscito a far funzionare la risposta di toscho per l'attuale versione di WordPress (4.7.2), e questo sembra essere dovuto al fatto che l'array init TinyMCE ha un cache_suffix impostato su 'wp-mce-' . $tinymce_version.

Quindi, invece, puoi semplicemente sovrascriverlo con il filtro tiny_mce_before_init , in questo modo:

function wpse33318_tiny_mce_before_init( $mce_init ) {

    $mce_init['cache_suffix'] = 'v=123';

    return $mce_init;    
}
add_filter( 'tiny_mce_before_init', 'wpse33318_tiny_mce_before_init' );

Ovviamente, non è così buono come filemtime(), ma almeno funziona in 4.7.2.

Nota: questo aggiunge anche il busto della cache ad altri stili di editor (come skin.min.css, content.min.css, dashicons.min.css e wp-content.css)


2
Se sei in fase di test e sviluppo attivi, aggiungerei un numero di "versione" che sarà sempre diverso. Un modo per ottenere questo risultato è usare i secondi dall'epoca Unix (1 gennaio 1970 00:00:00 GMT) $mce_init['cache_suffix'] = "v=" . time(); o qualcosa di ancora più semplice $mce_init['cache_suffix'] = "v=" . rand(100000000,999999999);
roberthuttinger

6

Invece di chiamare semplicemente add_editor_stylecon il tuo file CSS, aggiungi un parametro di stringa di query cache buster:

add_action('admin_enqueue_scripts', function(){
  if(is_admin()){
    add_editor_style(get_template_directory_uri().'/assets/css/editor.css?1');
  }
});

Questo è il metodo più semplice finora che funziona perfettamente ogni volta.
Antikbd,

1
Mi piace la semplicità di questo approccio e il fatto che non aggiunge la stringa di query ad altri fogli di stile non correlati. L'ho combinato con filemtime()per automatizzare gli aggiornamenti del busting della cache:add_editor_style(get_stylesheet_directory_uri() . '/editor-style.css?v=' . filemtime(get_stylesheet_directory() . '/editor-style.css'));
Josh Harrison,

La chiave qui è usare sempre il percorso assoluto per i file css in questione (cioè usare get_template_directory_uri()), quando si aggiunge un buster della cache; altrimenti non funzionerà.
Zoli Szabó,

3

Ho avuto lo stesso problema (2012, WP 3.4.2 !!). Possibili soluzioni mentre questo bug è in giro:

1) Se si utilizza firebug, [x] Disabilita la cache del browser nel pannello Rete aiuta. Ho anche avuto un problema molto strano, che lo stile di editor nella cache appare brevemente (in un filtro di rete cb filtrata) per una frazione di secondo, che scompare di nuovo. Ho preso screenshot per dimostrare a me stesso.

2) Una cache del browser completa cancella aiuta. Per qualsiasi motivo in seguito il problema non è riapparso.

3) Infine, il mio consiglio preferito, se anche tu devi assicurarti, cioè i tuoi clienti in staging o server live ottengono i tuoi miglioramenti incrementali (senza nessun fastidioso consiglio di svuotamento della cache):

Riposizionare il file e continuare a contare:

// add_editor_style('editor-style-01.css'); bump for every deployment
// add_editor_style('editor-style-02.css');
add_editor_style('editor-style-03.css');

Hacky, ma affidabile.


0

Il problema con la risposta accettata nelle ultime versioni presumo sia che l' $editor_stylesarray contenga solo fogli di stile aggiunti usando il tema, quindi di conseguenza rimuove il resto dei fogli di stile aggiunti da wordpress core o plugin dalla stringa di ritorno.

Di seguito è la soluzione che mi è venuta in mente dopo aver modificato il codice, puoi usarlo nel tuo file Functions.php. La mia soluzione utilizza un ciclo nidificato e controlla i fogli di stile presenti $editor_stylesnell'array e aggiunge l'ultimo tempo modificato come parametro per eseguire una query sulla stringa e aggiorna il valore nell'array.

add_filter('mce_css', 'fresh_editor_style');

function fresh_editor_style($mce_css_string){
    global $editor_styles;
    $mce_css_list = explode(',', $mce_css_string);

    foreach ($editor_styles as $filename){
        foreach($mce_css_list as $key => $fileurl){
            if(strstr($fileurl, '/' . $filename)){
                $filetime = filemtime(get_stylesheet_directory() . '/' . $filename);
                $mce_css_list[$key] =  add_query_arg('time', $filetime, $fileurl);
            }
        }
    }

    return implode(',', $mce_css_list);
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.