trippo / ResponsiveFilemanager

Completely Responsive Filemanager with integration for tinyMCE,CKEditor and CLEditor editor
http://responsivefilemanager.com
Other
815 stars 366 forks source link

Ideas sought - running Responsive File Manager without form field support #731

Closed jshster closed 9 months ago

jshster commented 9 months ago

Looking for ideas on this one. I'm wanting to use Responsive File Manager in a slightly different way than normal. Usually I have a field and I'm storing the selected file and updating an image that will display it.

What I want to do is have the Responsive File Manager tap directly into the HTML. So I have an IMG tag with a class on it that triggers the display of the RFM. What I want is simply for RFM to load the current src of the image tag and then once an image is selected update the src of the image to the new image.

Anyone got any ideas on how I could achieve that? Conceptually seems so straight forward but not sure. I guess if the image has an id can possibly read that when loading the popup?

jshster commented 9 months ago

For anyone who's interested in a similar concept I changed the following in the include.js file: Modified the apply_img method and added an if/else statement after the check for #crossdomain.

So I added: // Check if the clicked/source element is an image by checking for the src attribute. if (windowParent.jQuery('#' + external).attr("src") !== undefined) { windowParent.jQuery('#' + external).attr("src", res); } else {

Here's the full method after editing. Works a treat. I still have to work on loading the current selection but in terms of selecting an image and it updating the image tag this works:

apply_img = function (files, external) { var windowParent = returnWindowParent(); var callback = jQuery('#callback').val(); if (!Array.isArray(files)) { files = new Array(files); } var urls = returnUrls(files);

    var res = JSON.stringify(urls);
    if (urls.length === 1) {
        res = urls[0];
    }

    if (external !== "")
    {
        if (jQuery('#crossdomain').val() === 1)
        {
            windowParent.postMessage({
                sender: 'responsivefilemanager',
                url: res,
                field_id: external
            },
                    '*'
                    );
        } else
        {
            // Check if the clicked/source element is an image by checking for the src attribute.
            if (windowParent.jQuery('#' + external).attr("src") !== undefined) {
                windowParent.jQuery('#' + external).attr("src", res);
            } else {
                var target = windowParent.jQuery('#' + external);
                target.val(res).trigger('change');
                if (callback == 0)
                {
                    if (typeof windowParent.responsive_filemanager_callback == 'function')
                    {
                        windowParent.responsive_filemanager_callback(external);
                    }
                } else {
                    if (typeof windowParent[callback] == 'function')
                    {
                        windowParent[callback](external);
                    }
                }
            }
            close_window();
        }
    } else
    {
        if (jQuery('#add_time_to_img').val()) {
            var url = urls[0] + "?" + new Date().getTime();
        } else {
            url = urls[0];
        }
        apply_any(url);
    }
}