Forçando a recarga do editor-style.css


11

Existe um método para forçar a atualização editor-style.css, quando altero manualmente a folha de estilo para o editor TinyMCE? A modificação não aparece imediatamente, mas eles serão armazenados em cache no lado do administrador do back-end de administração.

Por exemplo, assim:

editor-style.css?ver=3393201

Se for para fins de desenvolvimento, por que não apenas atualizar o navegador ou desativar o cache do navegador?
Sanchothefat

3
Eu tive o mesmo problema, e uma atualização difícil nem sempre funciona. O cache parece ser bastante teimoso.
precisa

Respostas:


10

Há um gancho para que: 'mce_css'. É chamado _WP_Editors::editor_settings()e você obtém todas as vírgulas carregadas separadas por vírgula como o primeiro e único parâmetro.

Agora é fácil: use a variável global $editor_styles(aqui estão as folhas de estilo do editor do tema e do tema pai já armazenadas), adicione a hora da última modificação do arquivo como parâmetro e reconstrua a string.

Como um 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 );
    }

No WordPress 3.9, este plugin agora parece quebrar os botões de edição de imagem. Não tive a chance de tentar descobrir o porquê.
mrwweb

Atualização de 2016 : Adicionando esse código exatamente como está (mas no meu functions.phparquivo, em vez de em um plug-in) com o WP 4.6.1, ele funciona perfeitamente. Parece não haver problemas com a adição de mídia ou a edição de mídia embutida. É uma loucura que você não pode adicionar um argumento para add_editor_csscom filemtimea maneira que você pode com wp_enqueue_style, ou até mesmo uma corda lixo no final do nome do arquivo ... mas isso funciona totalmente.
indextwo

Obrigado por este útil plugin! Estou usando-o com o WP 4.9.6. O único bug que encontrei no momento é que quando o plug-in é ativado, a <!--more-->tag não é exibida no TinyMCE. Alguma idéia de como posso resolver isso?
pa4080 30/05

Isso interrompe o carregamento dos estilos padrão do editor.
xsonic 18/02/19

9

Não consegui que a resposta do toscho funcionasse para a versão atual do WordPress (4.7.2), e isso parece ser porque o array init do TinyMCE tem um cache_suffix definido como 'wp-mce-' . $tinymce_version.

Portanto, você pode simplesmente substituí-lo pelo filtro tiny_mce_before_init , da seguinte maneira:

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' );

Obviamente, isso não é tão bom quanto filemtime(), mas pelo menos isso funciona no 4.7.2.

Nota: Isso também adiciona o buster de cache a outros estilos de editor (como skin.min.css, content.min.css, dashicons.min.css e wp-content.css)


2
Se você estiver em testes e desenvolvimento ativos, eu adicionaria um número de 'versão' que sempre será diferente. Uma maneira de fazer isso é usando segundos desde o Unix Epoch (1 jan 1970 00:00:00 GMT) $mce_init['cache_suffix'] = "v=" . time(); ou algo ainda mais simples como $mce_init['cache_suffix'] = "v=" . rand(100000000,999999999);
roberthuttinger

6

Em vez de apenas chamar o add_editor_styleseu arquivo CSS, adicione um parâmetro de string de consulta do buster de cache:

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

Até agora, este é o método mais fácil que funciona perfeitamente.
Antikbd

1
Gosto da simplicidade dessa abordagem e do fato de ela não adicionar a sequência de consultas a outras folhas de estilo não relacionadas. Eu combinei isso com filemtime()a atualizações de cachebuster Automatize:add_editor_style(get_stylesheet_directory_uri() . '/editor-style.css?v=' . filemtime(get_stylesheet_directory() . '/editor-style.css'));
Josh Harrison

A chave aqui é sempre usar o caminho absoluto para o (s) arquivo (s) css em questão (ou seja, usar get_template_directory_uri()), ao anexar um buster de cache; caso contrário, não funcionará.
Zoli Szabó

3

Eu tive o mesmo problema (2012, WP 3.4.2 !!). Possíveis soluções enquanto esse bug estiver por aí:

1) Se você usa o firebug, [x] Desativar cache do navegador no painel Rede ajuda. Eu até tive um problema muito estranho, que o estilo de editor em cache aparece brevemente (em um painel de rede filtrado por css) Firebug por uma fração de segundo, que desaparece novamente. Tomou screenshots para provar a mim mesmo.

2) Uma limpeza completa do cache do navegador ajuda. Por qualquer motivo posterior, o problema não reapareceu.

3) Por fim, meu conselho preferido, se você também tiver certeza, ou seja, seus clientes no armazenamento temporário ou no servidor ativo receberão suas melhorias incrementais (sem qualquer aviso irritante de liberação de cache):

Realoque o arquivo e continue contando:

// 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, mas confiável.


0

O problema com as respostas aceitas nas versões mais recentes, presumo, é que o $editor_stylesarray contém apenas folhas de estilo adicionadas usando o tema, portanto, retira o restante das folhas de estilo adicionadas pelo núcleo wordpress ou plugins da string de retorno.

A seguir está a solução que eu encontrei após ajustar o código, você pode usá-lo no seu arquivo functions.php. Minha solução usa loop aninhado e verifica as folhas de estilo presentes na $editor_stylesmatriz e acrescenta a última hora da modificação como parâmetro para consultar a string e atualiza o valor na matriz.

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);
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.