Integration with tinymce 6.x

[labby]

Hi, using the tinymce 5.x integration is not working with integration of tinymce 6.x Any ideas?

[labby]

tinymce 6.x doc are available https://www.tiny.cloud/docs/tinymce/6/ Is it possible to adapt integration?

[causelove94]

I have same problem. Please support for TinyMCE 6.x. Thanks!

[ok-design]

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

[causelove94]

@ok-design It's worked for me, thank you very much!

[labby]

The same for me :-) Will just try to make it compatible with the plugin itself, but your solution already works fine. Thanks!

[projexweb]

works perfectly thanks ;-)

[tarzinio]

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

plugin.js.gz

[MuskyMelon]

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

[gtraxx]

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 !!

[tarzinio]

@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.

[gtraxx]

@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'
        }