TinyMCE: getParams() got removed from v6

Question

I am migrating from v4 to v6. We are using top.tinymce.activeEditor.windowManager.getParams(). However, getParams() has been removed from new version. And I am not able to figure what to use in replacement.

In my example, oninsert() is the custom method in openUrl(). I am not sure if we can use the custom property/methods in v6. It was working fine in v4.

Below is the code snippet

tinymce.init({
    selector: '.tinymce-large',
    plugins: [
        'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
        'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'insertdatetime',
        'media', 'table', 'template'
    ],
    toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
        'bullist numlist outdent indent | link image media| code preview ',
    menubar: 'file edit insert view',
    browser_spellcheck: true,
    file_picker_types: 'image',
    file_picker_callback: function (callback, value, meta) {
        myImagePicker(callback, value, meta);
    }
});

function myImagePicker(callback, value, meta) {
    tinymce.activeEditor.windowManager.openUrl({
        title: 'Image Browser',
        url: '/FileManager/Picker?type=' + meta.filetype,
        width: window.innerWidth - 200,
        height: 600
    }, 

        oninsert: function (url, objVals) {
            callback(url, objVals);
        }
    });
}
            
            
//myImagePicker() will open up our custom file manager. Through file manager, the user will select an image and through JS, I want to pass the url in oninsert event through below code
top.tinymce.activeEditor.windowManager.getParams().oninsert(url, objVals);

Answer 1

TinyMCE 5 and 6 no longer recommends using the window.top variable to access the original window TinyMCE API and as such getParams has been removed. Instead, it's built around the more modern postMessage API instead.

Now, for this specific case it sounds like a custom message might be what you need. So as it's done via messaging you should be able to do something like this instead:

// TinyMCE window
function myImagePicker(callback, value, meta) {
    tinymce.activeEditor.windowManager.openUrl({
        title: 'Image Browser',
        url: '/FileManager/Picker?type=' + meta.filetype,
        width: window.innerWidth - 200,
        height: 600,
        onMessage: function(api, details) {
            if (details.mceAction === 'customInsertImage') {
                var data = details.data;
                api.close();
                callback(data.url, data.objVals);
            }
        }
    });
}

// Filemanager window
window.parent.postMessage({
    mceAction: 'customInsertImage',
    data: {
        url: url,
        objVals: objVals
    }
}, '*');

There are somethings to remember though, the data must be serializable to be sent via postMessage. Also be sure to use something other than the * wildcard for the message target for security purposes as noted in the documentation.

Also in case you haven't seen it yet, the documentation for URL dialogs can be found here at https://www.tiny.cloud/docs/tinymce/6/urldialog/ and https://www.martyfriedel.com/blog/tinymce-5-url-dialog-component-and-window-messaging is also a good blog post describing how they work in TinyMCE 5.