Using the FCKEditor file browser with TinyMCE on Drupal

14-Nov-2007
Filed under: Drupal

TinyMCE on Drupal offers support for user uploads of files (via the insert image and link dialogs) through the use of the IMCE module. Enable this module and the upload buttons automatically appear in these dialogs.

It's just not very good, is it?

TinyMCE supports plugins, but there's no free file browsing alternative to improve matters. But help is at hand! Andrew Tetlaw has ported FCKEditor's excellent file browser as a plugin for TinyMCE. Check out his plugin page and be sure to thank him for his hard work.

The installation instructions he provides are not Drupal specific however, so I've assembled some notes here that will hopefully help you along:

  1. Download the required files from the plugin page.
  2. Extract the files to a directory named 'simplebrowser' in TinyMCE's plugin directory. This should be something like: sites/all/modules/tinymce/tinymce/jscripts/tiny_mce/plugins/simplebrowser
  3. From the simplebrowser directory that you've just created, navigate to connectors/php and open the file config.php for editing. You'll need to change two of the settings to the following:
    <?php
    $Config
    ['Enabled'] = TRUE;
    $Config['UserFilesPath'] = '/files/'; // Set this to your own user files directory
    ?>
  4. Open the file plugin_reg.php in TinyMCE's module folder (mine's in sites/all/modules/tinymce), and add the following lines:
    <?php
    $plugins
    ['simplebrowser'] = array();
    $plugins['simplebrowser']['plugin_simplebrowser_width'] = array(800);
    $plugins['simplebrowser']['plugin_simplebrowser_height'] = array(600);
    $plugins['simplebrowser']['plugin_simplebrowser_browselinkurl'] = array(base_path() . drupal_get_path('module', 'tinymce') . '/tinymce/jscripts/tiny_mce/plugins/simplebrowser/browser.html?Connector=connectors/php/connector.php');
    $plugins['simplebrowser']['plugin_simplebrowser_browseimageurl'] = array(base_path() . drupal_get_path('module', 'tinymce') . '/tinymce/jscripts/tiny_mce/plugins/simplebrowser/browser.html?Type=Image&Connector=connectors/php/connector.php');
    $plugins['simplebrowser']['plugin_simplebrowser_browseflashurl'] = array(base_path() . drupal_get_path('module', 'tinymce') . '/tinymce/jscripts/tiny_mce/plugins/simplebrowser/browser.html?Type=Flash&Connector=connectors/php/connector.php');
    ?>
  5. On the TinyMCE config page, make sure that the Simple Browser, Advanced link and Advanced Image plugins are enabled.
  6. Finally, it seems you will have to disable the IMCE module (if you're using it), as this will override the new file browser you've just installed. If you figure out how to get this working without disabling the IMCE module, let me know!

If all goes well, clicking the upload buttons in the image and link dialogs should now give you the new FCK file browser.

Comments

Image Browser URL Not set

Hi there -

I followed these instructions, but when I click on the button to launch the browser from within the tinyMCE dialog, I get the following error message:

Image Browser URL Not Set

Any ideas would be greatly appreciated.

Image Browser URL Not set

Hi Adam,

Have you correctly completed point 4 of the instructions? The settings you supply here get outputted as part of the tinyMCE.init function call when the node edit page is loaded. Check the source of your node edit page. You should have (amongst others) the following line:

plugin_simplebrowser_browseimageurl : [...] // The [...] is the path to connector.php

If I remove this line, I get the same error message you do.

Hope this helps,
Rob

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options