如何在Wordpress自定义插件中添加Tinymce所见即所得对话框

Question

我创建了一个自定义按钮，可通过Tinymce对话框插入内容。这是javascript：

tinymce.PluginManager.add("btn_footnote", function( editor ) {
    editor.addButton( "btn_footnote", {
        text: "",
        icon: "insertdatetime",
        image: tinyMCE_object.plugin_dir + "/assets/img/icon.png",
        onclick: function() {
            editor.windowManager.open( {
                title: "Footnote",
                body: [
                    {
                        type   : "textbox",
                        name   : "textbox",
                        multiline : true,
                        layout: "fit",
                        minWidth: 260,
                        minHeight: 160,
                        value  : ""
                    }
                ],
                onsubmit: function( e ) {
                    //Building footnote with shortcode.
                    editor.insertContent( "<span class=\"footnote-container\" data-title=\"" + e.data.num + "\" data-content=\"" + e.data.textbox + "\" id=\"fn" + Math.floor((Math.random() * 1000000) + 1) + "\"><i>[footnote title=\"" + e.data.num + "\"]" + e.data.textbox + "[/footnote]</i></span>");
                }
            });
        }
    });
});

问题是我需要一个所见即所得而不是一个文本框。他们在组件列表（https://www.tiny.cloud/docs/ui-components/dialogcomponents/）中没有所见即所得。

也许有使用扩展插件的解决方案。在这种情况下，如何将它们安装在wordpress自定义插件中？

关于如何实现这一目标的任何想法？