带有 TinyMCE 5 的 Roxy Fileman 使用 file_picker_callback

Question

我正在尝试将TinyMCE 从 ver.4升级到 ver.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);
   });
}

我能仅取出旧的参数类型，在第5节是meta.filetype，而不是其他的参数，FIELD_NAME和赢，就要乐声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 中进行设置