JavaScript — динамические кнопки / методы TinyMCE

Я пытаюсь создать плагин для WordPress, который позволяет легко добавить выпадающее меню с элементами для вставки шорткодов. Для этого мне нужно «подключиться» к TinyMCE, зарегистрировав собственный плагин. Я планирую разрешить пользователям настраивать пункты меню шорткода с помощью простого массива PHP.

Создается следующий класс, который регистрирует новую кнопку и скрипт плагина:

<?php

namespace PaperMoon\ShortcodeButtons;

defined('ABSPATH') or die('Access Denied');

class TinyMce {

public function __construct()
{
$this->add_actions();
$this->add_filters();
}

private function add_actions()
{
add_action('admin_head', [$this, 'print_config']);
}

public function print_config()
{
$shortcodes_config = include PMSB_PLUGIN_PATH . 'lib/shortcodes-config.php'; ?>

<script type='text/javascript' id="test">
var pmsb = {
'config': <?php echo json_encode($shortcodes_config); ?>
};
</script> <?php
}

private function add_filters()
{
add_filter('mce_buttons', [$this, 'register_buttons']);
add_filter('mce_external_plugins', [$this, 'register_plugins']);
}

public function register_buttons($buttons)
{
array_push($buttons, 'shortcodebuttons');

return $buttons;
}

public function register_plugins($plugin_array)
{
$plugin_array['shortcodebuttons'] = PMSB_PLUGIN_URL . 'assets/js/tinymce.shortcodebuttons.js';

return $plugin_array;
}

}

Пользователь может создать массив PHP следующим образом (который включен в вышеприведенный класс и выводится как переменная javascript в заголовке):

<?php

return [
[
'title'     => 'Test Shortcode',
'slug'      => 'text_shortcode',
'fields'    => [
'type'  => 'text',
'name'  => 'textboxName',
'label' => 'Text',
'value' => '30'
]
],
[
'title'     => 'Test Shortcode2',
'slug'      => 'text_shortcode2',
'fields'    => [
'type'  => 'text',
'name'  => 'textboxName2',
'label' => 'Text2',
'value' => '30'
]
]
];

Наконец, вот фактический скрипт плагина:

"use strict";

(function() {
tinymce.PluginManager.add('shortcodebuttons', function(editor, url) {
var menu = [];

var open_dialog = function(i)
{
console.log(pmsb.config[i]);

editor.windowManager.open({
title: pmsb.config[i].title,
body: pmsb.config[i].fields,
onsubmit: function(e) {
editor.insertContent('[' + pmsb.config[i].slug + ' textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]');
}
});
}

for(let i = 0; i <= pmsb.config.length - 1; i++) {
menu[i] = {
text: pmsb.config[i].title,
onclick: function() {
open_dialog(i)
}
}
}

console.log(menu);

editor.addButton('shortcodebuttons', {
text: 'Shortcodes',
icon: false,
type: 'menubutton',
menu: menu
});
});
})();

Кнопка регистрируется нормально, пункты меню также регистрируются нормально, но когда дело доходит до щелчка, чтобы открыть модальное окно, я получаю эту ошибку:

Uncaught Error: Could not find control by type: text

Я думаю, что это как-то связано с тем фактом, что «поля» происходят от функции, которая по какой-то причине TinyMCE не нравится — даже если она построена правильно.

Я думал сделать это по-другому — создав файл PHP, который выводит правильный JS, но если я это сделаю, я не могу зарегистрировать его как плагин TinyMCE при использовании mce_external_plugins действие крюк.

я нашел Другой вопрос который столкнулся с той же проблемой без ответа.

Я действительно врезался в стену с этим, любая помощь будет очень признательна!