Tinymce: getParams is not exposed on activeEditor

[vanillajonathan]

My understanding is that the tinymce object have a activeEditor property which returns an instance of the tinymce.Editor object which should have a getParam method.

My tinymce.activeEditor does not have any getParam method. So I can not call tinymce.activeEditor.getParam('foo').

Also the migration documentation does not mention the removal of the tinymce.WindowManager.getParams method.

Background

I had a file picker in TinyMCE version 4 and is now migrating to version 5.
I assumed I would replace:

top.tinymce.activeEditor.windowManager.getParams().oninsert(url);

with:

var callback = top.tinymce.activeEditor.getParams('oninsert', undefined, 'function');
callback(url);

[Yan-AM]

Hi Vanillajonathan,

I've the same problem, and I founded on this link, a 'temporary solution' : https://github.com/tinymce/tinymce/issues/4786#issuecomment-463827289

I'm using ElFinder with TinyMce v5, and it's work! But I think you can use it for another filemanager, of course.

With some changes :
In file_picker_callback: FileManager // tinymce option :

file_picker_callback: function (callback, value, meta) {

                        var windowManagerCSS = '<style type="text/css">' +
                            '.tox-dialog {max-width: 100%!important; width:80%!important; overflow: hidden; height:75%!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.tinymceCallBackFm = '';
                            window.tinymceWindowManager = tinymce.activeEditor.windowManager;
                            tinymceWindowManager.open(
                                {
                                    title: 'Bibliothèque',
                                    body: {
                                        type: 'panel',
                                        items: [{
                                            type: 'htmlpanel',
                                            html: windowManagerCSS + '<iframe src="/elfinder/elfinder.html"  frameborder="0" style="width:100%; height:100%"></iframe>'
                                        }]
                                    },
                                    buttons: [] ,
                                    onClose: function () {
                                        if (tinymceCallBackURL != '') {
                                            var url, info;

                                            // URL normalization
                                            url = tinymceCallBackFm.convAbsUrl(tinymceCallBackURL.url).replace(/\/{2,}/, '/');
                                            console.log(url);

                                            // Make file info
                                            info = tinymceCallBackURL.name + ' (' + tinymceCallBackFm.formatSize(tinymceCallBackURL.size) + ')';

                                            // Provide file and text for the link dialog
                                            if (meta.filetype == 'file') {
                                                callback(url, {text: info, title: info});
                                            }

                                            // Provide image and alt text for the image dialog
                                            if (meta.filetype == 'image') {
                                                callback(url, {alt: info});
                                            }

                                            // Provide alternative source and posted for the media dialog
                                            if (meta.filetype == 'media') {
                                                callback(url);
                                            }

                                        }
                                    }
                                }
                            );
                    },

In FileManage :

getFileCallback : function(file, fm) {
                var windowManager = top != undefined && top.tinymceWindowManager != undefined ? top.tinymceWindowManager : '';

                if (windowManager != '') {
                       if (top.tinymceCallBackURL != undefined)
                           top.tinymceCallBackURL = file;
                           top.tinymceCallBackFm = fm;
                           windowManager.close();
                }


 },

Another links only for ElFinder with TinyMce v5 :

• https://github.com/nao-pon/tinymceElfinder
• https://github.com/Studio-42/elFinder/issues/2821#issuecomment-455832650

Hope this help.
Yan

[lnewson]

Just to clarify editor.getParam() is not the same as editor.windowManager.getParams(). The former is for accessing editor settings, while the latter was used in TinyMCE 4 to get params passed when opening URL dialogs.

Anyways, URL dialogs were originally removed in TinyMCE 5 and as such all the windowManager functionality that related to URL dialogs (eg editor.windowManager.getParams()) was also removed. Since then, we've brought back URL dialog functionality but in a hopefully more modern way, such as communicating via window.postMessage() instead of relying on accessing globals from a parent frame, where a new dialog may or may not have opened. The documentation for the new URL dialog functionality can be found here: https://www.tiny.cloud/docs/ui-components/urldialog/.

I should also note that the new URL dialog API doesn't support passing parameters when opening the dialog either (similar to the regular dialogs), so the getParams API wasn't reinstated. If you do need to access a global from the parent window, then I'd suggest doing something similar like what @Yan-AM demo'd above by binding a function to the window object when opening the dialog. I'll log an internal documentation task to get that specific detail added to the migration guide.

[vanillajonathan]

I solved this.

tinymce.init({
    selector: 'textarea.tinymce',
    file_picker_callback: function(callback, value, meta) {
        tinymce.activeEditor.windowManager.openUrl({
            title: 'File Manager',
            url: '/filemanager?type=' + meta.filetype,
            onMessage: function (api, data) {
                if (data.mceAction === 'customAction') {
                    callback(data.url);
                    api.close();
                }
            }
        });
    },
});

Then in the file manager:

function insert(url) {
    window.parent.postMessage({
        mceAction: 'customAction',
        url: url
    }, '*');
}

and call the insert function:

<img src="cat.jpg" onclick="insert('cat.jpg')" />