Forzar la recarga de editor-style.css


11

¿Hay algún método para forzar la actualización editor-style.csscuando cambio manualmente la hoja de estilo para el editor TinyMCE? La modificación no se muestra de inmediato, pero se almacenarán en caché en el lado de administración del backend de administración.

Por ejemplo así:

editor-style.css?ver=3393201

Si es para fines de desarrollo, ¿por qué no hacer una actualización completa en el navegador o apagar la memoria caché del navegador?
sanchothefat

3
He tenido el mismo problema y una actualización completa no siempre funciona. El almacenamiento en caché parece ser bastante terco.
Ray Gulick el

Respuestas:


10

Hay un gancho para que: 'mce_css'. Se llama _WP_Editors::editor_settings()y obtiene todas las hojas de estilo cargadas separadas por comas como el primer y único parámetro.

Ahora es fácil: use la variable global $editor_styles(aquí están almacenadas las hojas de estilo del editor de su tema principal y del tema principal), agregue la hora de la última modificación del archivo como parámetro y reconstruya la cadena.

Como un complemento :

<?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 );
    }

En WordPress 3.9, este complemento ahora parece romper los botones de edición de imágenes. No he tenido la oportunidad de tratar de averiguar por qué.
mrwweb

Actualización 2016 : Agregar este código exactamente como está (pero en mi functions.phparchivo en lugar de un complemento) con WP 4.6.1, funciona perfectamente. No parece haber ningún problema al agregar medios o editar medios en línea. Es una locura que no puedas agregar un argumento add_editor_csscon filemtimela forma en que puedes hacerlo wp_enqueue_style, o incluso una cadena de basura al final del nombre de archivo ... pero esto funciona totalmente.
indextwo

¡Gracias por este útil complemento! Lo estoy usando con WP 4.9.6. El único error que encontré en este momento es que cuando el complemento está activado, la <!--more-->etiqueta no se muestra en TinyMCE. ¿Alguna idea de cómo puedo resolver esto?
pa4080

Esto interrumpe la carga de los estilos de editor predeterminados.
xsonic

9

No pude obtener la respuesta de toscho para trabajar para la versión actual de WordPress (4.7.2), y eso parece ser porque la matriz de inicio TinyMCE tiene un cache_suffix configurado en 'wp-mce-' . $tinymce_version.

Entonces, en su lugar, puede sobrescribir eso con el filtro tiny_mce_before_init , así:

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

Por supuesto, esto no es tan bueno como filemtime(), pero al menos esto funciona en 4.7.2.

Nota: Esto también agrega el buster de caché a otros estilos de editor (como skin.min.css, content.min.css, dashicons.min.css y wp-content.css)


2
Si está en pruebas y desarrollo activos, agregaría un número de 'versión' que siempre será diferente. Una forma de lograr esto es usar segundos desde la época de Unix (1 de enero de 1970 00:00:00 GMT) $mce_init['cache_suffix'] = "v=" . time(); o algo aún más simple como $mce_init['cache_suffix'] = "v=" . rand(100000000,999999999);
roberthuttinger

6

En lugar de simplemente llamar add_editor_stylecon su archivo CSS, agregue un parámetro de cadena de consulta del destructor de caché:

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

Este es el método más fácil hasta ahora que funciona sin problemas cada vez.
antikbd

1
Me gusta la simplicidad de este enfoque y el hecho de que no agrega la cadena de consulta a otras hojas de estilo no relacionadas. Combiné esto con filemtime()para automatizar las actualizaciones de eliminación de caché:add_editor_style(get_stylesheet_directory_uri() . '/editor-style.css?v=' . filemtime(get_stylesheet_directory() . '/editor-style.css'));
Josh Harrison

La clave aquí es usar siempre la ruta absoluta para el (los) archivo (s) css en cuestión (es decir, usar get_template_directory_uri()), al agregar un buster de caché; de lo contrario no funcionará.
Zoli Szabó

3

Tuve el mismo problema (2012, WP 3.4.2 !!). Posibles soluciones mientras este error esté presente:

1) Si usa firebug, [x] Desactivar la Caché del navegador en el panel Red ayuda. Incluso tuve un problema muy extraño, que el estilo de editor en caché aparece brevemente (en un panel de red Firebug filtrado por CSS) por una fracción de segundo, que desaparece nuevamente. Tomé capturas de pantalla para demostrarme a mí mismo.

2) Un caché de navegador completo claro ayuda. Por alguna razón posterior, el problema no volvió a aparecer.

3) Por último, mi consejo preferido, si tiene que asegurarse también, es decir, sus clientes en el servidor provisional o en vivo obtienen mejoras incrementales (sin ningún consejo molesto de eliminación de caché):

Reubique el archivo y siga 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, pero confiable.


0

Supongo que el problema con la respuesta aceptada en las últimas versiones es que la $editor_stylesmatriz solo contiene hojas de estilo agregadas usando el tema, por lo que elimina el resto de las hojas de estilo agregadas por WordPress o complementos centrales de la cadena de retorno.

La siguiente es la solución que se me ocurrió después de ajustar el código, puede usarlo en su archivo functions.php. Mi solución usa un bucle anidado y comprueba las hojas de estilo presentes en la $editor_stylesmatriz, y agrega la última hora modificada como parámetro para consultar la cadena y actualiza el valor en la 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);
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.