Custom quicktags not working after Wordpress 6.0

Question

Custom quicktags not working after Wordpress 6.0

Dominator0

2022年5月29日 19:37

wp 5.8.x/5.9.x: working -- wp 6.0: not working

Buttons are not showing here: https://imgur.com/a/T05o0WX

Console error: Uncaught ReferenceError: QTags is not defined

I am using this code.

    function my_quicktags() {

    if ( wp_script_is( 'quicktags' ) ) {
    ?
    script type=text/javascript
    QTags.addButton( 'eg_php', 'PHP', 'precode class=\language-php\', '/code/pre', 'p', 'PHP Code', 200 );
    QTags.addButton( 'eg_css', 'CSS', 'precode class=\language-css\', '/code/pre', 'q', 'CSS Code', 201 );
    QTags.addButton( 'eg_html', 'HTML', 'precode class=\language-html\', '/code/pre', 'r', 'HTML Code', 202 );
    QTags.addButton( 'eg_callback', 'CSS div', css_callback );

    function css_callback(){
        var css_class = prompt( 'Class name:', '' );

        if ( css_class  css_class !== '' ) {
            QTags.insertContent('div class=' + css_class +'/div');
        }
    }
    /script
    ?php
    }

}
add_action( 'admin_print_footer_scripts', 'my_quicktags' );

Topic quicktag Wordpress

Category Web

Tom J Nowell · Accepted Answer · 2022年5月29日 19:37

You can use wp_add_inline_script to add more quicktags, ensuring it only runs when quicktags is used, and runs after it's loaded:

function add_quicktag_paragraph() {
    wp_add_inline_script(
        'quicktags',
        "QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', 'p',     'Paragraph tag', 1 );"
);
add_action( 'wp_enqueue_scripts', 'add_quicktag_paragraph' );

Here the second parameter of wp_add_inline_script gets put into a <script> tag by WordPress, and it places it so that it shows after quicktags is loaded, not before. I've places a single line of code in my example but you could insert multiple lines instead.

This solves several problems the original snippet in the handbook had:

it works on non-admin pages that use quicktags
it always runs the code after quicktags is loaded, not before.
no hardcoded script tags
it's possible to filter and process this because of wp_add_inline_script
if a plugin removes the quicktags code then this will not show and break

Another alternative is to write a JS file with your quicktags additions, and enqueue it, declaring quicktags as a dependency. This ensures it is always loaded in the correct order.

Dominator0 · Accepted Answer · 2022年5月29日 13:54

1

Dominator0 answered at 2022年5月29日 13:54

Another fix..

   <script type="text/javascript">
    window.addEventListener('DOMContentLoaded', () => {
      QTags.addButton( 'test', 'Test', '<test>', '</test>', 'test' );
    });
    </script>

kegnum · Accepted Answer · 2022年5月29日 04:36

Found a fix.

    <script type="text/javascript">
           window.onload=function(){ 


    }
</script>

make sure the JS loads after the page fully loads this will allow the qtags js to work. Had the same issue as you right after I updated to 6.0. This fixed it for me.

Nick R. · Accepted Answer · 2022年5月27日 13:20

I had the same problem. I fixed it by using the ep_enqueue_script aproach shown here: https://codex.wordpress.org/Quicktags_API listed under "A more modern example".

It's the same thing that Tom mentions. Instead of using 'admin_print_fotter_scripts' to write an inline script on the page, the example shows putting the Qtags javascript in a separate JS file, and loading it with 'admin_enqueue_scripts' as the action and calling wp_enqueue_script.

The Quicktags_API link above shows both methods, but the inline script method stoped working for me.

Custom quicktags not working after Wordpress 6.0

About