Configuring ckeditor, WYSIWYG, IMCE modules and CKEditor & CKFinder libraries - a tutorial

Updated - July 7, 2012

This is a long overdue update to my original post. Some things change, some things remain the same. Some of the original post is here, most of it is gone.

Background -- Aug 20, 2010

Having attempted to scale that learning curve called Mount Drupal without ropes (and having failed), I am now working my way through the book Using Drupal by Angela Byron et. al. By the end of chapter 2, the casual reader has learned of the WYSIWYG, FCKeditor, and the IMCE modules.

The intrepid reader may have successfully installed Drupal and downloaded the code examples from the O'Reilly website, and noted that the Drupal core modules, the contributed modules, and even the directory tree from the O'Reilly site are really out of date. The determined reader will have rearranged the directory tree and updated the core modules and the recommended contributor modules referenced by the book; and maybe even downloaded the new CKeditor and something called CKFinder. The frustrated reader may have managed to get CKEditor and CKFinder working together - sort of. At this point there are ckeditor amd ckfinder subdirectories in the sites/all/modules/ckeditor directory.

There are now over 1100 files and 285 folders in the /modules/ckeditor/ directory!

Then a new twist..

So I decided to enable the WYSIWYG and the IMCE modules. The WYSIWYG module informs me that the CKEditor library needs to be in a sites/all/libraries directory.

So I created a sites/all/libraries directory and then extract the CKEditor library into a directory called ckeditor. The WYSIWYG module is now happy. Then I delete the sites/all/modules/ckeditor/ckeditor directory. Everything works properly again after I do a Drupal update. This is all quite amazing.
But the same procedure the CKFinder library fails. So like a damn fool, the I set out to find out why?

There is a point to all of this...

I would like to share the insights learned in this process and eventually become a Drupal contributor. This will be my first attempt. What follows is a tutorial on getting all of the modules listed in the title line working together. Over the next few days I will add, edit and clarify this post according to any feedback received here.

Where to begin?

This tutorial assumes that you may have already done the following according to the current instructions in the README.txt file in the ckeditor module.

• installed the ckeditor module in sites/all/modules/ckeditor
• installed the CKEditor library in a sites/all/modules/ckeditor/ckeditor directory
• installed the CKFinder library in a sites/all/modules/ckeditor/ckfinder directory

< ---- A really big SNIP occurred here ---- >

The Update - July 7, 2012

I gave up on ckeditor for a while. It was made clear to me that I had it all wrong; that the ckeditor module and the wysiwyg module are incompatible, like oil and water. It was never meant to be. Then Drupal 7 came along and it was a long, long, time before any D7 version of the ckeditor module was ready.

I tried out the rival wysiwyg module with the ckeditor library (and without the ckeditor module enabled). The wysiwyg module has some excellent code contained within -- there is much to learn from it. They even disable the rival ckeditor module if it happens to be enabled. I think the name of that function should be Dont_fuck_with_me_bro() but that's just me..

But in the end, I found the wysiywyg module to be like that 27 function swiss army knife that is just too big to carry around camping. In addition, a special effort was needed to get the ckfinder library functioning. It required a bridge module from a sandbox project.

But what really irritated me with all the different module/library configurations was that there was no way to control the size of the edit box that appeared. I figured out how to adjust that size, but then every ckeditor widget that appeared was the same height, whether it was for adding a full page rant (like this) or a simple comment.

Why are the simplest things in Drupal so damn difficult?

I gave the latest ckeditor module another go recently, with some success.

Configuring the D7 ckeditor module and the CKEditor/CKFinder libraries

The good news is that it is now possible, with the latest versions of the ckeditor module, to locate the CKEditor and CKFinder libraries in /site/all/libraries rather than in subdirectories under the /sites/all/modules/ckeditor directory. I believe this is the case for both D6 & D7 versions of ckeditor.

The bad news is that the instructions for configuring ckfinder in the README file (and the accompanying code) are just as bad as they were 2 years ago, which is why I made the original post. You can read the original version if you want, even if I can't change the title of this post. Sigh.

Get to the point!

OK - kindly disregard most of the information in the ckeditor/README.txt file with respect to installing ckfinder.

Integrating the CKFinder library with the CKEditor library can be handled with the simple addition of a Drupal ckfinder configuration file -- drupal.config.inc-- to the /sites/all/libraries/ckfinder directory. It is intended as a replacement for the filemanager.config.php file found in the /sites/all/modules/ckeditor/includes/ directory.

/*
 * @file
 * A Drupal include file for adding ckfinder to a ckeditor instance vis-a-vis 
 * the drupal ckeditor module.  Copy this file to the root directory of
 * the ckfinder library and reference it with an include statement in the 
 * ckfinder file 'config.php'.
 *
 * The code sets ckeditor variables $baseUrl and $baseDir.  It replaces 
 * the ckeditor defaults, or the default values found in config.php.   
 */

/** 
 * Drupal bootstrap -- start_session() invoked -- allows drupal calls.
 *
 * Do a backward search through the directory tree for a signature file and then 
 * execute an appropriate drupal bootstrap. Return to the starting dir and 
 * resume loading.
 */
function _init_drupal_CKFinder() {
  global $baseUrl, $baseDir;

  $start_cwd = getcwd();
  $path = $start_cwd;

  // Cheater code to save time -- optimized for /sites/all/libraries/ckfinder config.
  // Comment out next line if it does not work.
  chdir('../../../../../..'); $path = getcwd();

  // single steps back thru each parent on the dir tree looking for drupal
  while(strlen($path) > 3) {
    $path = dirname($path);
    if( file_exists($path . '/includes/bootstrap.inc')) 
      break; 
  };
  chdir($path);
  
  require_once './includes/bootstrap.inc';
  define('DRUPAL_ROOT', getcwd());
  drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);
// drupal_bootstrap(DRUPAL_BOOTSTRAP_SESSION);
  
  // Get back, get back, get back to where you once belonged. Beatles - Get Back (1968).
  chdir($start_cwd);
  //drupal_set_message("connector.php path was $start_cwd");

  // we should now have a $_SESSION array and other info -- set the ckfinder globals.
  if (isset($_GET['id'], $_SESSION['ckeditor'][$_GET['id']]['UserFilesPath'], $_SESSION['ckeditor'][$_GET['id']]['UserFilesAbsolutePath'])){
    $_SESSION['ckeditor']['UserFilesPath'] = $_SESSION['ckeditor'][$_GET['id']]['UserFilesPath'];
    $_SESSION['ckeditor']['UserFilesAbsolutePath'] = $_SESSION['ckeditor'][$_GET['id']]['UserFilesAbsolutePath'];
    $baseUrl = $_SESSION['ckeditor']['UserFilesPath'];
    $baseDir = $_SESSION['ckeditor']['UserFilesAbsolutePath'];
  } 
}

// Drupal bootstrap
_init_drupal_CKFinder();

/**
 * Replaces the CheckAuthentication() function in config.php.  The CKfinder
 * library invokes this function communication to the server in connector.php.
 * Note that user_access() is a drupal function.
 */
function CheckAuthentication() {
  return user_access('allow CKFinder file uploads');
}

There are two functions. The first does a drupal bootstrap and gets info from the Drupal server. The second function, CheckAuthentication() is called by ckfinder functions and replaces the CheckAuthentication() found in /ckfinder/config.php.

The key assignment here is to set two variables $baseUrl and $baseDir. These variables are referenced by the ckfinder library functions. The file config.php is the ckfinder hook to these variables.

A simple two step dance

Step 1 - After you have copied and pasted the above to drupal.config.inc in the root directory of the ckfinder library, edit the config.php file to include this file after the final reference to either $baseUrl or $baseDir. i.e.

$baseDir = resolveUrl($baseUrl);
include 'drupal.config.inc';

Step 2 - Comment out or remove the CheckAuthentication() function in config.php.

The drupal.config.inc will replace whatever $baseUrl and $baseDir have been set to if everything works properly.

If you comment out this include statement, then ckeditor/ckfinder work together like the standalone out-of-the-box product. This mode of operation is a great way to learn how ckeditor and ckfinder work together (see the demo files) and to get file and directory permissions sorted out. Add the include statement back in, and it's back into drupal mode of operation.

Edit those ckeditor profiles

After installing the ckfinder library and drupal.config.inc, it will be necessary to configure each ckeditor profile so that ckfinder is enabled. The first step is to add a file widget (like image) to the toolbar, the second step is to enable ckfinder under the File Browser settings. It's possible to give each user their own upload directory. Use the %u/ token (note the trailing slash), not %n, because if the user name changes, they can't see their previous uploads.

About that status report...

You can get everything working here but there remains one problem: The status report (/admin/reports/status) will report a ckeditor error -- it will ask you to review the file that I just asked you to disregard.

To eliminate this error, simply add the following 3 lines to libraries/ckfinder/config.php. If the require_once line in between /* */ markers, the error goes away.

/*
require_once '../../../includes/filemanager.config.php';
*/

Good luck and success with this if you try it. CKfinder/CKEditor are a couple of great apps once you get them working together.

-Dio

P.S. -ignore the patch below - I can't change or get rid of that either.