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