How to install CKEditor with CKFinder in Drupal in 30 seconds.*
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:
config.toolbar_DrupalCustom = [
['Source'],
['Cut','Copy','Paste','PasteText','-','SpellChecker', 'Scayt'],
['Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat'],
['Image','HorizontalRule','Smiley','SpecialChar'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Blockquote'],
['Link','Unlink','Anchor','LinkToNode', 'LinkToMenu'],
['Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks'],
['DrupalBreak', 'DrupalPageBreak']
];
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)
function CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
// ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
// user logs in your system.
// To be able to use session variables don't forget to add session_start().
return false;
}
After line 48:
$baseUrl = '/ckfinder/userfiles/';
insert the following line:
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
$cookie_domain = "www.yoursite.com";
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!