0

since Wordpress seems to be moving towards a long due jQuery update, I began testing a few of my plugins (they're not published, just stuff I use for a few clients' websites) with the "Test jQuery Updates". Everything went smoothly until yesterday, when I ran into the following issue. I have this simple plugin that adds a few buttons to TinyMCE (yes, the theme I made for that client uses Classic Editor) for them to easily add shortcodes and pre-composed HTML snippets to their posts and pages. The code is pretty standard: first the buttons are registered via a function hooked to the 'mce_buttons' filter hook, then the scripts with the jQuery code for the buttons are loaded via another function hooked to 'mce_external_plugins'. When I run this with the default WP 5.5 jQuery the button shows up in TinyMCE, while if I activate jQuery 3.5.1 (both with and without jQuery migrate), nothing appears and the worse part is that I don't get any errors or warnings in the browser console, so I don't have the faintest idea about what went wrong.

The jQuery goes as follows (I'm posting a stripped down version of the simplest button, which only adds some preformatted HTML to the editor textarea, I used "my_plugin" instead of the real plugin slug for simplicity):

jQuery(function ($) {
    tinymce.create('tinymce.plugins.my_plugin_embed_plugin', {

        init: function (ed, url) {
            // button options
            ed.addButton('my_plugin_button', {
                title: 'Enter title', 
                cmd: 'my_plugin_insert',
                tooltip: 'Enter a featured title',
                classes: 'my_class ',
                icon: 'my_plugin'//class of icon defined in CSS
            });

            ed.addCommand('my_plugin_insert', function () {

                var selected = tinyMCE.activeEditor.selection.getContent();
                var content;

                // if text is selected use that as the title
                if (selected) {
                    content = '<h1 class="my_plugin green">' + selected + '</h1>';
                    tinymce.execCommand('mceInsertContent', false, content);
                } else {
                    ed.windowManager.open({
                        minWidth: '500',
                        title: 'MyPlugin featured title',
                        body: [
                            {
                            type: 'textbox',
                            name: 'title',
                            label: 'Title'
                            }, 
                            {
                                type: 'listbox',
                                name: 'col',
                                label: 'Colour',
                                tooltip: 'Title BG colour',
                                values: [
                                    {
                                        text: 'green',
                                        value: 'green'
                                    },
                                    {
                                        text: 'red',
                                        value: 'red'
                                    },
                                    {
                                        text: 'cyan',
                                        value: 'cyan'
                                    },
                                    {
                                        text: 'arancione',
                                        value: 'arancione'
                                    } 
                                ]
                            }
                        ],
                        onsubmit: function (e) {
                            var purehtml = '<h1 class="my_plugin ' + e.data.col + '">' + e.data.title + '</h1>';
                            ed.insertContent(purehtml);
                        }
                    });
                }

            });
        }
    });
    // Add button
    tinymce.PluginManager.add('my_plugin_button', tinymce.plugins.my_plugin_embed_plugin);
});

Can anyone throw me a bone to get me started on the right direction? Thank you very much in advance.

6
  • But there's hardly any jQuery here? Can I check: TinyMCE itself works fine with the new jQuery, it's just this plugin? Can you try adding console logs to this code to make sure it's being run, and / or run it yourself in the browser console OK? I'd guess the plugin is being run too late and only registering itself with tinymce after it's rendered itself - is there a better event or hook to use for loading plugins than page ready? – Rup Oct 31 '20 at 12:18
  • TinyMCE does work with jQuery 3.5.1, it's just this plugin that fails to run correctly. I had already tried with console.logs inserted in the code above and it always runs, both with default WP jQuery (1.12.4) and the new one... but with the latter the button just isn't rendered. I ruled out the idea of the wrong hook being used because, as I explained, the plugin runs fine with jQuery 1.12.4 and I only switched the jQuery version, so I don't think it should impact on the PHP part in any way. – Lupus Oct 31 '20 at 18:28
  • Oh, sorry, I meant the tinymce.create('tinymce.plugins.my_plugin_embed_plugin', is being run too late in the page's script load order, e.g. if TinyMCE is initialized before your script to add the button has run then it will initialize itself without the button. I meant hook another event in the DOM event model rather than DOMContentLoaded or whichever event jQuery's document ready handler uses, e.g. if TinyMCE has a custom event it uses to mean 'register plugins now'. – Rup Nov 1 '20 at 1:03
  • But then why would it work with theold version of jQuery? I mean if TinyMCE stays the same isn't it supposed to be initialized at the same time with both versions? Anyway unfortunately I'm afraid I don't understand how I'm supposed to do what you're suggesting :( – Lupus Nov 1 '20 at 16:10
  • It was just a guess - the only thing you're using jQuery for is the document ready handler, so what could have changed with that? Just the load order I think. No, I'm not sure exactly how to do what I'm suggesting but then I haven't managed to find the right TinyMCE documentation about loading plugins, so I've no idea if it's actually possible anyway. – Rup Nov 2 '20 at 0:25
2

I'm answering this in case anyone should stumble upon this having the same issue. I just removed the

jQuery(function ($) {

}); 

wrapping from my TinyMCE plugin code and it works perfectly on any browser now. I realised there was no reason to call jQuery since it's not used in the code as Rup correctly pointed out above. I had copy-pasted a code snippet found on the internet as a template and it had the call to jQuery which, I believe, delayed the execution of the plugin (waiting for the DOM to be ready), therefore TinyMCE wasn't correctly initialized. I don't understand why it didn't mess with my plugin on older versions of jQuery but whatever, it's ok now.

1
  • Saved me here with this! Just noticed I was having the same issue... thanks! – Kevin Feb 2 at 16:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.