ResponsiveFilemanager
ResponsiveFilemanager copied to clipboard
trippo
Integration with tinymce 6.x
Hi, using the tinymce 5.x integration is not working with integration of tinymce 6.x Any ideas?
tinymce 6.x doc are available https://www.tiny.cloud/docs/tinymce/6/ Is it possible to adapt integration?
I have been playing around with the working code of the plugin for tinymce 5.x and found a working solution for my needs. This isn't the full options version with all the editor.settings but maybe someone can use this to create a full conversion of the plugin that works with tinymce 6.x
Within the tinymce.init({ .... }); I placed this code:
file_picker_types: 'file image media',
file_picker_callback: (callback, value, meta) => {
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;
}
var akey="## ACCESS_KEY ##";
var sort_by="";
var descending=0;
var fldr="";
var crossdomain="";
var language="nl";
urltype=2;
if (meta.filetype === 'image' || meta.mediaType === 'image') { urltype=1; }
if (meta.filetype === 'media' || meta.mediaType === 'media') { urltype=3; }
tinymce.activeEditor.windowManager.openUrl({
title: 'Responsive Filemanager',
url: '## URL TO ## /filemanager/dialog.php?type='+urltype+'&descending='+descending+sort_by+fldr+crossdomain+'&lang='+language+'&akey='+akey,
width: width,
height: height
});
window.addEventListener('message', function receiveMessage(event) {
window.removeEventListener('message', receiveMessage, false);
if (event.data.sender === 'responsivefilemanager') {
callback(event.data.url);
}
}, false);
},
The settings for descending, sort_by, fldr, crossdomain and language are hardcoded because I got an error with the editor.settings
The same for me :-) Will just try to make it compatible with the plugin itself, but your solution already works fine. Thanks!
Hi, Sorry for my English (PL).
I found a solution, but it only works for the default button.
Changes must be made in js / tinymce / plugins / responsivefilemanager / plugin.js
You have to register the data and retrieve it with a new method. It can be done nicer for sure, but I did it quickly.
editor.settings.*** -> editor.options.get('***')
tinymce.PluginManager.add('responsivefilemanager', function(editor) {
const register = editor => {
const registerOption = editor.options.register;
registerOption('external_filemanager_path', { processor: 'string' });
registerOption('filemanager_title', { processor: 'string' });
registerOption('filemanager_access_key', { processor: 'string' });
registerOption('filemanager_sort_by', { processor: 'string' });
registerOption('filemanager_descending', { processor: 'string' });
registerOption('filemanager_subfolder', { processor: 'string' });
registerOption('filemanager_crossdomain', { processor: 'string' });
registerOption('language', { processor: 'string' });
};
register(editor);
function responsivefilemanager_onMessage(event){
if(editor.options.get('external_filemanager_path').toLowerCase().indexOf(event.origin.toLowerCase()) === 0){
if(event.data.sender === 'responsivefilemanager'){
tinymce.activeEditor.insertContent(event.data.html);
tinymce.activeEditor.windowManager.close();
// Remove event listener for a message from ResponsiveFilemanager
if(window.removeEventListener){
window.removeEventListener('message', responsivefilemanager_onMessage, false);
} else {
window.detachEvent('onmessage', responsivefilemanager_onMessage);
}
}
}
}
function openmanager() {
var width = window.innerWidth-20;
var height = window.innerHeight-40;
if(width > 1800) width=1800;
if(height > 1200) height=1200;
if(width>600){
var width_reduce = (width - 20) % 138;
width = width - width_reduce + 10;
}
editor.focus(true);
var title="RESPONSIVE FileManager";
if (typeof editor.options.get('filemanager_title') !== "undefined" && editor.options.isSet('filemanager_title')) {
title=editor.options.get('filemanager_title');
}
var akey="key";
if (typeof editor.options.get('filemanager_access_key') !== "undefined" && editor.options.isSet('filemanager_access_key')) {
akey=editor.options.get('filemanager_access_key');
}
var sort_by="";
if (typeof editor.options.get('filemanager_sort_by') !== "undefined" && editor.options.isSet('filemanager_sort_by')) {
sort_by="&sort_by="+editor.options.get('filemanager_sort_by');
}
var descending="false";
if (typeof editor.options.get('filemanager_descending') !== "undefined" && editor.options.isSet('filemanager_descending')) {
descending=editor.options.get('filemanager_descending');
}
var fldr="";
if (typeof editor.options.get('filemanager_subfolder') !== "undefined" && editor.options.isSet('filemanager_subfolder')) {
fldr="&fldr="+editor.options.get('filemanager_subfolder');
}
var crossdomain="";
if (typeof editor.options.get('filemanager_crossdomain') !== "undefined" && editor.options.isSet('filemanager_crossdomain')) {
crossdomain="&crossdomain=1";
// Add handler for a message from ResponsiveFilemanager
if(window.addEventListener){
window.addEventListener('message', responsivefilemanager_onMessage, false);
} else {
window.attachEvent('onmessage', responsivefilemanager_onMessage);
}
}
const fileUrl = editor.options.get('external_filemanager_path')+'dialog.php?type=4&descending='+descending+sort_by+fldr+crossdomain+'&lang='+editor.options.get('language')+'&akey='+akey;
if (tinymce.majorVersion < 5) {
win = editor.windowManager.open({
title: title,
file: fileUrl,
width: width,
height: height,
inline: 1,
resizable: true,
maximizable: true
});
} else {
win = editor.windowManager.openUrl({
title: title,
url: fileUrl,
width: width,
height: height,
inline: 1,
resizable: true,
maximizable: true
});
}
}
if (tinymce.majorVersion < 5) {
editor.addButton('responsivefilemanager', {
icon: 'browse',
tooltip: 'Insert file',
shortcut: 'Ctrl+E',
onClick: openmanager
});
editor.addShortcut('Ctrl+E', '', openmanager);
editor.addMenuItem('responsivefilemanager', {
icon: 'browse',
text: 'Insert file',
shortcut: 'Ctrl+E',
onClick: openmanager,
context: 'insert'
});
} else {
editor.ui.registry.addButton('responsivefilemanager', {
icon: 'browse',
tooltip: 'Insert file',
shortcut: 'Ctrl+E',
onAction: openmanager
});
editor.addShortcut('Ctrl+E', '', openmanager);
editor.ui.registry.addMenuItem('responsivefilemanager', {
icon: 'browse',
text: 'Insert file',
shortcut: 'Ctrl+E',
onAction: openmanager,
context: 'insert'
});
}
});
This is my version of a TinyMCE solution. As far as I know it works exactly as with TinyMCE V5 (including the image file selector).
My version of the plugin had the lines:
editor.settings.file_picker_types = 'file image media';
editor.settings.file_picker_callback = filemanager;
to bind the image uploader to the file_picker_callback function, To make this work in V6 I added the line:
editor.options.set("file_picker_callback", openmanager);
to set the function. And this line to the init function:
file_picker_types: 'file image media',
It could be that this line has to be added to the TinyMCE init function if it doesn't work right away:
file_picker_callback: function() { },
This variable will be overwritten by the plugin.
I use editor.getParam() to replace the previous editor.settings.
config:
tinymce init function:
file_picker_types: 'file image media',
external_filemanager_path:"/assets/plugins/filemanager/",
filemanager_title:"Responsive Filemanager",
external_plugins: { "responsivefilemanager" : /assets/plugins/filemanager/plugin.min.js"},
/assets/plugins/filemanager/plugin.min.js:
tinymce.PluginManager.add('responsivefilemanager', function (editor) {
editor.options.set("file_picker_callback", openmanager);
function responsivefilemanager_onMessage(event) {
if (editor.getParam('filemanager_title').toLowerCase().indexOf(event.origin.toLowerCase()) === 0) {
if (event.data.sender === 'responsivefilemanager') {
tinymce.activeEditor.windowManager.getParams().setUrl(event.data.url);
tinymce.activeEditor.windowManager.close();
// Remove event listener for a message from ResponsiveFilemanager
if (window.removeEventListener) {
window.removeEventListener('message', responsivefilemanager_onMessage, false);
} else {
window.detachEvent('onmessage', responsivefilemanager_onMessage);
}
}
}
}
function openmanager(callback, value, meta) {
var width = window.innerWidth - 20;
var height = window.innerHeight - 40;
if (width > 1800) width = 1800;
if (height > 1200) height = 1200;
if (width > 600) {
var width_reduce = (width - 20) % 138;
width = width - width_reduce + 10;
}
// DEFAULT AS FILE
urltype=2;
if (meta.filetype === 'image' || meta.mediaType === 'image') { urltype=1; }
if (meta.filetype === 'media' || meta.mediaType === 'media') { urltype=3; }
editor.focus(true);
var title = "RESPONSIVE FileManager";
if (typeof editor.getParam('filemanager_title') !== "undefined" && editor.getParam('filemanager_title')) {
title = editor.getParam('filemanager_title');
}
var akey = "key";
if (typeof editor.getParam('filemanager_access_key') !== "undefined" && editor.getParam('filemanager_access_key')) {
akey = editor.getParam('filemanager_access_key');
}
var sort_by = "";
if (typeof editor.getParam('filemanager_sort_by') !== "undefined" && editor.getParam('filemanager_sort_by')) {
sort_by = "&sort_by=" + editor.getParam('filemanager_sort_by');
}
var descending = "false";
if (typeof editor.getParam('filemanager_descending') !== "undefined" && editor.getParam('filemanager_descending')) {
descending = editor.getParam('filemanager_descending');
}
var fldr = "";
if (typeof editor.getParam('filemanager_subfolder') !== "undefined" && editor.getParam('filemanager_subfolder')) {
fldr = "&fldr=" + editor.getParam('filemanager_subfolder');
}
var crossdomain = "";
if (typeof editor.getParam('filemanager_crossdomain') !== "undefined" && editor.getParam('filemanager_crossdomain')) {
crossdomain = "&crossdomain=1";
// Add handler for a message from ResponsiveFilemanager
if (window.addEventListener) {
window.addEventListener('message', responsivefilemanager_onMessage, false);
} else {
window.attachEvent('onmessage', responsivefilemanager_onMessage);
}
}
window.addEventListener('message', function receiveMessage(event) {
window.removeEventListener('message', receiveMessage, false);
if (event.data.sender === 'responsivefilemanager') {
callback(event.data.url);
}
}, false);
const fileUrl = editor.getParam('external_filemanager_path') + 'dialog.php?type='+urltype+'&descending=' + descending + sort_by + fldr + crossdomain + '&lang=' + editor.getParam('language') + '&akey=' + akey;
win = editor.windowManager.openUrl({
title: title,
url: fileUrl,
width: width,
height: height,
inline: 1,
resizable: true,
maximizable: true
});
}
return false;
});
Hi, I updated responsivefilemanager for tinymce 6 but if I upload I get an error.
And the json response is empty, no return from upload.php (only with png files)
Everything works correctly with tinymce 5 !!
@gtraxx hi. I would be happy to help, but I would have to have the tinymce code along with the filemanager. I didn't have any problems, but I've been developing on my own for a long time and it's possible that I "fixed" this problem before it occurred.
@tarzinio Hi, I made you a zip with the filemanager which works with tinymce 5 but not completely with tinymce 6, problem with png, webp. note : I had integrated all the modifications for php 8 filemanager.zip
file_picker_types: 'file image media',
file_picker_callback: function() { },
external_filemanager_path: filemanager/',
filemanager_title: "Responsive Filemanager",
external_plugins: {
"filemanager" : /filemanager/plugin.min.js'
}