TinyMCE plugin won’t work with jQuery 3.5.1 (testing with “Test jQuery Updates”)


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

    // 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.

Lupus 3 months 0 Answers 13 views 0

Leave an answer