How to add a free file manager in Joomla 3 TinyMCE editor

Joomla's default editor is TinyMCE which is a great and lightweight online editor for most purposes.

However it has a huge drawback for me: It does not include a file manager. There is no easy way to attach a file the editor. You have to use other tools, eg ftp, or Joomla's media manager.

After some searching around, and trying some solutions I found the best way to do this.

I used the super sexy Responsive File Manager: http://www.responsivefilemanager.com

Advantages

• Joomla 3.6 and TinyMCE 4 compatibility 
• Responsive and modern 
• Latest web standards compliance 
• Fully customisable dirs, languages and more. 
• Free 

Installation documentation in the owner's site is OK, but in order to integrate it and use it in Joomla is not straightforward.

So I decided to write an easy to follow guide to help you out.

Steps to integrate in Joomla 3

1. Download from http://www.responsivefilemanager.com
2. Unzip file
3. Upload filemanager folder to <joomla_root>/media/editors/tinymce/ 
4. Upload tinymce/plugins/responsivefilemanager folder to <joomla_root>/media/editors/tinymce/plugins/
5. Edit the uploaded  <joomla_root>/media/editors/tinymce/filemanager/config/config.php and change the following configuration variables: 

'upload_dir' => '/images/',
'current_path' => '../../../../images/',
'thumbs_base_path' => '../thumbs/',

upload_dir is the path from the base url. Paths current_path and thumbs_base_path are relative to the filemanager folder.
In our case the resulting thumbs directory would be: <joomla_root>/media/editors/tinymce/thumbs
Of course joomla needs to have write and execute permissions in all above directories.

6. In file <joomla_root>/plugins/editors/tinymce/tinymce.php add the following lines before line 857 (before switch $mode line):

$script .= "
        external_filemanager_path:\"<joomla_root>/media/editors/tinymce/filemanager/\",
        filemanager_title:\"Responsive Filemanager\" ,
        external_plugins: { \"filemanager\" : \"<joomla_root>/media/editors/tinymce/filemanager/plugin.min.js\"},

";

7. Finally you need to enable the plugin and its buttons in editor configuration in file <joomla_root>/plugins/editors/tinymce/tinymce.php. In order to do so you we'll be changing TinyMCE's  toolbars for each mode required (Simple, Advanced, Extended). For Simple Mode at Joomla 3.6 those changes should be in lines 862 and 863. So edit tinymce.php and add the following text in bold. Please DO NOT copy-paste the code! Just add the text responsivefilemanager in both locations as shown below:

case 0: /* Simple mode*/
                $script .= "
            menubar: false,
            toolbar1: \"responsivefilemanager bold italics underline strikethrough | undo redo | bullist numlist | code | $toolbar5\",
            plugins: \"responsivefilemanager $dragDropPlg code\",

In a similar manner you can add the button for the Advanced and Extended modes also. So for Advanced Mode just find the corresponding section and add the word "responsivefilemanager" as shown below in bold:

default: /* Advanced mode*/
                $toolbar1 = "responsivefilemanager italic underline strikethrough | alignleft aligncenter alignright alignjustify | formatselect | bullist numlist "
                    . "| outdent indent | undo redo | link unlink anchor code | hr table | subscript superscript | charmap";

                $script .= "
            valid_elements : \"$valid_elements\",
            extended_valid_elements : \"$elements\",
            invalid_elements : \"$invalid_elements\",
            // Plugins
            plugins : \"responsivefilemanager table link code hr charmap autolink lists importcss $dragDropPlg\",

Same for Extended Mode:

case 2: /* Extended mode*/
                $script .= "
            valid_elements : \"$valid_elements\",
            extended_valid_elements : \"$elements\",
            invalid_elements : \"$invalid_elements\",
            // Plugins
            plugins : \"responsivefilemanager $plugins $dragDropPlg\",
            // Toolbar
            toolbar1: \"responsivefilemanager $toolbar1\",

That's it! If everything goes OK, you should see this icon in your editor's toolbar