Memaksa memuat ulang editor-style.css

11

Apakah ada metode untuk memaksa penyegaran editor-style.css, ketika saya mengubah secara manual stylesheet untuk editor TinyMCE? Modifikasi tidak segera ditampilkan tetapi mereka akan di-cache di sisi admin administrasi backend.

Misalnya seperti ini:

editor-style.css?ver=3393201
keatch
sumber
Jika ini untuk tujuan pengembangan Anda mengapa tidak melakukan penyegaran keras di browser atau mematikan cache browser?
sanchothefat
3
Saya memiliki masalah yang sama, dan penyegaran yang keras tidak selalu berhasil. Caching tampaknya cukup keras kepala.
Ray Gulick

Jawaban:

10

Ada hook untuk itu: 'mce_css'. Ini dipanggil _WP_Editors::editor_settings()dan Anda mendapatkan semua stylesheet yang dimuat koma dipisahkan sebagai parameter pertama dan satu-satunya.

Sekarang mudah: Gunakan variabel global $editor_styles(berikut ini adalah stylesheet editor tema tema dan orangtua Anda sudah tersimpan), tambahkan waktu modifikasi terakhir file sebagai parameter dan buat kembali string.

Sebagai 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 );
    }
fuxia
sumber
Di WordPress 3.9 plugin ini sekarang tampaknya mematahkan tombol pengeditan gambar. Saya belum punya kesempatan untuk mencoba mencari tahu mengapa.
mrwweb
Pembaruan 2016 : Menambahkan kode ini apa adanya (tetapi di functions.phpfile saya dan bukannya plugin) dengan WP 4.6.1, berfungsi dengan baik. Sepertinya tidak ada masalah dengan menambahkan media atau mengedit media sebaris. Gila bahwa Anda tidak dapat menambahkan argumen add_editor_cssdengan filemtimecara yang Anda bisa wp_enqueue_style, atau bahkan string sampah di akhir nama file ... tapi ini benar-benar berfungsi.
indextwo
Terima kasih atas plugin yang bermanfaat ini! Saya menggunakannya dengan WP 4.9.6. Satu-satunya bug yang saya temukan saat ini adalah ketika plugin diaktifkan <!--more-->tag tidak ditampilkan dalam TinyMCE. Ada ide bagaimana saya bisa menyelesaikan ini?
pa4080
Ini memecah pemuatan gaya editor default.
xsonic
9

Saya tidak bisa mendapatkan jawaban toscho untuk bekerja untuk versi WordPress saat ini (4.7.2), dan itu tampaknya karena array init TinyMCE memiliki set cache_suffix diatur ke 'wp-mce-' . $tinymce_version.

Jadi sebagai gantinya, Anda bisa menimpanya dengan filter tiny_mce_before_init , seperti:

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

Tentu saja, ini hampir tidak sebagus filemtime(), tetapi setidaknya ini bekerja di 4.7.2.

Catatan: Ini juga menambahkan cache buster ke gaya editor lain (seperti skin.min.css, content.min.css, dashicons.min.css, dan wp-content.css)

icecold_3000
sumber
2
Jika Anda dalam pengujian dan pengembangan aktif, saya akan menambahkan nomor 'versi' yang akan selalu berbeda. Salah satu cara untuk mencapai ini adalah menggunakan detik sejak Unix Epoch (1 Januari 1970 00:00:00 GMT) $mce_init['cache_suffix'] = "v=" . time(); atau sesuatu yang lebih sederhana $mce_init['cache_suffix'] = "v=" . rand(100000000,999999999);
roberthuttinger
6

Alih-alih hanya menelepon add_editor_styledengan file CSS Anda, tambahkan parameter string query buster cache:

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

sumber
Ini adalah metode termudah sejauh ini yang bekerja dengan sempurna setiap saat.
antikbd
1
Saya suka kesederhanaan dari pendekatan ini dan fakta itu tidak menambahkan string kueri ke stylesheet yang tidak terkait lainnya. Saya menggabungkan ini dengan filemtime()untuk mengotomatiskan pembaruan penghilang cache:add_editor_style(get_stylesheet_directory_uri() . '/editor-style.css?v=' . filemtime(get_stylesheet_directory() . '/editor-style.css'));
Josh Harrison
Kuncinya di sini adalah untuk selalu menggunakan jalur absolut untuk file css yang dimaksud (yaitu digunakan get_template_directory_uri()), saat menambahkan cache buster; kalau tidak, itu tidak akan berhasil.
Zoli Szabó
3

Saya memiliki masalah yang sama (2012, WP 3.4.2 !!). Kemungkinan solusi saat bug ini ada:

1) Jika Anda menggunakan pembakar, [x] Nonaktifkan Cache Browser di panel Net membantu. Saya bahkan memiliki masalah yang sangat aneh, bahwa gaya editor cached singkat muncul (dalam css-filtered) panel jaring Firebug untuk sepersekian detik, daripada menghilang lagi. Mengambil tangkapan layar untuk membuktikan kepada diri saya sendiri.

2) Cache browser lengkap membantu. Untuk alasan apa pun sesudahnya masalah itu tidak muncul kembali.

3) Terakhir, saran pilihan saya, jika Anda juga harus memastikan, yaitu klien Anda di staging atau live server mendapatkan peningkatan tambahan Anda (tanpa saran izin cache yang mengganggu):

Pindahkan file dan terus menghitung:

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

Meretas, tetapi dapat diandalkan.

Frank Nocke
sumber
0

Masalah dengan jawaban yang diterima di versi terbaru yang saya asumsikan adalah $editor_stylesarray hanya berisi stylesheet yang ditambahkan menggunakan tema, sehingga sebagai hasilnya strip dari sisa stylesheet ditambahkan oleh core wordpress atau plugin dari string yang kembali.

Berikut ini adalah solusi yang saya buat setelah mengubah kode, Anda dapat menggunakannya dalam file functions.php Anda. Solusi saya menggunakan nested loop dan memeriksa stylesheet yang ada dalam $editor_stylesarray, dan menambahkan waktu yang dimodifikasi terakhir sebagai parameter untuk kueri string dan memperbarui nilai dalam 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);
}
Zorro Di Sini
sumber