Forcer le rechargement de editor-style.css


11

Existe-t-il une méthode pour forcer l'actualisation de editor-style.css, lorsque je modifie manuellement la feuille de style pour l'éditeur TinyMCE? Les modifications ne s'affichent pas immédiatement, mais elles seront mises en cache dans le côté administrateur du backend d'administration.

Par exemple, comme ceci:

editor-style.css?ver=3393201

Si c'est à des fins de développement, pourquoi ne pas simplement effectuer une actualisation matérielle dans le navigateur ou désactiver le cache du navigateur?
sanchothefat

3
J'ai eu le même problème et un rafraîchissement brutal ne fonctionne pas toujours. La mise en cache semble être assez têtue.
Ray Gulick

Réponses:


10

Il y a un crochet pour que: 'mce_css'. Il est appelé _WP_Editors::editor_settings()et vous obtenez toutes les feuilles de style chargées séparées par une virgule comme premier et seul paramètre.

Maintenant, c'est facile: utilisez la variable globale $editor_styles(voici les feuilles de style de l'éditeur de votre thème et de votre thème parent déjà stockées), ajoutez l'heure de la dernière modification du fichier comme paramètre et reconstruisez la chaîne.

En tant que 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 );
    }

Dans WordPress 3.9, ce plugin semble maintenant briser les boutons d'édition d'image. Je n'ai pas eu l'occasion d'essayer de comprendre pourquoi.
mrwweb

Mise à jour 2016 : Ajouter ce code exactement tel functions.phpquel (mais dans mon fichier plutôt qu'un plugin) avec WP 4.6.1, cela fonctionne parfaitement. Il ne semble pas y avoir de problème avec l'ajout de médias ou l'édition de médias en ligne. C'est fou que vous ne puissiez pas ajouter d'argument add_editor_cssavec filemtimela façon dont vous le pouvez wp_enqueue_style, ou même une chaîne de caractères à la fin du nom de fichier ... mais cela fonctionne totalement.
indextwo

Merci pour ce plugin utile! Je l'utilise avec WP 4.9.6. Le seul bug que j'ai trouvé en ce moment est lorsque le plugin est activé, la <!--more-->balise n'est pas affichée dans TinyMCE. Des idées comment puis-je résoudre ce problème?
pa4080

Cela interrompt le chargement des styles d'éditeur par défaut.
xsonic

9

Je n'ai pas pu obtenir la réponse de toscho pour travailler avec la version actuelle de WordPress (4.7.2), et cela semble être dû au fait que le tableau d'initialisation TinyMCE a un cache_suffix défini sur 'wp-mce-' . $tinymce_version.

Donc, à la place, vous pouvez simplement écraser cela avec le filtre tiny_mce_before_init , comme ceci:

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

Bien sûr, ce n'est pas aussi bon filemtime(), mais au moins cela fonctionne dans 4.7.2.

Remarque: Cela ajoute également le cache cache à d'autres styles d'éditeur (comme skin.min.css, content.min.css, dashicons.min.css et wp-content.css)


2
Si vous êtes en test et développement actif, j'ajouterais un numéro de «version» qui sera toujours différent. Une façon d'y parvenir est d'utiliser les secondes depuis l'époque Unix (1er janvier 1970 00:00:00 GMT) $mce_init['cache_suffix'] = "v=" . time(); ou quelque chose de plus simple comme $mce_init['cache_suffix'] = "v=" . rand(100000000,999999999);
roberthuttinger

6

Au lieu d'appeler simplement add_editor_styleavec votre fichier CSS, ajoutez un paramètre de chaîne de requête de cache buster:

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

C'est la méthode la plus simple à ce jour qui fonctionne parfaitement à chaque fois.
antikbd

1
J'aime la simplicité de cette approche et le fait qu'elle n'ajoute pas la chaîne de requête à d'autres feuilles de style sans rapport. J'ai combiné cela avec filemtime()pour automatiser les mises à jour de contournement du cache:add_editor_style(get_stylesheet_directory_uri() . '/editor-style.css?v=' . filemtime(get_stylesheet_directory() . '/editor-style.css'));
Josh Harrison

La clé ici est de toujours utiliser le chemin absolu pour le (s) fichier (s) css en question (c'est-à-dire utiliser get_template_directory_uri()), lors de l'ajout d'un cache cache; sinon cela ne fonctionnera pas.
Zoli Szabó

3

J'ai eu le même problème (2012, WP 3.4.2 !!). Solutions possibles pendant que ce bug existe:

1) Si vous utilisez Firebug, [x] Désactiver le cache du navigateur dans le panneau Net vous aide. J'ai même eu un problème très étrange, à savoir que le style de l'éditeur mis en cache apparaît brièvement (dans un panneau net Firebug filtré par CSS) pendant une fraction de seconde, puis disparaît à nouveau. J'ai pris des captures d'écran pour me prouver.

2) Un cache de navigateur complet efface les aides. Pour quelque raison que ce soit par la suite, le problème n'est pas réapparu.

3) Enfin, mon conseil préféré, si vous devez également vous assurer, c'est-à-dire que vos clients sur le serveur intermédiaire ou en direct obtiennent vos améliorations incrémentielles (sans aucun conseil gênant de suppression du cache):

Déplacer le fichier et continuer à compter:

// 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, mais fiable.


0

Le problème avec la réponse acceptée dans les dernières versions, je suppose, est que le $editor_stylestableau ne contient que des feuilles de style ajoutées à l'aide du thème, de sorte qu'il supprime le reste des feuilles de style ajoutées par core wordpress ou les plugins de la chaîne de retour.

Voici la solution que j'ai trouvée après avoir modifié le code, vous pouvez l'utiliser dans votre fichier functions.php. Ma solution utilise une boucle imbriquée et vérifie les feuilles de style présentes dans le $editor_stylestableau, et ajoute la dernière heure modifiée comme paramètre pour interroger la chaîne et met à jour la valeur dans le tableau.

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);
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.