Why is TinyMCE 4.x not using updated CSS even with forced reload?

admin管理员组

文章数量:1122832

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 months ago.

Improve this question

I'm running TinyMCE Version 4.9.11 in a ClassicPress V2.1 site.

This is (part of) my code to setup tinyMCE:

function my_mce_before_init_insert_formats( $init_array ) {  
    $style_formats = [
        ['title' => 'Headings', 'items' => [
            [ 'title' => 'Heading 2', 'format' => 'h2' ],
            [ 'title' => 'Heading 3', 'format' => 'h3' ],
            [ 'title' => 'Heading 4', 'format' => 'h4' ],
            [ 'title' => 'Heading 5', 'format' => 'h5' ],
            [ 'title' => 'Heading 6', 'format' => 'h6' ]
        ]
    ],
        ['title' => 'Styles', 'items' => [
            ['title' => 'Accent1', 'inline' => 'span', 'styles' => ['color' => 'var(--clr-accent)']],
            ['title' => 'Zitat', 'inline' => 'q', 'styles' => ['color' => 'var(--clr-quote)']]
            ]
        ]
    ];
    $init_array['content_css'] = '/wp-content/themes/qpoolbasic/styles/textbasic.css';
    $init_array['style_formats'] = json_encode( $style_formats );
    $init_array['preview_styles'] = 'font-family font-size font-weight font-style text-decoration text-transform color background-color border border-radius outline text-shadow';
    return $init_array;
} 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

The textbasic.css looks like this:

:root {
    --clr-accent:#f00;
    --clr-quote:#00f;
}
h2 {background:#ff0; border-bottom:1px solid #f0f;}
h3 {background:#ff0; border-bottom:1px solid #f0f;}

The :root-colors get applied and I can see them in the inspector. However, the h2/h3-settings dont get applied and if I inspect the tags, the setting are not listed.

Does someone know, why this is?

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 months ago.

Improve this question

I'm running TinyMCE Version 4.9.11 in a ClassicPress V2.1 site.

This is (part of) my code to setup tinyMCE:

function my_mce_before_init_insert_formats( $init_array ) {  
    $style_formats = [
        ['title' => 'Headings', 'items' => [
            [ 'title' => 'Heading 2', 'format' => 'h2' ],
            [ 'title' => 'Heading 3', 'format' => 'h3' ],
            [ 'title' => 'Heading 4', 'format' => 'h4' ],
            [ 'title' => 'Heading 5', 'format' => 'h5' ],
            [ 'title' => 'Heading 6', 'format' => 'h6' ]
        ]
    ],
        ['title' => 'Styles', 'items' => [
            ['title' => 'Accent1', 'inline' => 'span', 'styles' => ['color' => 'var(--clr-accent)']],
            ['title' => 'Zitat', 'inline' => 'q', 'styles' => ['color' => 'var(--clr-quote)']]
            ]
        ]
    ];
    $init_array['content_css'] = '/wp-content/themes/qpoolbasic/styles/textbasic.css';
    $init_array['style_formats'] = json_encode( $style_formats );
    $init_array['preview_styles'] = 'font-family font-size font-weight font-style text-decoration text-transform color background-color border border-radius outline text-shadow';
    return $init_array;
} 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

The textbasic.css looks like this:

:root {
    --clr-accent:#f00;
    --clr-quote:#00f;
}
h2 {background:#ff0; border-bottom:1px solid #f0f;}
h3 {background:#ff0; border-bottom:1px solid #f0f;}

The :root-colors get applied and I can see them in the inspector. However, the h2/h3-settings dont get applied and if I inspect the tags, the setting are not listed.

Does someone know, why this is?

• css
• tinymce

Share Improve this question edited Aug 14, 2024 at 16:04 rhavin asked Aug 14, 2024 at 13:11 rhavinrhavin 12166 bronze badges 2

• note that ClassicPress has changes and differences to WordPress, a solution that works in WordPress may not work the same in ClassicPress and vice versa – Tom J Nowell ♦ Commented Aug 14, 2024 at 13:21
• @TomJNowell I dont think that this has something to do with ClassicPress, this guy has exactrly the same problem: drupal.org/forum/support/post-installation/2006-12-12/… – rhavin Commented Aug 14, 2024 at 14:28

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I found it. My god, is this poorly documented :D

TinyMCE not only applies your given stylesheet, it caches an additional copy of it. Because reasons. So if you change something like I did and then control reload everything, you reload the copied cached version. The solution is to add another parameter that you change every time you actually change something in the css. That parameter is called cache_suffix:

$init_array['cache_suffix'] = 'v=SomeVersionNumber';

That parameter is nowhere mentioned in the content_css section – because why should it? – so if you stumble upon this having the same issue, that is how you do it.

本文标签： Why is TinyMCE 4x not using updated CSS even with forced reload