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

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!