Integrating IMCE Drupal module with CiviCRM CKEditor

CiviCRM comes with CKEditor as a default wysiwyg editor. One of the missing feature has been ability to upload /browse existing files on the server using CKEditor. So after some investigation I figured out you can easily integrate IMCE drupal module for this purpose.

Here are the steps:
1. Install IMCE module: http://drupal.org/project/imce
2. Modify packages/ckeditor/config.js

Index: config.js
===================================================================
— config.js (revision 31357)
+++ config.js (working copy)
@@ -9,6 +9,10 @@
// config.language = ‘fr’;
//config.uiColor = ‘#AADC6E’;

+ config.filebrowserBrowseUrl = ‘/index.php?q=imce&app=ckeditor|url@txtUrl|width@txtWidth|height@txtHeight’;
+ config.filebrowserImageBrowseUrl = ‘/index.php?q=imce&app=ckeditor|url@txtUrl|width@txtWidth|height@txtHeight’;
+ config.filebrowserFlashBrowseUrl = ‘/index.php?q=imce&app=ckeditor|url@txtUrl|width@txtWidth|height@txtHeight’;
+
// disable auto spell check
config.scayt_autoStartup = false;

3. Clear you browser cache
4. That’t it, now when you click on image icon you will get option to “Browse Server”, using which you can browse existing file or upload new files on the server.

By default you can browse / upload files only to files directory.

Sorry joomla people.. this will work only for drupal.