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.


Download, install and enable the WYSIWYG Drupal Module.


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.


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


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

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

function CheckAuthentication() {
$cwd = getcwd();
include_once './includes/';
$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. 


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.


Find the file /sites/all/modules/wysiwyg/editors/ 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' => '',
    'download url' => '',
    '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(
      '' => 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.


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 = '';
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.

Linked In Profile