javascript - 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);
   });
}

我只能检索旧参数 type，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 dialog此方法与 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 函数中。它通过在 js/custom.js 中的函数 FileSelected 中使用消息来解决:

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

要完成这项工作，您需要在 conf.json 中设置 "INTEGRATION": "custom"