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.
  1. 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\"},
";
  1. 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

19 comments:

  1. Thank you very much for this post.

    I have added this code to my website, upon uploading a file I receive the following error:

    403 Forbidden Forbidden You don't have permission to access /media/editors/tinymce/filemanager/upload.php on this server. Additionally, a 403 Forbidden error was encountered while trying to use an ErrorDocument to handle the request.

    Any ideas to solve this problem?

    ReplyDelete
  2. Check your paths and your permissions.

    ReplyDelete
  3. What would the relative path for current_path be?

    "'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: /media/editors/tinymce/thumbs
    Of course joomla needs to have write and execute permissions in all above directories."

    ReplyDelete
  4. One more issue:

    When inserting links into articles they are broken.

    Instead of linking to http://konjolifesys.com/images/Immigration.pdf it assigns links as follows:

    http://konjolifesys.com/home/konjolif/public_html/images/Immigration.pdf

    How would one go about editing the path to the correct link?

    ReplyDelete
  5. hi,

    into this file : /media/editors/tinymce/filemanager/config/config.php there is only 458 lines, so I cannot find line 867 as you said.

    why ?

    thanks

    ReplyDelete
    Replies
    1. Which Joomla version are you using?

      Delete
    2. the problem is at this step :

      6. Add the following lines before line 857 (before switch $mode line):

      the file /media/editors/tinymce/filemanager/config/config.php is not depending of joomla version because this file is coming from responsive file manager

      Delete
    3. Yes, there is an error in the directions...
      The modifications should be in the tinymce.php file
      I am changing it now...

      Delete
    4. I have done some tests and does not work with Joomla 3.7.

      Below are the lines regarding step 7. Finally you need to enable the plugin and its buttons in editor configuration in file /plugins/editors/tinymce/tinymce.php

      switch ($mode)
      {
      case 0: /* Simple mode*/
      $scriptOptions['menubar'] = false;
      $scriptOptions['toolbar1'] = 'bold italic underline strikethrough | undo redo | bullist numlist | code';
      $scriptOptions['plugins'] = ' code';

      break;

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

      $scriptOptions['valid_elements'] = $valid_elements;
      $scriptOptions['extended_valid_elements'] = $elements;
      $scriptOptions['invalid_elements'] = $invalid_elements;
      $scriptOptions['plugins'] = 'table link code hr charmap autolink lists importcss ';
      $scriptOptions['toolbar1'] = $toolbar1;
      $scriptOptions['removed_menuitems'] = 'newdocument';
      $scriptOptions['importcss_append'] = true;
      $scriptOptions['height'] = $html_height;
      $scriptOptions['width'] = $html_width;
      $scriptOptions['resize'] = $resizing;

      break;

      case 2: /* Extended mode*/
      $scriptOptions['valid_elements'] = $valid_elements;
      $scriptOptions['extended_valid_elements'] = $elements;
      $scriptOptions['invalid_elements'] = $invalid_elements;
      $scriptOptions['plugins'] = $plugins;
      $scriptOptions['toolbar1'] = $toolbar1;
      $scriptOptions['removed_menuitems'] = 'newdocument';
      $scriptOptions['rel_list'] = array(
      array('title' => 'Alternate', 'value' => 'alternate'),
      array('title' => 'Author', 'value' => 'author'),
      array('title' => 'Bookmark', 'value' => 'bookmark'),
      array('title' => 'Help', 'value' => 'help'),
      array('title' => 'License', 'value' => 'license'),
      array('title' => 'Lightbox', 'value' => 'lightbox'),
      array('title' => 'Next', 'value' => 'next'),
      array('title' => 'No Follow', 'value' => 'nofollow'),
      array('title' => 'No Referrer', 'value' => 'noreferrer'),
      array('title' => 'Prefetch', 'value' => 'prefetch'),
      array('title' => 'Prev', 'value' => 'prev'),
      array('title' => 'Search', 'value' => 'search'),
      array('title' => 'Tag', 'value' => 'tag'),
      );
      $scriptOptions['importcss_append'] = true;
      $scriptOptions['image_advtab'] = $image_advtab;
      $scriptOptions['height'] = $html_height;
      $scriptOptions['width'] = $html_width;
      $scriptOptions['resize'] = $resizing;
      $scriptOptions['templates'] = $templates;

      break;
      }

      Delete
    5. Step 6 In file /plugins/editors/tinymce/tinymce.php add the following lines before line 857 (before switch $mode line) does not work also.

      Delete
    6. It should work on 3.6
      Didn't have the time to check it on 3.7

      Delete
    7. Ok I see.

      do you if there another tool like responsivefilemanager ?

      Delete
    8. I support the question, who managed to run at 3.7?

      Delete
  6. Hi,
    This is an excellent and informative work, this will really helpful for me in future. I like the way you start and then conclude your thoughts. Thanks for this information .I really appreciate your work, keep it up. Joomla Assignment

    ReplyDelete
  7. For Joomla 3.7 & Tinymce 4.5.6:

    In /plugins/editors/tinymce/tinymce.php

    I replaced:
    'external_plugins' => empty($externalPlugins) ? null : $externalPlugins,
    with
    'external_plugins' => empty($externalPlugins) ? JUri::root().'/media/editors/tinymce/filemanager/plugin.min.js' : $externalPlugins,

    Then right after 'external_plugins' line I've added the next:

    'external_filemanager_path' => JUri::root()."/media/editors/tinymce/filemanager/",
    'filemanager_title' => 'Responsive Filemanager',

    That are all changes in this file.

    After that you should go to the Tinymce Plugin settings and for each Buttons Sets settings there are two fields at the end "custom plugin" and "custom button" - there you should put "responsivefilemanager" and save. After that you should see the button.

    Also in /media/editors/tinymce/filemanager/config/config.php I have:
    'upload_dir' => '/images/downloads/',
    'current_path' => '../../../../images/downloads/',
    'thumbs_base_path' => '../../../../images/thumbs/'

    ReplyDelete
    Replies
    1. Thank you! its work! But i cant see filemanager icon in image insert/edit dialog (like on demo site). maybe u know how it can be fixed?

      Delete