Integrate IMCE with FCKEditor in Drupal

So you know how Wordpress comes with that slick little TinyMCE-based rich text editor built in when you install?  A lot of clients like that, particularly those who do not know any HTML.  The fact that Drupal 6 does not ship with a rich text editor installed in the back end frightens some users, with that big empty "Body:" box and not a single tool to be found.  But they shouldn't be afraid, as there are plenty (PLENTY) of ways to create content for Drupal sites without knowing so much as a tag of HTML.  For this article, we'll focus on rich text editors for the body, particularly FCKEditor.

FCKEditor has been popular for years, and just a few months ago was replaced with CKEditor (a supposedly less suggestive name).  I like CKEditor a lot so far.  It claims full accessibility support as an editing tool (though notably, it claims standards compliance with Section 508 and WCAG 1.0, not 2.0).  I can't verify 100% but I can say that, from what I have tested, it is so far, so accessible.  I liked FCKEditor over TinyMCE for the last few years because it inherently encouraged accessible markup a bit more than TinyMCE.  For instance, data table scoping was way easier in general, with FCKEditor.  Other things like headers and lists came at least as naturally as with any other editor.  

I've had a fair number of Drupal 6 clients who like FCKEditor and want to keep it installed for the time being, so I generally use the actual Drupal FCKEditor module for the job, for the reasons outlined above, plus client preference.  It should be noted, however, that a completely stable release of the Drupal CKEditor module is available now and is continuing to be updated/improved for Drupal 6.  Give it a try, you'll like it! (Hey Mikey!)

Now one thing that end user admins tend to want is an ability, similar to that within Wordpress, to upload local images into their content.  With Wordpress's built-in media library, the user clicks the little "add an image to your media library" icon, browses their local files and selects what they want, uploads it, fills out the information, and boom, image-riddled blog post.  It's quite easy to replicate this accepted workflow in Drupal 6.  And here it is:

You will need to have the following installed on your Drupal site:

Ingredients

 

Steps

  1. Go to http://yoursite.whatever/admin/build/modules and make sure that the FCKEditor module and the IMCE module are both enabled.  If you get any errors from FCKEditor, the FCKEditor code from SourceForge may not be properly installed.  Have a look at the FCKEditor Troubleshooting section if you need help (or hit me up here).  Make sure to enable the FCKEditor rich text editor on your content types and make sure that your user roles have the proper permissions to access all tools and options.
  2. Go to /admin/settings/fckeditor/edit/Default in your Drupal install, and click on the "File browser settings" link.  This is assuming that you're using the Default FCKEditor profile for your configuration.  If you are not using the Default, first select the profile you are using from the list at /admin/settings/fckeditor.  In "File browser settings," select "IMCE" from the "File browser type" dropdown.  Scroll down to the bottom of the page and hit the "Save" button to save your profile changes.
  3. Go to "Create Content" and make like you're creating a new piece of content.  Select the "Insert/Edit Image" tool.  Once there, select the "Upload" tab, then the "Browse" button and get an image.  Don't spend too long choosing one though, because this is going to break. :)  Once you try to "Send it to the Server," you should get the following error notification:
    'This file uploader is disabled. Please check the "editor/filemanager/connectors/php/config.php" file'
    Fear not!  This was supposed to happen in this example. 
  4. Leave this tab open, then go into your favorite HTML editor and download the following files from the server:
    "/sites/default/settings.php" - make sure you have write privileges on this file.
    "/sites/all/modules/fckeditor/fckeditor/editor/filemanager/connectors/php/config.php"
  5. In settings.php, you're going to set the $base_url and $cookie_domain variables.  These are usually at lines 125 and 158 by default, respectively.  If you can't find them, look for the commented-out (with a "#") line that starts "$base_url = " and the one that starts "$cookie_domain = ".  These should both be your site's full URL with no trailing slash.  So in other words,
    it's this: "http://www.myawesomesite.com"
    NOT this: "http://www.myawesomesite.com/" <-- no trailing slashes!  Very bad thing here!
    When you are done, save and upload settings.php back into your /sites/default directory.
  6. In that config.php file, paste this line of code:
    require_once "../../../../../filemanager.config.php";

    in directly underneath the following lines:
    $Config['QuickUploadAbsolutePath']['File']= $Config['UserFilesAbsolutePath'] ;
    $Config['QuickUploadAbsolutePath']['Image']= $Config['UserFilesAbsolutePath'] ;
    $Config['QuickUploadAbsolutePath']['Flash']= $Config['UserFilesAbsolutePath'] ;
    $Config['QuickUploadAbsolutePath']['Media']= $Config['UserFilesAbsolutePath'] ;

    Each of those lines is offset from one another by about 10 lines of code, so the bottom half of your config.php file should look something like this (starting around line 122):

        $Config['AllowedExtensions']['File']    = array('7z', 'aiff', 'asf', 'avi', 'bmp', 'csv', 'doc', 'fla', 'flv', 'gif', 'gz', 'gzip', 'jpeg', 'jpg', 'mid', 'mov', 'mp3', 'mp4', 'mpc', 'mpeg', 'mpg', 'ods', 'odt', 'pdf', 'png', 'ppt', 'pxd', 'qt', 'ram', 'rar', 'rm', 'rmi', 'rmvb', 'rtf', 'sdc', 'sitd', 'swf', 'sxc', 'sxw', 'tar', 'tgz', 'tif', 'tiff', 'txt', 'vsd', 'wav', 'wma', 'wmv', 'xls', 'xml', 'zip') ;
        $Config['DeniedExtensions']['File']        = array() ;
        $Config['FileTypesPath']['File']        = $Config['UserFilesPath'] . 'file/' ;
        $Config['FileTypesAbsolutePath']['File']= ($Config['UserFilesAbsolutePath'] == '') ? '' : $Config['UserFilesAbsolutePath'].'file/' ;
        $Config['QuickUploadPath']['File']        = $Config['UserFilesPath'] ;
        $Config['QuickUploadAbsolutePath']['File']= $Config['UserFilesAbsolutePath'] ;
        require_once "../../../../../filemanager.config.php";
    
        $Config['AllowedExtensions']['Image']    = array('bmp','gif','jpeg','jpg','png') ;
        $Config['DeniedExtensions']['Image']    = array() ;
        $Config['FileTypesPath']['Image']        = $Config['UserFilesPath'] . 'image/' ;
        $Config['FileTypesAbsolutePath']['Image']= ($Config['UserFilesAbsolutePath'] == '') ? '' : $Config['UserFilesAbsolutePath'].'image/' ;
        $Config['QuickUploadPath']['Image']        = $Config['UserFilesPath'] ;
        $Config['QuickUploadAbsolutePath']['Image']= $Config['UserFilesAbsolutePath'] ;
        require_once "../../../../../filemanager.config.php";
    
        $Config['AllowedExtensions']['Flash']    = array('swf','flv') ;
        $Config['DeniedExtensions']['Flash']    = array() ;
        $Config['FileTypesPath']['Flash']        = $Config['UserFilesPath'] . 'flash/' ;
        $Config['FileTypesAbsolutePath']['Flash']= ($Config['UserFilesAbsolutePath'] == '') ? '' : $Config['UserFilesAbsolutePath'].'flash/' ;
        $Config['QuickUploadPath']['Flash']        = $Config['UserFilesPath'] ;
        $Config['QuickUploadAbsolutePath']['Flash']= $Config['UserFilesAbsolutePath'] ;
        require_once "../../../../../filemanager.config.php";
    
        $Config['AllowedExtensions']['Media']    = array('aiff', 'asf', 'avi', 'bmp', 'fla', 'flv', 'gif', 'jpeg', 'jpg', 'mid', 'mov', 'mp3', 'mp4', 'mpc', 'mpeg', 'mpg', 'png', 'qt', 'ram', 'rm', 'rmi', 'rmvb', 'swf', 'tif', 'tiff', 'wav', 'wma', 'wmv') ;
        $Config['DeniedExtensions']['Media']    = array() ;
        $Config['FileTypesPath']['Media']        = $Config['UserFilesPath'] . 'media/' ;
        $Config['FileTypesAbsolutePath']['Media']= ($Config['UserFilesAbsolutePath'] == '') ? '' : $Config['UserFilesAbsolutePath'].'media/' ;
        $Config['QuickUploadPath']['Media']        = $Config['UserFilesPath'] ;
        $Config['QuickUploadAbsolutePath']['Media']= $Config['UserFilesAbsolutePath'] ;
        require_once "../../../../../filemanager.config.php";
  7.  Go back to that "Create" tab in your browser and try to upload your image again.  You should get a message saying that it was a success.  Go back to the Image Info tab, add in all the image info you want (*cough alt text cough*) and click "OK."  Your site is now ready for client-friendly, fast image uploads.  Note also that you can reuse images that you've uploaded by clicking on the "Browse Server" button in the "Image Info" dialog interface.

Happy Drupalling!

photo

How to add a media button

great post. thank you. but I am not sure how to add a media button for the editor ? so my site is about mould maker and I want to use the media code from youtube . thank you.

photo

Thanks!! it works

Katherine you're an absolute genius. Been almost a year trying to get this to work with non-admin user roles.

Much appreciated
-davina

photo

Browse Server not appearing

Actually, I found out that if you wait a while (a minute?) the Browse Server button appears when you click the yellow image icon. But if you do it immediately upon entering the editor, it is not there. Very strange,

photo

But the browse button is not displayed for IMCE

It was working for me as user_1, but when I tried to fix the permissions for other users, it disappeared for me as well.
Authenticated users have permission to administer imce (although that sounds dangerous).
In the IMCE setup, the Sample profile has the Display file browser tab checked.
The FCKeditor Default role (assigned to authenticated users) has IMCE selected in the file broer settings, and allow quick uploads checked.
But I see no browse button any more when I click the yellow image icon.
So what am I doing wrong?

Thanks,
Jim