Using wp_editor in TinyMCE WindowManager dialog

I’m currently writing a plugin that provides an interface for adding shortcodes, very simple dropdown added to the TinyMCE toolbar which opens a TinyMCE dialog box with text fields etc.

This is all working great, the shortcode is created properly and inserted in to the main WP editor.

However, I’m trying to set up a field which is a rich text editor in the dialog box but having some trouble getting it to initialise properly.

Here’s my TinyMCE plugin:

'use strict';

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

        var open_dialog = function(i)
        {
            editor.windowManager.open({
                title: pmsb.config[i].title,
                width: 500,
                height: 300,
                html: jQuery('#' + pmsb.config[i].slug).html(),
                buttons: [
                    {
                        text: 'Cancel',
                        onclick: function() {
                            tinymce.activeEditor.windowManager.close();
                            jQuery("select.pmsb-chosen").select2('destroy');
                        }
                    },
                    {
                        text: 'Insert Shortcode',
                        onclick: function(e)
                        {
                            var form        = jQuery('#' + this._id).closest('.mce-floatpanel').find('.pmsb-form'),
                                form_values = [],
                                args="";

                            var form_data = form.serializeArray();

                            for(var ii = 0; ii < form_data.length; ii++) {
                                args += ' ' + form_data[ii].name + '="' + form_data[ii].value + '"';
                            }

                            editor.insertContent('[' + pmsb.config[i].slug + args + ']');

                            tinymce.activeEditor.windowManager.close();

                            jQuery("select.pmsb-chosen").select2('destroy');
                        }
                    }
                ]
            });
        }

        var menu = pmsb.config.map(function(config, i) {
            return {
                text: config.title,
                onclick: function() {
                    open_dialog(i);
                }
            }
        });

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

However, the TinyMCE area seems to load the correct markup but the functionality doesn’t work at all. You can’t click any of the buttons to actually do anything (please see image below).

enter image description here

The TinyMCE editor is loaded in to the page using:

wp_editor('', 'iistest', ['teeny' => true]);

I’ve tried reinitialising the editor in the open dialog function and in many other places but I can’t get this working properly.

Any help or suggestions would be a huge help!

0

Leave a Comment