การบังคับให้โหลดซ้ำของ editor-style.css


11

มีวิธีการบังคับให้รีเฟรชeditor-style.cssเมื่อฉันเปลี่ยนสไตล์ชีทสำหรับตัวแก้ไข TinyMCE ด้วยตนเองหรือไม่? การแก้ไขไม่แสดงขึ้นทันที แต่จะถูกแคชในส่วนผู้ดูแลระบบของแบ็กเอนด์การดูแลระบบ

ตัวอย่างเช่นนี้:

editor-style.css?ver=3393201

หากเป็นเพื่อการพัฒนาของคุณทำไมไม่เพียงแค่ทำการรีเฟรชอย่างหนักในเบราว์เซอร์หรือปิดแคชเบราว์เซอร์
sanchothefat

3
ฉันมีปัญหาเดียวกันและการรีเฟรชอย่างหนักไม่ได้ผลเสมอไป ดูเหมือนว่าแคชจะค่อนข้างดื้อ
Ray Gulick

คำตอบ:


10

'mce_css'มีตะขอสำหรับที่อยู่: มันถูกเรียกใช้_WP_Editors::editor_settings()และคุณจะได้รับจุลภาคสไตล์ที่โหลดทั้งหมดคั่นด้วยพารามิเตอร์ตัวแรกและตัวเดียว

ตอนนี้มันเป็นเรื่องง่าย: ใช้ตัวแปรโกลบอล$editor_styles(นี่คือสไตล์ชีทของเอดิเตอร์ของธีมและธีมหลักที่เก็บไว้แล้ว) เพิ่มเวลาของการแก้ไขครั้งล่าสุดของไฟล์เป็นพารามิเตอร์และสร้างสตริงใหม่

เป็นปลั๊กอิน :

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

ใน WordPress 3.9 ปลั๊กอินนี้ตอนนี้ดูเหมือนว่าจะแบ่งปุ่มแก้ไขภาพ ฉันไม่มีโอกาสลองคิดดูว่าทำไม
mrwweb

การอัปเดตปี 2559 : การเพิ่มรหัสนี้อย่างแน่นอนตามที่เป็น (แต่ในfunctions.phpไฟล์ของฉันแทนที่จะเป็นปลั๊กอิน) ด้วย WP 4.6.1 มันทำงานได้อย่างสมบูรณ์แบบ ดูเหมือนจะไม่มีปัญหาใด ๆ กับการเพิ่มสื่อหรือแก้ไขอินไลน์สื่อ มันบ้าที่คุณไม่สามารถเพิ่มการโต้แย้งadd_editor_cssด้วยfilemtimeวิธีที่คุณสามารถทำได้wp_enqueue_styleหรือแม้กระทั่งสายอักขระขยะในตอนท้ายของชื่อไฟล์ ... แต่ทั้งหมดนี้ใช้งานได้
indextwo

ขอบคุณสำหรับปลั๊กอินที่มีประโยชน์นี้! ฉันใช้กับ WP 4.9.6 ข้อผิดพลาดเดียวที่ฉันพบในขณะนี้คือเมื่อเปิดใช้งานปลั๊กอิน<!--more-->แท็กจะไม่ปรากฏใน TinyMCE ความคิดใดที่ฉันจะแก้ปัญหานี้
pa4080

นี่เป็นการแบ่งการโหลดสไตล์ตัวแก้ไขเริ่มต้น
xsonic

9

ฉันไม่สามารถได้คำตอบ toscho ของการทำงานสำหรับเวอร์ชันปัจจุบันของ WordPress (4.7.2) และที่ดูเหมือนว่าจะเป็นเพราะอาร์เรย์ TinyMCE init มีcache_suffix'wp-mce-' . $tinymce_versionชุด

ดังนั้นคุณสามารถเขียนทับสิ่งนั้นด้วยตัวกรองtiny_mce_before_initแทนเช่น:

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

แน่นอนว่านี่ไม่ดีเท่าfilemtime()แต่อย่างน้อยก็ใช้งานได้ใน 4.7.2

หมายเหตุ:สิ่งนี้ยังเพิ่มแคชบัสเตอร์ให้กับสไตล์ตัวแก้ไขอื่น ๆ (เช่น skin.min.css, content.min.css, dashicons.min.css และ wp-content.css)


2
หากคุณอยู่ในการทดสอบและพัฒนาฉันจะเพิ่มหมายเลข 'รุ่น' ที่จะแตกต่างกันเสมอ วิธีหนึ่งในการทำสิ่งนี้ให้สำเร็จคือการใช้เวลาไม่กี่วินาทีตั้งแต่ Unix Epoch (1 มกราคม 1970 00:00:00 GMT) $mce_init['cache_suffix'] = "v=" . time(); หรือบางสิ่งที่ง่ายกว่าเช่นนี้ $mce_init['cache_suffix'] = "v=" . rand(100000000,999999999);
roberthuttinger

6

แทนที่จะเพียงแค่เรียกadd_editor_styleใช้ไฟล์ CSS ของคุณให้เพิ่มพารามิเตอร์สตริงคิวรีแคชบัสเตอร์:

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

นี่เป็นวิธีที่ง่ายที่สุดที่ทำงานได้อย่างไร้ที่ติทุกครั้ง
antikbd

1
ฉันชอบความเรียบง่ายของวิธีการนี้และความจริงมันไม่ได้เพิ่มสตริงการสืบค้นลงในสไตล์ชีทอื่นที่ไม่เกี่ยวข้อง ฉันรวมสิ่งนี้เข้ากับfilemtime()การอัพเดทแคชอัตโนมัติ:add_editor_style(get_stylesheet_directory_uri() . '/editor-style.css?v=' . filemtime(get_stylesheet_directory() . '/editor-style.css'));
Josh Harrison

กุญแจสำคัญในที่นี้คือใช้เส้นทางที่แน่นอนสำหรับไฟล์ css ที่เป็นปัญหา (เช่นการใช้งานget_template_directory_uri()) เมื่อต่อท้ายแคชบัสเตอร์ มิฉะนั้นจะไม่ทำงาน
Zoli Szabó

3

ฉันมีปัญหาเดียวกัน (2012, WP 3.4.2 !!) แนวทางแก้ไขที่เป็นไปได้ในขณะที่บั๊กนี้อยู่ใกล้:

1) หากคุณใช้ firebug [x] ปิดใช้งานแคชเบราว์เซอร์ในแผงควบคุม Net ช่วย ฉันยังมีปัญหาที่แปลกมากซึ่งตัวแก้ไขสไตล์แคชจะปรากฏขึ้นสั้น ๆ (ใน css-filtered) Firebug net panel ในเสี้ยววินาทีหลังจากหายไปอีกครั้ง ใช้ภาพหน้าจอเพื่อพิสูจน์ตัวเอง

2) การล้างแคชเบราว์เซอร์แบบเต็มช่วยได้ ไม่ว่าด้วยเหตุผลใดหลังจากนั้นปัญหาก็ไม่ปรากฏขึ้นอีก

3) สุดท้ายนี้คำแนะนำที่ฉันต้องการหากคุณต้องทำให้แน่ใจเช่นลูกค้าของคุณในการจัดเตรียมหรือเซิร์ฟเวอร์สดได้รับการปรับปรุงที่เพิ่มขึ้นของคุณ (โดยไม่มีคำแนะนำการล้างแคชที่น่ารำคาญ):

เปลี่ยนตำแหน่งไฟล์และนับใหม่เรื่อย ๆ :

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

แฮ็ค แต่เชื่อถือได้


0

ปัญหาเกี่ยวกับคำตอบที่ยอมรับในเวอร์ชั่นล่าสุดที่ฉันคิดว่าเป็น$editor_stylesอาเรย์เท่านั้นที่มีสไตล์ชีทที่เพิ่มเข้ามาโดยใช้ธีมดังนั้นผลที่ตามมาก็คือมันจะตัดส่วนที่เหลือของสไตล์ชีทที่เพิ่มโดย core wordpress หรือปลั๊กอินจากสตริงที่ส่งคืน

ต่อไปนี้เป็นวิธีแก้ปัญหาที่ฉันเกิดขึ้นหลังจากปรับรหัสคุณสามารถใช้มันในไฟล์ functions.php ของคุณ โซลูชันของฉันใช้ลูปที่ซ้อนกันและตรวจสอบสไตล์ชีทที่มีอยู่ใน$editor_stylesอาร์เรย์และผนวกเวลาที่แก้ไขล่าสุดเป็นพารามิเตอร์เพื่อเคียวรีสตริงและอัพเดตค่าในอาร์เรย์

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);
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.