How to open the Filemanager from Imperavi Redactor in a modal window

Note that Imperavi Redactor is a commercial WYSIWYG editor.

It is easy to integrate Filemanager with Imperavi Redactor as a plugin.

The example below assumes that you have a HTML textarea tag with id 'redactor'. It was tested on Imperavi Redactor I v.10.2.x

A full example page is given below:

<script type="text/javascript">
(function($)
{
    $.Redactor.prototype.fmFilemanager = function()
    {
        return {
            init: function()
            {
                if (!this.opts.fmFilemanagerOptions) return;

                var button = this.button.add('file', 'File');
                this.button.addCallback(button, this.fmFilemanager.show);
            },
            show: function()
            {
                var height = $(window).height() * this.opts.fmFilemanagerOptions.height / 100;
                var width = $(window).width() * this.opts.fmFilemanagerOptions.width / 100;

                var iframe = $("<iframe id='filemanager_iframe' class='fm-modal' style='width: 100%; height: " + height + "px;'/>").attr({
                    src: this.opts.fmFilemanagerOptions.url +
                        '?ImperaviElementId=' + this.$element.attr('id')
                });

                this.modal.addTemplate('fmFilemanager', iframe);
                this.modal.load('fmFilemanager', this.opts.fmFilemanagerOptions.modalTitle, width);

                this.modal.show();
            }
        };
    };
})(jQuery);
 
$(function()
{
    $('#redactor').redactor({
        plugins: ['fmFilemanager'],
        options => {
            fmFilemanagerOptions => {
                modalTitle => 'File manager',
                url => 'connectors/php/filemanager.php',
                // modal window and iframe dimensions (percent)
                width => 70,
                height => 70
            }
        }
    });
});
</script>
 
<textarea id="redactor" name="redactor">...</textarea>

Plugin option "fmFilemanagerOptions" is optional and was added to give an insight of how to pass params to Imperavi plugin.