tinymce.WPWindowManager is deprecated. How to use the default editor.windowManager instead in TinyMCE 4 and WordPress 3.9?

Question

I have a TinyMCE plugin that opens a popin using the following code:

editor.windowManager.open({
    id : 'popin-div-id',
    width : 500,
    height : "auto",
    wpDialog : true,
    title : 'Edit Options'
});

Ever since I updated to WordPress 3.9 (which embeds TinyMCE 4), I get the following error in the console:

tinymce.WPWindowManager is deprecated. Use the default editor.windowManager to open dialogs with inline HTML. 

If I remove the "wpDialog : true" part from the code above, my popin doesn't appear anymore (no error).

What do I need to change to use the default windowManager in TinyMCE 4? I checked their website and I could not find documentation about opening a popin from a div, but only from an external HTML page, see:

• http://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x
• http://www.tinymce.com/wiki.php/Tutorials:Creating_custom_dialogs
• http://www.tinymce.com/wiki.php/api4:class.tinymce.WindowManager

Answer 1

I had the same problem. The TinyMCE docs are unhelpful, ditto the WordPress docs. I had to go pretty deep into the TinyMCE code to figure out how to get my simple custom popup working again.

Answer

Use the html key to define your html in the object you pass to windowManager.open. Below, I'm using jQuery to select some html that I've placed on the page by hooking into the WordPress after_wp_tiny_mce action.

tinymce.activeEditor.windowManager.open({
    title: ed.getLang('mm_tiny_mce.element_attributes'),
    width : 300,
    height : 300,
    html :
        '<div id="mm-attrs-pop" class="mm-tinymce-popup" tabindex="-1">' +
            jQuery('#mm-attrs-pop-tpl').html() +
        '</div>',
    buttons: [
        {
            text: 'Cancel',
            onclick: 'close'
        },
        {
            text: 'Set Attributes',
            onclick: function(){
                //some code here that modifies the selected node in TinyMCE
                tinymce.activeEditor.windowManager.close();
            }
        }
    ]
});

The relevant TinyMCE code is in classes/ui/Window.js, in particular the renderHTML property. https://github.com/tinymce/tinymce/blob/master/js/tinymce/classes/ui/Window.js

Hope that helps. Cheers, Chris