How to install CKEditor with CKFinder in Drupal in 30 seconds.*

How to install CKEditor with CKFinder in Drupal in 30 seconds.*

Next

You may already be using CKEditor to allow your content creators to add fancy markup to text areas, so, why not let them upload fancy images and other files as well. Here's a quick run-through on how you can install and configure both CKEditor and CKFinder to enhance your drupal site's fanciness.

Note: it's always a good idea to backup your site before trying something new. I won't go into that here but here's a link that might help you out: http://tinyurl.com/368jcgg

Download the CKEditor Module here:
http://drupal.org/node/739534

Extract the downloaded .tar.gz file, and copy the ckeditor folder into to the /sites/all/modules/contrib directory of your drupal installation.

Download CKEditor 3.2.1 here:
http://ckeditor.com/download

Extract the downloaded .tar.gz file.

Copy the contents of the ckeditor folder into /sites/all/modules/contrib/ckeditor/ckeditor

At this point you may want to edit the available toolbar options removing any unnecessary items. In most cases, I prefer the following configuration as it allows maximum fanciness while minimizing the types of markup which could override the site's styling

edit /sites/all/modules/contrib/ckeditor/ckeditor.config.js

Create a new toolbar by adding the following configuration to ckeditor.config.js:

  1.   config.toolbar_DrupalCustom = [
  2.       ['Source'],
  3.       ['Cut','Copy','Paste','PasteText','-','SpellChecker', 'Scayt'],
  4.       ['Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat'],
  5.       ['Image','HorizontalRule','Smiley','SpecialChar'],
  6.       ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
  7.       ['NumberedList','BulletedList','-','Blockquote'],
  8.       ['Link','Unlink','Anchor','LinkToNode', 'LinkToMenu'],      
  9.       ['Format','Font','FontSize'],
  10.       ['TextColor','BGColor'],
  11.       ['Maximize', 'ShowBlocks'],
  12.       ['DrupalBreak', 'DrupalPageBreak']
  13.      ];

You can now select this option within the CKEditor Appearance section at /admin/settings/ckeditor/edit/Advanced

Now on to CKFinder...

Download CKFinder here:
http://ckfinder.com/download

Extract the downloaded .tar.gz file and copy the ckfinder folder into /sites/all/modules/contrib/ckeditor/ckfinder

Edit /sites/all/modules/contrib/ckeditor/ckfinder/config.php

delete the following function (lines 21 -34)

  1. function CheckAuthentication()
  2. {
  3. 	// WARNING : DO NOT simply return "true". By doing so, you are allowing
  4. 	// "anyone" to upload and list the files in your server. You must implement
  5. 	// some kind of session validation here. Even something very simple as...
  6.  
  7. 	// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
  8.  
  9. 	// ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
  10. 	// user logs in your system.
  11. 	// To be able to use session variables don't forget to add session_start().
  12.  
  13. 	return false;
  14. }

After line 48:

  1. $baseUrl = '/ckfinder/userfiles/';

insert the following line:

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

enable write permissions on /sites/default/settings.php

edit settings.php

Change the value of $cookie_domain (line 169) to your drupal site's domain name

  1. $cookie_domain = "<a href="http://www.yoursite.com";">www.yoursite.com";</a>

Save settings.php and change it's permissions back to readonly

login to your drupal site as an administrator and navigate to:
/admin/user/permissions

enable the following for authenticated users:
access ckeditor
allow CKFinder file uploads

Save permissions.

Navigate to /admin/settings/ckeditor

edit the Advanced Profile

Change the following settings so that they all use CKFinder:
Filebrowser type (link dialog)
Filebrowser type (image dialog)
Filebrowser type (flash dialog)

CKEditor is now configured to use CKFinder as it's file browser!

* line numbers, install / config time, and fanciness may vary!

Related Posts