How to install CKEditor with CKFinder in Drupal, under Wysiwyg module

After trying many methods to have a stable WYSIWYG editor (What You See Is What You Get) with a file manager / upload system, I finally made all necessary changes so as to have all the following advantages:

  1. Use of the WYSIWYG Drupal Module, which is really easy to use and customize
  2. Use of CKEditor, which really rocks.
  3. Use of CKFinder, same as CKEditor.
  4. Drupal upload access integration.

However, I have to say beforehand that the following solution is based also in changing some source code. However, I will try to be as explanative as possible.

A.

Download, install and enable the WYSIWYG Drupal Module.

B.

Download and install CKEditor. To do so, read the instructions under URL /admin/settings/wysiwyg of your site. If for any reason WYSIWYG module cannot identify CKEditor files, try installing a previous version of CKEditor. For example, CKEditor v.3.5.3 has been checked and works just fine. Let's say for our demonstration purposes that you have installed CKEditor under /sites/all/libraries/ckeditor, which means that you can find the file /sites/all/libraries/ckeditor/ckeditor.js.

C.

Dowload an install CKFinder. To do so, download the necessary files for PHP from here, and put the ckfinder under the ckeditor directory. This means that will have a directory named /sites/all/libraries/ckeditor/ckfinder and we will be able to find the file /sites/all/libraries/ckeditor/ckfinder/ckfinder.js.

 

Now, we have concluded installing new files, and we are going to change the source code in some of them, so as to:

  1. CKEditor to be able to identify the existance of CKFinder
  2. File uploads will be granted under any circumstance from the Drupal user access system

A.

Find the file /sites/all/libraries/ckeditor/ckfinder/config.php.

1. Replace the existing function CheckAuthentication with the following one.

function CheckAuthentication() {
 
$cwd = getcwd();
chdir('../../../../../../../../');
include_once './includes/bootstrap.inc';
drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);
chdir($cwd);
 
$t = user_access("administer files");
return ($t == TRUE);
}
This function is executed, when somebody clicks the Upload button and CKFinder wants to know if this user, who makes the request, has the prevelegies to browse the server. So in order to do so, we have to bootstrap the drupal system, check the equivalent user acces and return True or False. So, in order to bootstrap the drupal system, we save the current dircetory, whatever this is (we don't know for sure, because the request is through Ajax), change the current directory to the one Drupal needs, bootstrap the Drupal sytem, restore the current directory for CKFinder to continue to work as expected and return True or False after checking a spesific user access. You can easily change what user access to check, just change "administer files" to whatever you want. All availiable access values can be found under /admin/user/permissions page.
If you want, you can easily check for user role, instead of user access. A small example could be to replace the last two lines with
 

global $user;

return (in_array('administrator', array_values($user->roles)));
 

 

2. Find the line "$baseUrl = ..." and change to:
$baseUrl = '/sites/default/files/';
or to whatever directory you want to point to as the root for your Browser Management.
Caution: Don't forget a) to have the trailing slash and b) to set the full write access prevelegies to the specified directory. 
 

B. 

Find the file /sites/all/libraries/ckeditor/config.js and add the follwing:
    CKEDITOR.config.filebrowserBrowseUrl = '/sites/all/libraries/ckeditor/ckfinder/ckfinder.html';
    CKEDITOR.config.filebrowserImageBrowseUrl = '/sites/all/libraries/ckeditor/ckfinder/ckfinder.html?Type=Images';
    CKEDITOR.config.filebrowserFlashBrowseUrl = '/sites/all/libraries/ckeditor/ckfinder/ckfinder.html?Type=Flash';
    CKEDITOR.config.filebrowserUploadUrl = '/sites/all/libraries/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type;=Files';
    CKEDITOR.config.filebrowserImageUploadUrl = '/sites/all/libraries/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type;=Images';
    CKEDITOR.config.filebrowserFlashUploadUrl = '/sites/all/libraries/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type;=Flash';
 
All the above code, adds specific configuration to the CKEditor namespace.
Caution: If you have different installation directories, change the URLs so as to point the specified ckfinder.html and connector.php as appropriate.
 

C.

Find the file /sites/all/modules/wysiwyg/editors/ckeditor.inc and change the function wysiwyg_ckeditor_editor() with the following one. In bold, you will find the line to add.
function wysiwyg_ckeditor_editor() {
  $editor['ckeditor'] = array(
    'title' => 'CKEditor',
    'vendor url' => 'http://ckeditor.com',
    'download url' => 'http://ckeditor.com/download',
    'libraries' => array(
      '' => array(
        'title' => 'Default',
        'files' => array(
          'ckeditor.js' => array('preprocess' => FALSE),
          'config.js' => array('preprocess' => FALSE), /* <- THIS LINE */
        ),
      ),
      'src' => array(
        'title' => 'Source',
        'files' => array(
          'ckeditor_source.js' => array('preprocess' => FALSE),
        ),
      ),
    ),
    'version callback' => 'wysiwyg_ckeditor_version',
    'themes callback' => 'wysiwyg_ckeditor_themes',
    'settings callback' => 'wysiwyg_ckeditor_settings',
    'plugin callback' => 'wysiwyg_ckeditor_plugins',
    'plugin settings callback' => 'wysiwyg_ckeditor_plugin_settings',
    'proxy plugin' => array(
      'drupal' => array(
        'load' => TRUE,
        'proxy' => TRUE,
      ),
    ),
    'proxy plugin settings callback' => 'wysiwyg_ckeditor_proxy_plugin_settings',
    'versions' => array(
      '3.0.0.3665' => array(
        'js files' => array('ckeditor-3.0.js'),
      ),
    ),
  );
  return $editor;
}
The line you have just added, says that drupal should also include config.js, the one we have previously changed, when sending responses to the user.
 

D.

Find the file /sites/default/settings.php and change the $cookie_domain variable to the domain of your site. For example, for me this would be:
 
$cookie_domain = '1024.gr';
This, says that everything that leaves Drupal will have this cookie set. If we forget to change this, all Ajax requests will be identified as Anonymous, and we will never get access to browse the server.
 
Hope all the above will help. The helped me, and that's why I prefer to share them with the drupal community.
Comments are welcome.

Comments

Mistake in B. "Find the file

Mistake in B.
"Find the file /sites/all/libraries/ckeditor/ckfinder.js and add the following:"

There is no such file, and now I try to figure out which one you really mean... ;-)

Found it: you meant

Found it: you meant ckeditor/config.js

Yeap, that't right. (I 'll

Yeap, that't right. (I 'll change the blog entry to be correct)

Did you had any problems making the changes? Did it worked as expected?

Hello, A.1. -> I add : $cwd =

Hello,

A.1. -> I add :

$cwd = getcwd();
chdir('../../../../../../../../');
define('DRUPAL_ROOT', getcwd()); /* THIS LINE */

Else, the following Error appear :
Notice: Use of undefined constant DRUPAL_ROOT - assumed 'DRUPAL_ROOT' in /homez.382/supralog/www/drupal/includes/bootstrap.inc on line 2203

Warning: require_once(DRUPAL_ROOT/includes/errors.inc) [function.require-once]: failed to open stream: No such file or directory in /homez.382/supralog/www/drupal/includes/bootstrap.inc on line 2203

Fatal error: require_once() [function.require]: Failed opening required 'DRUPAL_ROOT/includes/errors.inc' (include_path='.:/usr/local/lib/php') in /homez.382/supralog/www/drupal/includes/bootstrap.inc on line 2203

I am extremely impressed with

I am extremely impressed with your writing skills and also with the layout on your blog. Is this a paid theme or did you modify it yourself? Either way keep up the nice quality writing, it is rare to see a nice blog like this one these days..
wesdf

In case anyone is interested,

In case anyone is interested, we've created a bridging module to take some of the pain out of this process. You can find it at http://drupal.org/project/WYSIWYG-CKFinder

It has an administration interface for setting licence keys and base URL paths, so you don't need to edit the config.php file. It also adds Drupal permissions so you can manage access to CKFinder through the usual Drupal permissions user interface. We hope you find it useful.

This was a very informative

This was a very informative post which told me in detail about CKEditor with CKFinder in Drupal under Wysiwyg module. It is very advantageous to use it in this way. I am happy that you shared this with us. Thanks for that. Keep posting.

Linked In Profile