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 不喜欢这个函数 - 即使它构建正确。

我曾想过以不同的方式执行此操作 - 通过创建一个输出正确 JS 的 PHP 文件，但如果我这样做，在使用 mce_external_plugins 动作钩子时，我无法将其注册为 TinyMCE 插件。

我发现了另一个问题，它遇到了同样的问题，但没有答案。

我真的用这个碰壁了，任何帮助将不胜感激！