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.
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.
Share Improve this question asked Oct 31, 2020 at 12:04 LupusLupus 656 bronze badges 6 | Show 1 more comment1 Answer
Reset to default 2I'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.
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 Commented Nov 1, 2020 at 1:03