I am using the wordpress filter mce_external_plugins
to register new plugins for the default editor. This is what a plugin looks like in the JavaScript file:
tinymce.PluginManager.add('toggle2CheckList', function (editor) {
// plugin logic
});
The PHP file where I register these plugins look like this:
function tiny_mce_add_buttons($plugins) {
// LINE WORKS, but no good for production!
$plugins_url = get_template_directory_uri() . '/assets/scripts/plugins/tiny-mce.js';
// WANT TO GET THE BELOW LINE TO WORK!
//$plugins_url = App\asset_path('scripts/tiny-mce.js');
$plugins['toggle2CheckList'] = $plugins_url;
return $plugins;
}
function tiny_mce_register_buttons_row_1( $buttons ) {
$newBtns = array(
'toggle2CheckList',
);
$buttons = array_merge( $buttons, $newBtns );
return $buttons;
}
}
The problem is when I link it from the dist/ folder, webpack wraps it in an IIFE. The wordpress hook does not like this it appears. I commented out my attempts to get it to link via the dist folder. In doing so, it breaks. (Neither attempt returns a 404, just nothing - no error, just no registered plugins). App\asset_path('scripts/tiny-mce.js')
I can see it is returning the proper dist path, but does not load any plugins or show an error. If I go to the dist folder and manually edit tiny-mce.js from there and remove the wrapper webpack adds, it loads fine.
However, I know this won’t be ideal deploying to production. What can I do in this case? Can I get webpack to ignore this file for an IIFE?
Or is there some admin place that would make more sense to put this script? I am doubting the solution is to somehow make wordpress work past a webpack IIFE but could be wrong.
Just for more reference, this is the IIFE causing problems from the compiled JS:
/******/ (function() { // webpackBootstrap
var __webpack_exports__ = {};