How to integrate CKEditor and KCFinder with Cakephp

How to integrate CKEditor and KCFinder with Cakephp

How to integrate CKEditor and KCFiinder with Cakephp

How to integrate CKEditor and KCFinder with Cakephp

CKFinder is not free but in Cakephp you can integrate KCFinder file manager into CKEditor so that you can upload files to your server.

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?

Download CKEditor from www.ckeditor.com
Copy files from the zipped folder to "webroot/js/ckeditor/"
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.
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?

Download KCFinder from kcfinder.sunhater.com
Copy files from the zipped folder to "webroot/js/kcfinder/"
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');
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.

Published: 1st June 2016 by

Adverts

Contents

How to integrate CKEditor and KCFinder with Cakephp