CKEditor 4
Tue, 02/12/2008 - 00:41
#1
sack
sack's picture
Joined: 12/02/2008
Posts: 4

FCKEditor, CKFinder and Drupal (6 - RC4)

Hi, I spent a couple of days trying to get CKfinder to work with Drupal. FCKeditor was working fine, but I just couldn't get CKfinder to work, the default Filebrowser was always showing up instead of CKFinder. CKFinder would work independantly and also with the included sample files.

I found that the following lines in the fckeditor.module file was specifying whcih browser to use reguardless of what I set elsewhere in FCKeditor and CKfinder config files:

 if ($advanced_uploads) {
        $element['#suffix'] .= $js_id.".Config['LinkBrowserURL'] = '".$module_full_path."/fckeditor/editor/filemanager/browser/default/browser.html?Connector=".$connector_path."&ServerPath=".$files_path."';
  ".$js_id.".Config['ImageBrowserURL'] = '".$module_full_path."/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=".$connector_path."&ServerPath=".$files_path."';
  ".$js_id.".Config['FlashBrowserURL'] = '".$module_full_path."/fckeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=".$connector_path."&ServerPath=".$files_path."';\n";
      }


Once I changed these lines as per below, FCKeditor within Drupal now loads the CKfinder browser:
      if ($advanced_uploads) {
        $element['#suffix'] .= $js_id.".Config['LinkBrowserURL'] = '".$module_full_path."/fckeditor/editor/ckfinder/ckfinder.html';
  ".$js_id.".Config['ImageBrowserURL'] = '".$module_full_path."/fckeditor/editor/ckfinder/ckfinder.html?type=Image';
  ".$js_id.".Config['FlashBrowserURL'] = '".$module_full_path."/fckeditor/editor/ckfinder/ckfinder.html?type=Flash';\n";
      }


Another problem is the naming convention of directories:
FCKeditor specifies 'file' and 'image' drectories, CKfinder specifies 'files' and 'images'. The naming convention needs to be consistant over both FCKeditor and CKfinder. Probably only causes a problem if you intergrate CKfinder into FCKeditor at a later stage, not sure.
Top
Sat, 02/16/2008 - 03:06
sergey11
sergey11's picture
Joined: 16/02/2008
Posts: 2

Re: FCKEditor, CKFinder and Drupal (6 - RC4)

Possibly your notice about different directories naming is right. I've implemented your patch on my Drupal 5 FCK installation. Now I can browse my files with CKFinder only when I click "Add link" in FCKEditor. When I click "Add image" button, CKFinder loads, but both left and right panels are empty and gray. Did you overcome this problem?
Top
Sat, 02/16/2008 - 07:30
wiktor
wiktor's picture
Joined: 16/07/2007
Posts: 1641

Re: FCKEditor, CKFinder and Drupal (6 - RC4)

You need to change the name of the resource type in the CKFinder config file (Image -> Images) and probably also do the same change to the directory it points to.
Before:
$config['ResourceType'][] = Array(
      'name' => 'Images',
      'url' => $baseUrl . 'images',
      'directory' => $baseDir . 'images',
      'maxSize' => 0,
      'allowedExtensions' => 'bmp,gif,jpeg,jpg,png',
      'deniedExtensions' => '.svn');

After:
$config['ResourceType'][] = Array(
      'name' => 'Image',
      'url' => $baseUrl . 'images',
      'directory' => $baseDir . 'image',
      'maxSize' => 0,
      'allowedExtensions' => 'bmp,gif,jpeg,jpg,png',
      'deniedExtensions' => '.svn');

Wiktor Walc
CTO, CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+

Top
Sun, 02/17/2008 - 22:48
sack
sack's picture
Joined: 12/02/2008
Posts: 4

Re: FCKEditor, CKFinder and Drupal (6 - RC4)

Sergey11 wrote:Possibly your notice about different directories naming is right. I've implemented your patch on my Drupal 5 FCK installation. Now I can browse my files with CKFinder only when I click "Add link" in FCKEditor. When I click "Add image" button, CKFinder loads, but both left and right panels are empty and gray. Did you overcome this problem?


Yeah, I had to do a search through both FCKeditor and CKfinder files (just an autosearch with Dreamweaver) and pick up the references to files and images folders, then make them all consistant (i.e. File, Image, Media, Flash) .... DON'T do an autoreplace as I'm sure that would cause problems, it doesn't take long to scan trough the list.

In wiktor's example above, I actually changed that particular code to:

$config['ResourceType'][] = Array(
      'name' => 'Image',
      'url' => $baseUrl . 'Image', // not images
      'directory' => $baseDir . 'Image', // not image
      'maxSize' => 0,
      'allowedExtensions' => 'bmp,gif,jpeg,jpg,png',
      'deniedExtensions' => '.svn');


Not sure if changing ALL the above references to "Image" is necessary, but I thought what-the-hay, make it consistant and it works ;)

What wasn't mentioned in the install readme too was I had to make a "_thumbs" directory otherwise all the image previews were question marks.

Top
Mon, 09/08/2008 - 17:25
silkyd
silkyd's picture
Joined: 08/09/2008
Posts: 1

Re: FCKEditor, CKFinder and Drupal (6 - RC4)

OK, I give up. I am using v2.6.3 and don't see any lines in the fckeditor.module file that even mention 'advanceduploads'. It also looks like the previous if() was changed to a switch, so I tried adding something like this, but no go. 

        case 'advancedupload':
          $element['#suffix'] .= $js_id .".Config['LinkBrowser'] = true;\n";
          $element['#suffix'] .= $js_id .".Config['ImageBrowser'] = true;\n";
          $element['#suffix'] .= $js_id .".Config['FlashBrowser'] = true;\n";
          $element['#suffix'] .= $js_id .".Config['LinkBrowserURL'] = '". $module_full_path ."/fckeditor/editor/ckfinder/ckfinder.html?Connector=". $connector_path ."&ServerPath=". $files_path ."';\n";
          $element['#suffix'] .= $js_id .".Config['ImageBrowserURL'] = '". $module_full_path ."/fckeditor/editor/ckfinder/ckfinder.html?Type=Image&Connector=". $connector_path ."&ServerPath=". $files_path ."';\n";
          $element['#suffix'] .= $js_id .".Config['FlashBrowserURL'] = '". $module_full_path ."/fckeditor/editor/ckfinder/ckfinder.html?Type=Flash&Connector=". $connector_path ."&ServerPath=". $files_path ."';\n";
          break;


Does anyone have any ideas on how to get this working with v. 2.6.3 ? Thanks!
Top
Sun, 05/10/2009 - 13:14
z33k3r
z33k3r's picture
Joined: 10/05/2009
Posts: 2

Re: FCKEditor, CKFinder and Drupal (6 - RC4)

I finally got my install to work; figured I would share...

Software versions used:
  • Linux Server

  • Drupal 6.11

  • FCKeditor Module - WYSIWYG HTML editor 6.x-1.3

  • FCKeditor 2.6.4

  • CKfinder 1.3.2 for PHP


Step 1) You will need a working install of FCKeditor in Drupal. This is important so that you're not trying to fix bugs caused by another issue; besides, you should be at this point by now if you're reading this post... The README.txt found with the editor was accurate for installation; in my experience.

Step 2) Copy the CKFinder directory into the FCKeditor folder within the FCKeditor module for Drupal.

Step 3) In the FCKeditor Drupal module's fckeditor.module, find this:
if ($quickupload) {
        $js .= $js_id .".Config['LinkUpload'] = true;\n";
        $js .= $js_id .".Config['ImageUpload'] = true;\n";
        $js .= $js_id .".Config['FlashUpload'] = true;\n";        
      
      // $js .= $js_id .".Config['LinkBrowserURL'] = '". $module_full_path ."/fckeditor/editor/filemanager/browser/default/browser.html?Connector=". $connector_path ."&ServerPath=". $files_path ."';\n";
      // $js .= $js_id .".Config['ImageBrowserURL'] = '". $module_full_path ."/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=". $connector_path ."&ServerPath=". $files_path ."';\n";
      // $js .= $js_id .".Config['FlashBrowserURL'] = '". $module_full_path ."/fckeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=". $connector_path ."&ServerPath=". $files_path ."';\n";
}


...and replace it with this:
if ($quickupload) {
        $js .= $js_id .".Config['LinkUpload'] = true;\n";
        $js .= $js_id .".Config['ImageUpload'] = true;\n";
        $js .= $js_id .".Config['FlashUpload'] = true;\n";        
      
      // New paths for CKFinder
      $js .= $js_id .".Config['LinkBrowserURL'] = '". $module_full_path ."/fckeditor/ckfinder/ckfinder.html';\n";
      $js .= $js_id .".Config['ImageBrowserURL'] = '". $module_full_path ."/fckeditor/ckfinder/ckfinder.html?type=Images';\n";
      $js .= $js_id .".Config['FlashBrowserURL'] = '". $module_full_path ."/fckeditor/ckfinder/ckfinder.html?type=Flash';\n";
      
      // Originals
      // $js .= $js_id .".Config['LinkBrowserURL'] = '". $module_full_path ."/fckeditor/editor/filemanager/browser/default/browser.html?Connector=". $connector_path ."&ServerPath=". $files_path ."';\n";
      // $js .= $js_id .".Config['ImageBrowserURL'] = '". $module_full_path ."/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=". $connector_path ."&ServerPath=". $files_path ."';\n";
      // $js .= $js_id .".Config['FlashBrowserURL'] = '". $module_full_path ."/fckeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=". $connector_path ."&ServerPath=". $files_path ."';\n";
}


Step 4) Do the same as step 3 a few lines down replacing this:
        case 'builtin':
          $js .= $js_id .".Config['LinkBrowser'] = true;\n";
          $js .= $js_id .".Config['ImageBrowser'] = true;\n";
          $js .= $js_id .".Config['FlashBrowser'] = true;\n";
        
      // New paths for CKFinder
      $js .= $js_id .".Config['LinkBrowserURL'] = '". $module_full_path ."/fckeditor/ckfinder/ckfinder.html';\n";
      $js .= $js_id .".Config['ImageBrowserURL'] = '". $module_full_path ."/fckeditor/ckfinder/ckfinder.html?type=Images';\n";
      $js .= $js_id .".Config['FlashBrowserURL'] = '". $module_full_path ."/fckeditor/ckfinder/ckfinder.html?type=Flash';\n";
      
      // Originals
      // $js .= $js_id .".Config['LinkBrowserURL'] = '". $module_full_path ."/fckeditor/editor/filemanager/browser/default/browser.html?Connector=". $connector_path ."&ServerPath=". $files_path ."';\n";
      // $js .= $js_id .".Config['ImageBrowserURL'] = '". $module_full_path ."/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=". $connector_path ."&ServerPath=". $files_path ."';\n";
      // $js .= $js_id .".Config['FlashBrowserURL'] = '". $module_full_path ."/fckeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=". $connector_path ."&ServerPath=". $files_path ."';\n";
      
          break;


...with this:
        case 'builtin':
          $js .= $js_id .".Config['LinkBrowser'] = true;\n";
          $js .= $js_id .".Config['ImageBrowser'] = true;\n";
          $js .= $js_id .".Config['FlashBrowser'] = true;\n";
        
      // New paths for CKFinder
      $js .= $js_id .".Config['LinkBrowserURL'] = '". $module_full_path ."/fckeditor/ckfinder/ckfinder.html';\n";
      $js .= $js_id .".Config['ImageBrowserURL'] = '". $module_full_path ."/fckeditor/ckfinder/ckfinder.html?type=Images';\n";
      $js .= $js_id .".Config['FlashBrowserURL'] = '". $module_full_path ."/fckeditor/ckfinder/ckfinder.html?type=Flash';\n";
      
      // Originals
      // $js .= $js_id .".Config['LinkBrowserURL'] = '". $module_full_path ."/fckeditor/editor/filemanager/browser/default/browser.html?Connector=". $connector_path ."&ServerPath=". $files_path ."';\n";
      // $js .= $js_id .".Config['ImageBrowserURL'] = '". $module_full_path ."/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=". $connector_path ."&ServerPath=". $files_path ."';\n";
      // $js .= $js_id .".Config['FlashBrowserURL'] = '". $module_full_path ."/fckeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=". $connector_path ."&ServerPath=". $files_path ."';\n";
      
          break;


Step 5) Open config.php from within the CKfinder directory and replace the empty CheckAuthentication() function with this:
function CheckAuthentication() {
  static $authenticated;
 
  if (!isset($authenticated)) {
    $drupal_path = "../../../";
    if(!file_exists($drupal_path . "/includes/bootstrap.inc")) {
      $drupal_path = "../..";
      do {
        $drupal_path .= "/..";
        $depth = substr_count($drupal_path, "..");
      }
      while(!($bootstrapFileFound = file_exists($drupal_path . "/includes/bootstrap.inc")) && $depth<10);
    }
    if (!isset($bootstrapFileFound) || $bootstrapFileFound) {
      $cwd = getcwd();
      chdir($drupal_path);
      require_once "./includes/bootstrap.inc";
      drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);
      $authenticated = user_access("allow fckeditor file uploads");
      chdir($cwd);
    }
  }
 
  return $authenticated;
}
$Config['Enabled'] = CheckAuthentication();
$baseUrl = '/' . file_directory_path() . '/';


Step 6) Still within the CKfinder config.php file, set your $baseUrl path. This will need to match your FCKeditor file paths. For example:
$baseUrl = '/sites/default/files/userfiles/';


Step 7) Clear your cache and refresh your page... You should have a working install. If not, I have been up all night trying to figure this out and forgot something. Remember having a working install of Drupal and FCKeditor with basic file upload and browsing ability first will help you avoid headaches...
Top
Sat, 02/27/2010 - 01:55
compujohnny
compujohnny's picture
Joined: 16/02/2010
Posts: 2

Re: FCKEditor, CKFinder and Drupal (6 - RC4)

You can view a screencast on How to Install CKfinder File Browser with CKeditor in Drupal

Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check