Roxy Fileman с TinyMCE 5, использующий file_picker_callback

Question

Я пытаюсь обновить TinyMCE с версии 4 до версии 5, но функция file_browser_callback была заменена на file_picker_callback, который имеет совершенно другие параметры:

TinyMCE v.4

file_browser_callback: function (fieldId, value, type, win) {
    browseFiles(value, type, function (fileUrl) {
      win.document.getElementById(fieldId).value = fileUrl;
    });
}

TinyMCE v.5

file_picker_callback: function (callback, value, meta) {
   browseFiles(value, meta.filetype, function (fileUrl) {
      callback(fileUrl);
   });
}

Я могу извлечь только старый тип параметра, который в v.5 находится в meta.filetype, но не другие параметры, field_name и win, необходимые Roxy Fileman.

и вот моя полная реализация с использованием v.4:

function initEditor(selector) {
            tinymce.init({
                selector: selector,
                plugins: "paste,link,lists,advlist,image,table,contextmenu,media,fullscreen",
                paste_as_text: true,
                menubar: false,
                language: 'en',
                forced_root_block: 'div',
                encoding: 'xml', //used to solve Dangerous Request.Form exception - Seems it's not enough alone.
                block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3',
                toolbar: 'undo redo | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist | link unlink | image | media | fullscreen',
                file_browser_callback: RoxyFileBrowser,
                inline: false,
                setup: function (editor) {
                    editor.on('change', function (e) {
                        //saved = false;
                        //$("#btn-save").css('border', '2px solid #D85145');
                        //$("#btn-save").html('SAVE');
                    });
                }
            });
        }

    function RoxyFileBrowser(field_name, url, type, win) {
        var cmsURL = roxyFileman;  // script URL - use an absolute path!
        if (cmsURL.indexOf("?") < 0) {
            cmsURL = cmsURL + "?type=" + type;
        }
        else {
            cmsURL = cmsURL + "&type=" + type;
        }
        cmsURL += '&input=' + field_name + '&value=' + win.document.getElementById(field_name).value;
        tinyMCE.activeEditor.windowManager.open({
            file: cmsURL,
            title: 'MVAM - Media File Repository',
            width: 850, // Your dimensions may differ - toy around with them!
            height: 650,
            resizable: "yes",
            plugins: "media",
            inline: "yes", // This parameter only has an effect if you use the inlinepopups plugin!
            close_previous: "no"
        }, {
                window: win,
                input: field_name
            });
        return false;
    }

Answer 1

В TinyMCE5 есть новый способ создания диалоговых окон с внешним контентом: диалог URL, и этот метод отличается от старого в v.4.

Вам больше не нужны параметры win и field_name. Ранее Roxy Fileman использовал их, чтобы поместить туда вновь полученное значение. Но теперь вы должны просто отправить это значение в функцию обратного вызова, а TinyMCE сделает все остальное. Итак, новый код, который работает:

function RoxyFileBrowser(callback, value, type) {
    var roxyFileman = '/fileman/index.html';
    roxyFileman += (roxyFileman.indexOf("?")<0 ? "?" : "&") + "type=" + type.filetype;
    roxyFileman += '&input=' + field_name + '&value=' + win.document.getElementById(field_name).value;
    if(value)
        roxyFileman += '&value=' + value; // a link to already chosen image if it exists
    if(tinyMCE.activeEditor.settings.language)
        roxyFileman += '&langCode=' + tinyMCE.activeEditor.settings.language;

    const instanceApi = tinyMCE.activeEditor.windowManager.openUrl({
        title: 'Roxy Fileman',
        url: roxyFileman,
        width: 850, 
        height: 650,
        onMessage: function(dialogApi, details) {
            callback(details.content);
            instanceApi.close();
        }
    });
    return false;
}

Новой сложной задачей было вернуть значение из диалога в функцию RoxyFileBrowser. И это решается с помощью сообщений в функции FileSelected в js / custom.js:

function FileSelected(file){
  window.parent.postMessage({
    mceAction: 'FileSelected',
    content: file.fullPath
  }, '*');
}

Чтобы получить эту работу вам нужно установить "INTEGRATION": "custom" в conf.json