Responsive Filemanager browse icon does not appear inside tinymce insert/edit image window

Question

Im trying to integrate responsive filemanager to my tinymce and finally got most of it working except for the part where you can place a responsive filemanager inside tinymce's insert/edit image. the responsive filemanager button appears perfectly in my tinymce toolbar but not on the image below

the picture above is what shows when i click tinymce insert/edit image.

what i want to happen is for it to have a responsive filemanager button beside the source textbox like what can be found here

http://www.responsivefilemanager.com/demo.php

below is my code

script

var base = $("#base").val(); //base value is equal to <?php echo base_url();?>
 tinymce.init({
                selector: "textarea.mce",
                theme: "modern",
                image_advtab: true,
                relative_urls:false,
                plugins: [
                     "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
                     "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                     "save table contextmenu directionality emoticons template paste textcolor responsivefilemanager"
               ],
               content_css: "css/content.css",
               toolbar: "insertfile undo redo | styleselect | bold italic | blockquote | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image advimage media responsivefilemanager", 

               external_filemanager_path:base+"adminlibraries/js/ResponsiveFilemanager-master/filemanager/",
               filemanager_title:"Responsive Filemanager" ,
               external_plugins: { "filemanager" : ""+base+"/adminlibraries/js/ResponsiveFilemanager-master/filemanager/plugin.min.js"},
               style_formats: [
                    {title: 'Bold text', inline: 'b'},
                    {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
                    {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
                    {title: 'Table styles'},
                    {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'},
    {title: 'Image Left', selector: 'img', styles: {
                    'float' : 'left', 
                    'margin': '0 10px 0 10px'
            }},
            {title: 'Image Right', selector: 'img', styles: {
                    'float' : 'right', 
                    'margin': '0 10px 0 10px'
            }},
                ],
         });

am i missing something?

thanks

Answer 1

I experienced this problem because I was including the incorrect "plugin.min.js" file in the TinyMCE settings. There are two "plugin.min.js" files: 1 inside the main File Manager folder, and 1 inside the plugins folder of the TinyMCE library.

So just to be clear, during setup you should have something like this:

external_plugins: { "filemanager" : "YOUR_PATH/plugin.min.js"}

...where YOUR_PATH is the path to the folder that holds the "plugin.min.js" file inside the main File Manager folder and NOT the "plugin.min.js" file inside the TinyMCE File Manager plugin directory.

Answer 2

I've found some code on the official Reponsivefilemanager site. I tried it and it worked for me, add theses two parameters in your tinymce options :

     file_picker_types: 'file image media',
     file_picker_callback: function (cb, 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 urltype = 2;
            if (meta.filetype == 'image') {
                urltype = 1;
            }
            if (meta.filetype == 'media') {
                urltype = 3;
            }
            var title = "RESPONSIVE FileManager";
            if (typeof this.settings.filemanager_title !== "undefined" && this.settings.filemanager_title) {
                title = this.settings.filemanager_title;
            }
            var akey = "key";
            if (typeof this.settings.filemanager_access_key !== "undefined" && this.settings.filemanager_access_key) {
                akey = this.settings.filemanager_access_key;
            }
            var sort_by = "";
            if (typeof this.settings.filemanager_sort_by !== "undefined" && this.settings.filemanager_sort_by) {
                sort_by = "&sort_by=" + this.settings.filemanager_sort_by;
            }
            var descending = "false";
            if (typeof this.settings.filemanager_descending !== "undefined" && this.settings.filemanager_descending) {
                descending = this.settings.filemanager_descending;
            }
            var fldr = "";
            if (typeof this.settings.filemanager_subfolder !== "undefined" && this.settings.filemanager_subfolder) {
                fldr = "&fldr=" + this.settings.filemanager_subfolder;
            }
            var crossdomain = "";
            if (typeof this.settings.filemanager_crossdomain !== "undefined" && this.settings.filemanager_crossdomain) {
                crossdomain = "&crossdomain=1";
                if (window.addEventListener) {
                    window.addEventListener('message', filemanager_onMessage, false);
                } else {
                    window.attachEvent('onmessage', filemanager_onMessage);
                }
            }
            tinymce.activeEditor.windowManager.open({
                title: title,
                file: this.settings.external_filemanager_path + 'dialog.php?type=' + urltype + '&descending=' + descending + sort_by + fldr + crossdomain + '&lang=' + this.settings.language + '&akey=' + akey,
                width: width,
                height: height,
                resizable: true,
                maximizable: true,
                inline: 1
            }, {
                setUrl: function (url) {
                    cb(url);
                }
            });
      }

Answer 3

got it working i just needed to update my tinymce to the latest version