'url' dialogs not supported in v5 (External file managers compatibility issue)

Hi. I’m trying the all new and shiny v5 but I’ve noticed there is some huge issue in terms of compatibility with integrations for file management that were using tinyMCE.activeEditor.windowManager.open. Most of them (if not every one of them) was simply loading html file into iframe provided by tinyMCE popup. But now with the new UI Dialog that won’t work.

So what’s the proper solution to get the same result?

I found that the new UI Dialog has an Iframe component so I thought that maybe that’s the one…but the truth is I have no idea what is the reason for this component to exists. You can’t set src and applying anything at initialData just add it as a text into body of created iframe. So the result gives similar experience to the HtmlPanel (Yup, I can even insert html this way). And even if I take the random ID of the created iframe and force src to take the URL I want I can’t do anything because of the enforced dimensions. So…what’s the point of this component? Am I missing something here?

[mutekellim]

It’s solved by following,

file_picker_callback: FileManager // tinymce option

function FileManager(callback, value, meta) {
        var windowManagerURL = "/FilManage";// filemanager path
 
        var windowManagerCSS = '<style type="text/css">' +
            '.tox-dialog {max-width: 100%!important; width:97.5%!important; overflow: hidden; height:95%!important; border-radius:0.25em;}' +
            '.tox-dialog__header{ display:none!important; }' +// for custom header in filemanage
            '.tox-dialog__footer { display: none!important; }' +// for custom footer in filemanage
            '.tox-dialog__body { padding: 0!important; }' +
            '.tox-dialog__body-content > div { height: 100%; overflow:hidden}' + 
            '</style > ';
        window.tinymceCallBackURL = '';
        window.tinymceWindowManager = tinymce.activeEditor.windowManager;
        tinymceWindowManager.open({
            title: '',
            body: {
                type: 'panel',
                items: [{
                    type: 'htmlpanel',
                    html: windowManagerCSS+ '<iframe src="' + windowManagerURL + '"  frameborder="0" style="width:100%; height:100%"></iframe>'
                }]
            },
            buttons: [] ,
            onClose: function () {
                if (tinymceCallBackURL!='')
                    callback(tinymceCallBackURL, {}); //to set selected file path
            } 
          
        } );
    }

//In FileManage

var windowManager = top != undefined && top.tinymceWindowManager != undefined ? top.tinymceWindowManager : '';


 if (windowManager != '') {
        if (top.tinymceCallBackURL != undefined)
            top.tinymceCallBackURL = path;
            windowManager.close();
    }

[lnewson]

We’ve just released 5.0.4, which includes the ability to create URL dialogs again! A couple things to note however, is that we’ve moved the URL dialog functionality to it’s own API: editor.windowManager.openUrl(spec) and we’ve removed the file configuration setting as it’s been replaced by url. Please let us know if you have any further questions.

Note: The docs aren’t yet available for the URL dialogs sorry, but should be live in ~2 weeks. The docs PR @TheSpyder mentioned above though contains the details for the new API.