Как добавить всплывающее окно с палитрой цветов в пользовательскую кнопку TinyMCE в WordPress? - PullRequest
Новая
       36

Как добавить всплывающее окно с палитрой цветов в пользовательскую кнопку TinyMCE в WordPress?

0 голосов
/ 02 июня 2019

Как добавить всплывающее окно, содержащее палитру цветов, к кнопке TinyMCE в WordPress?Я уже создал пользовательскую кнопку, которая вставляет шорткод при нажатии, но мне хотелось бы, чтобы при нажатии кнопки отображалось всплывающее окно, в котором пользователю предлагалось бы выбрать цвет из набора пользовательских цветов.Выбранный цвет будет использоваться для изменения цвета границы вывода 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);
})();
...