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/',
  1. Enable plugin and its buttons in editor configuration. In order to achieve this we'll be changing TinyMCE's Simple Mode configuration section. Normally at Joomla 3.6 those changes should be in lines 862 and 863. So edit <joomla_root>/plugins/editors/tinymce/tinymce.php and add the following text in bold:
toolbar1: \"responsivefilemanager bold italics underline strikethrough | undo redo | bullist numlist | code | $toolbar5\",
plugins: \"responsivefilemanager $dragDropPlg code\",
  1. Finally add the following lines after line 863:
external_filemanager_path:\"/media/editors/tinymce/filemanager/\", 
filemanager_title:\"Responsive Filemanager\" , 
external_plugins: { \"filemanager\" : \"/media/editors/tinymce/filemanager/plugin.min.js\"} 
});

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

No comments:

Post a Comment