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

我只能检索第5版中位于 meta.filetype 中的旧参数 type ，但不能获取其他参数 >， 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"

使用TinyMCE 5的Roxy Fileman使用file_picker_callback

1 个答案: