Adding CKFinder with Authentication to CiviCRM

Introduction

Many of our clients would like to be able to add images to html/rich text areas in CiviCRM, especially in CiviMail templates and mailing messages.  This tutorial will show you how to modify the CKEditor installation that ships with CiviCRM to allow users with the "access CiviCRM" permission to use the CKFinder add-on for image upload and insertion.  Instructions are also included to make this permission more restrictive.

Preparation

You will need to download a copy of CKFinder from http://ckfinder.com/download. Choose the php version of CKFinder.  This is a commercially licensed extension of CKEditor which provides income to the open source CKEditor project.  The cost is $59 per site.

Process

1. Install CKFinder
   1. Choose a directory in your site and upload the CKFinder files.  I like to create a directory in /sites/all to hold my CiviCRM overrides.  If you have ssh access to your server, the following command sequence will create the appropriate directories.  If you are using ftp, you many need to decompress the CKFinder download before uploading. (The link to CKFinder will change as new versions are released.) Note: That's an Uppercase o, not a zero in the curl command.
   2. Adjust file permissions if needed so that the CKFinder files are readable by you web server process.
2. Modify CiviCRM to Load CKFinder
   1. Open /sites/all/modules/civicrm/packages/HTML/QuickForm/ckeditor.php for editing in your favorite editor.  Placing a copy of this file in the appropriate path in the custom php directory does not seem to work, so you must modify the core copy and remodify it on upgrades to CiviCRM.
   2. Find the function toHTML(). Find the line that contains CKEDITOR.replace( '{$name}' ); It is line 72 in the current version. Edit this line, adding new lines following. Be sure to add the comma after '{$name}' as this is logically all one line to javascript:
   3. Adjust the path above as needed to reach your ckfinder installation. The correct path is the url to the file without the http://yourdomain.tld portion of the url.
3. Add Authorization Code and Set URL/Paths
   1. You only want authorized users to be able to access CKFinder.  The added code is taken from the CKEditor Module for Drupal.
   2. Open the config.php file in your ckfinder directory with your favorite editor. Replace the CheckAuthentication() function in the file with the following.
   3. If you want to restrict access further, change the string argument in the user_access function call. For example, to restrict access only to persons with access to CiviMail change the string to 'access CiviMail'. Any permission found at /admin/users/permissions can be used.
   4. So that CiviMail mailings have absolute urls to images, set the $baseURL property to the absolute url for the directory where you are storing images and $baseDir to the file system path for the same directory. Trailing slashes required.
4. Modify Drupal Settings
   1. In order for the authorization code to work, it has to have access to the session cookie. This can be enabled in your Drupal settings.php which is normally found at /sites/default/settings.php. Open this file in your editor. Find the cookie_domain property. Remove the # to un-comment the line and enable the setting. Adjust it as follows:
   2. Be sure to include the dot in front of your domain!

You should now have a functional CKFinder installation with proper authentication against your Drupal user/roles and priviledges.