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.
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
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.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0