CKEditor + KCFinder integration with CakePHP - tutorial

Lately I have been developing an application based on the new version of CakePHP (I am currently switching from 1.3 to 2.0.5).
Together with the change of CakePHP version, I also wanted to implement the new version of WYSIWYG editor - so far I've been using FCKeditor, which is no longer developed and which was replaced with CKEditor. I decided to move on with CKEditor.
CKEditor is also free and open source like FCKeditor, but there is a small difference between these two editors. FCKeditor had a built-in option of file managment (for example browsing server or file upload in insert image file option), which CKEditor doesn't have in the free and open source version. The file manager which can be used along with CKEditor is CKFinder - but this software isn't free. You have to buy licence to use it.
But there is a workaround - we can use a free KCFinder file manager, which can be easily integrated into CKEditor and other editors (FCKeditor, TinyMCE).

For the purpose of tutorial let's assume that our Cake application is being stored on our localhost and the "webroot" of our application is under "http://localhost/".

The following instructions were made based on a following versions of software:

• CakePHP 2.0.5
• CKEditor 3.6.2
• KCFinder 2.51

How to install and integrate CKEditor to CakePHP? 

1. Download CKEditor from www.ckeditor.com
2. Copy files from the zipped folder to "webroot/js/ckeditor/"
3. In the view where you want to display the editor, put the following script on the top of the page (or somewhere before textarea which you want to contain editor):
   

   <?php echo $this->Html->script('ckeditor/ckeditor');?>

   This scipt will include the "webroot/js/ckeditor.js" file to your view.
4. Create the textarea and give it a class named "ckeditor"
   

   <?php echo $this->Form->textarea('content',array('class'=>'ckeditor'))?>

Voila! The editor is now displaying instead of raw textarea.


How to install and integrate KCFinder to CakePHP?

1. Download KCFinder from kcfinder.sunhater.com
2. Copy files from the zipped folder to "webroot/js/kcfinder/"
3. Open "webroot/js/kcfinder/config.php" file.
   In this file you can set several configurations, but we will focus on the ones that are most important for our file manager to work.
   KCFinder is disabled by default.
   If you want to give the ability of using file manager to all users in your website (so with no restrictions), change the value of 'disabled' to false.
   

   'disabled' => false,

   But giving everyone access to managing files on the server is probably not a good idea. Instead of this, you can enable file managment only when a specified session variable is set. The name of the session variable is on the bottom of config.php file:
   

   '_sessionVar' => &$_SESSION['KCEDITOR'],

   So, this is what you should do to make the file manager available after an authenticated user logs in:
   
   • leave the "disabled" to "true"
   • in the controller where you do the user authentication, after user has successfully logged in, enter this code to override the "disabled" value:
     

     $_SESSION['KCEDITOR']['disabled']=false;

     Remember to destroy this session variable after user logs out.
     
   • on the top of the "webroot/js/kcfinder/core/autoload.php" file insert:
     

     session_name('CAKEPHP');

4. Still in the "config.php" file define the folder for uploaded files. By default the folder is "upload" in "kcfinder" directory.
   If you are developing an application on your localhost and the "webroot" is under a "http://localhost/" address, and you want to keep uploaded files in "webroot/upload" folder, the 'uploadURL' configuration should look like:
   

   'uploadURL' => "/app/webroot/upload",

   If you are developing your application under for example "http://localhost/my_app/" address, the uploadURL should look like:
   

   'uploadURL' => "/my_app/app/webroot/upload",

You can test if KCFinder displays and works correctly under the URL:
http://path_to_your_app/js/kcfinder/browse.php


How to integrate KCFinder to CKEditor in CakePHP?
Open the "webroot/js/ckeditor/config.js" file and modify editor config to contain following code:

CKEDITOR.editorConfig = function( config )
{
   config.filebrowserBrowseUrl = '/js/kcfinder/browse.php?type=files';
   config.filebrowserImageBrowseUrl = '/js/kcfinder/browse.php?type=images';
   config.filebrowserFlashBrowseUrl = '/js/kcfinder/browse.php?type=flash';
   config.filebrowserUploadUrl = '/js/kcfinder/upload.php?type=files';
   config.filebrowserImageUploadUrl = '/js/kcfinder/upload.php?type=images';
   config.filebrowserFlashUploadUrl = '/js/kcfinder/upload.php?type=flash';
};

If your app is being developed under for example http://localhost/my_app/, remember to put the whole path in the URLs, for example:

config.filebrowserBrowseUrl = '/my_app/js/kcfinder/browse.php?type=files';

After adding above six lines of code in the CKEditor configuration you should be able to see "Browse" button in image / link / Flash insert options.

And that's it!:-)