sunhater / kcfinder

KCFinder web file manager
http://kcfinder.sunhater.com
402 stars 209 forks source link

I made it possible to use Kcfinder in tinymce5 #179

Open emaeba opened 5 years ago

emaeba commented 5 years ago

Hi! I made it possible to use Kcfinder in tinymce5

・Tinymce Setting File

file_picker_callback: function (callback, url, type, win) {
    var windowManagerURL = '';// filemanager path
    window.tinymceCallBackURL = '';
    window.tinymceWindowManager = tinymce.activeEditor.windowManager;

    tinymce.activeEditor.windowManager.open({
        title: 'Image',
        size: 'large',
        body: {
        type: 'panel',
            items: [{
                type: 'htmlpanel',
                html: '<iframe src="' + windowManagerURL + '" frameborder="0" style="width:100%; height:360%"></iframe>'
            }]
        },
        buttons: [
        ] ,
    onClose: function () {
        if (tinymceCallBackURL!='')
            callback(tinymceCallBackURL, {});
        } 
    });
}

・Kcfinder 
080.files.js

win = (window.opener ? window.opener : window.parent);
win.tinymceCallBackURL = fileURL;
win.tinymce.activeEditor.windowManager.close();

for your information.

nsoeth commented 5 years ago

Thanks. I can open it and upload files but I cannot select a file and insert it into my TinyMCE5 modal. Where exactly should I put the lines in the

080.files.js

file?

edit:

on line 193 I inserted

} else if (_.opener.name === "tinymce5") { win = (window.opener ? window.opener : window.parent); win.tinymceCallBackURL = fileURL; win.tinymce.activeEditor.windowManager.close();

and added the opener to the browser.php in my JS:

/browse.php?opener=tinymce5

emaeba commented 5 years ago

HI! Can I use tinymce5 after modifying the following files?

050.init.js

    // TinyMCE 5
     } else if (_.opener.name == "tinymce5")
         _.opener.callBack = true;

080.files.js

   } else if (_.opener.name == "tinymce5") {
    win = (window.opener ? window.opener : window.parent);
    win.tinymceCallBackURL = fileURL;
    win.tinymce.activeEditor.windowManager.close();
nsoeth commented 5 years ago

why not? :)

mustangpl commented 4 years ago

instead of _file_pickercallback: function (callback, url, type, win) you should use _file_pickercallback: function (callback, value, meta) see more https://www.tiny.cloud/docs/configure/file-image-upload/ then in windowManagerURL you can use /kcfinder/browse.php?opener=tinymce5&type=' + meta.filetype+ '&lang=pl where meta.filetype will give type of file

emaeba commented 4 years ago

Hello! tinymce Version 5.0.4 or more. Added back URL dialog functionality, which is now available via editor.windowManager.openUrl() #TINY-3382

file_picker_callback: function(callback, value, meta) { window.tinymceCallBackURL = ''; title = ""; var dialogUrl = '';// filemanager path var width = window.innerWidth - 30; var height = window.innerHeight - 60; if (width > 1800) width = 1800; if (height > 1200) height = 1200; if (width > 600) { var width_reduce = (width - 20) % 138; width = width - width_reduce + 10; } tinymce.activeEditor.windowManager.openUrl({ title: title, url: dialogUrl, width: width, height: height, resizable: true, maximizable: true, inline: 1, onClose: function () { if (tinymceCallBackURL!='') callback(tinymceCallBackURL, {}); //to set selected file path } }); }