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

37 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
    Replies
    1. Ourlife01: How To Add A File Manager In Joomla 3 Tinymce Editor >>>>> Download Now

      >>>>> Download Full

      Ourlife01: How To Add A File Manager In Joomla 3 Tinymce Editor >>>>> Download LINK

      >>>>> Download Now

      Ourlife01: How To Add A File Manager In Joomla 3 Tinymce Editor >>>>> Download Full

      >>>>> Download LINK uU

      Delete
  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. This comment has been removed by a blog administrator.

    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
    2. Yes .. me too .. how we can do to place the icon inside the modal of the "insert image"

      Delete
  8. Triyng to use the solution of "dronger" I've found that replacing the code in /plugins/editors/tinymce/tinymce.php cause me a sequence of .js errors

    I haven't replaced the code but simply:

    After

    'external_plugins' => empty($externalPlugins) ? null : $externalPlugins,

    I've inserted

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

    Obviously I've inserted in the joomla tiny plugin admin "responsivefilemanager" for both plugin adn button

    -----

    Now I'm looking to get the responsivefilemanager button inside the modal ... any ideas??

    ReplyDelete
    Replies
    1. I forgot ... I'm using Joomla 3.7.4 and tinymce 4.6.4

      Delete
  9. YESSS .. I've found the solution!!!

    Need to call the $externalPlugins before to declare the array so the script is changed so

    // INSERT THIS
    $externalPlugins['filemanager'] = JUri::root().'/media/editors/tinymce/filemanager/plugin.min.js';
    // ** end

    // Build the final options set
    $scriptOptions = array_merge(
    $scriptOptions,
    array(
    'suffix' => '.min',
    'baseURL' => JUri::root(true) . '/media/editors/tinymce',
    'directionality' => $text_direction,
    'language' => $langPrefix,
    'autosave_restore_when_empty' => false,
    'skin' => $skin,
    'theme' => $theme,
    'schema' => 'html5',
    // Toolbars
    'menubar' => empty($menubar) ? false : implode(' ', array_unique($menubar)),
    'toolbar1' => empty($toolbar1) ? null : implode(' ', $toolbar1),
    'toolbar2' => empty($toolbar2) ? null : implode(' ', $toolbar2),

    'plugins' => implode(',', array_unique($plugins)),

    // Cleanup/Output
    'inline_styles' => true,
    'gecko_spellcheck' => true,
    'entity_encoding' => $levelParams->get('entity_encoding', 'raw'),
    'verify_html' => !$ignore_filter,

    'valid_elements' => $valid_elements,
    'extended_valid_elements' => implode(',', $elements),
    'invalid_elements' => $invalid_elements,

    // URL
    'relative_urls' => (bool) $levelParams->get('relative_urls', true),
    'remove_script_host' => false,

    // Layout
    'content_css' => $content_css,
    'document_base_url' => JUri::root(true) . '/',
    'paste_data_images' => $allowImgPaste,
    'importcss_append' => true,
    'image_title' => true,
    'image_browser' => 'filemanager',
    'height' => $html_height,
    'width' => $html_width,
    'resize' => $resizing,
    'templates' => $templates,
    'image_advtab' => (bool) $levelParams->get('image_advtab', false),
    'external_plugins' => empty($externalPlugins) ? null : $externalPlugins,

    // INSERT THIS
    'external_filemanager_path' => JUri::root().'/media/editors/tinymce/filemanager/',
    'filemanager_title' => 'Responsive Filemanager',
    // ** end

    Don't insert
    'external_plugins' => empty($externalPlugins) ? JUri::root().'/media/editors/tinymce/filemanager/plugin.min.js' : $externalPlugins,


    For me it's good
    Now I have the browser inside the image edit/insert

    ReplyDelete
  10. Dear Alberto,
    my fault i have problems following your solution. Could you please tell me all the changes I have to make in which files to get this to work? Thank you so much!

    ReplyDelete
  11. I've written a simply new guide in my website for Responsive File Manager with Joomla 3.7.4 & Tinymce 4.6.4
    http://www.albertosantini.net/blog/item/398-responsive-file-manager-with-joomla-3-7-4-tinymce-4-6-4.html
    Feel free to visit and use it - There's also the zip with all files

    ReplyDelete
  12. Fantastic work, thank You so much! But unfortunately I found a problem: if I delete cookies in my browser, Tiny MCE will no longer be displayed.

    ReplyDelete
  13. install done but it open direclty open filemanager i want to add login or logout so how can i do

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. new for Joomla 3.8.x

    AFTER
    // Build the final options set
    INSERT
    // ******************
    $externalPlugins['filemanager'] = JUri::root().'media/editors/filemanager/plugin.min.js';
    // ******************

    -------------------

    AFTER
    'image_advtab' => (bool) $levelParams->get('image_advtab', false),
    DELETE
    'external_plugins' => empty($externalPlugins) ? null : $externalPlugins,
    INSERT
    // ******************
    // 'external_plugins' => empty($externalPlugins) ? null : $externalPlugins,
    'external_plugins' => empty($externalPlugins) ? JUri::root().'/media/editors/tinymce/responsivefilemanager/plugin.min.js' : $externalPlugins,
    // added
    'external_filemanager_path' => JUri::root()."/media/editors/filemanager/",
    'filemanager_title' => 'Responsive Filemanager',
    // ******************

    ----------------

    That's all ... simple now

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. Hello Alberto, your solution works ok in Joomla 3.8.x and 3.9.x but I have some notes:
      If you follow original install instructions, $externalPlugins['filemananger'] and 'external_filemananger_path' values are wrong, they sould be:

      $externalPlugins['filemanager'] = JUri::root().'media/editors/tinymce/filemanager/plugin.min.js

      and

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

      (you missed 'tinymce' folder in both cases)

      Is there any way to show plugin icon when configuring TinyMCE plugin? I have already added 'responsivefilemanager' in custom plugin and custom button fields, but button isn't shown in (configuration) toolbars.

      Delete
  16. Thanks all for your help on implementing this in TinyMCE.
    Now it could be great to get that for "images and links" or any media custom field too don' you think ?
    Even if J4! will come with a new media manager...

    ReplyDelete
  17. https://www.shapesblog.fr/web-design/php/293-integrer-responsive-filemanager-a-l-editeur-de-texte-tinymce-de-joomla.html

    ReplyDelete
  18. Ourlife01: How To Add A File Manager In Joomla 3 Tinymce Editor >>>>> Download Now

    >>>>> Download Full

    Ourlife01: How To Add A File Manager In Joomla 3 Tinymce Editor >>>>> Download LINK

    >>>>> Download Now

    Ourlife01: How To Add A File Manager In Joomla 3 Tinymce Editor >>>>> Download Full

    >>>>> Download LINK

    ReplyDelete