2

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!

  • You need to remove the ['teeny' => true] part. Setting the editor to teeny mode only outputs the minimal editor as used in the "Press This" editor. Simply loading the editor using wp_editor( '', 'iistest' ); should work fine. – josh Sep 11 '16 at 18:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.