如何将带有颜色选择器的弹出窗口添加到WordPress中的自定义TinyMCE按钮？

Question

如何在WordPress中的TinyMCE按钮上添加一个包含颜色选择器的弹出窗口？我已经创建了一个自定义按钮，当单击该按钮时会插入一个短代码，但是我希望单击按钮时会出现一个弹出窗口，提示用户从自定义颜色中选择一种颜色。选定的颜色将用于更改简码输出的div的边框颜色。

TinyMCE文档不是很有帮助，我已经在Google和Stack Exchange中搜索了实现此方法的方法，但尚未找到解决方案。有关创建弹出窗口的问题很多，而有关创建自定义颜色选择器的问题很多，但没有一个涉及使用颜色选择器创建弹出窗口的问题。

这是我按钮的JS。我假设我需要将代码添加到ed.addButton

的第二个参数中

(function() {

    tinymce.create('tinymce.plugins.my_shortcode_plugin', {
        init : function(ed, url) {
                ed.addCommand('my_shortcode_insert_shortcode', function() {
                    selected = tinyMCE.activeEditor.selection.getContent();

                    if ( selected ) {
                        content = '[my_shortcode]'+ selected +'[/my_shortcode]';
                    } else {
                        content = '[my_shortcode][/my_shortcode]';
                    }

                    tinymce.execCommand('mceInsertContent', false, content);
                });


            ed.addButton('my_shortcode_button', {title : 'Insert my_shortcode', cmd : 'my_shortcode_insert_shortcode', image: url + '/assets/images/my_shortcode-icon.png', // onclick: function() {add popup window with color picker here?}});
        },   
    });

    tinymce.PluginManager.add('my_shortcode_button', tinymce.plugins.my_shortcode_plugin);
})();