CKEditor/ CKFinder with CakePHP 2.0

Sharon picture Sharon · Mar 30, 2012 · Viewed 7.8k times · Source

I'm trying to add image and file upload to my CKEditor instance (within a CakePHP app). CKEditor has been working fine, but I can't get the CKFinder part to work. I can get the 'Browse Server' button to appear, but when I click it, I get a window with the message:

The requested URL /ckfinder/ckfinder.html was not found on this server.

I've tried various combinations of paths, but I'm obviously just not hitting the right one!

Here's what I have so far:

File structure:

 In /app/webroot/js I have ckeditor and ckfinder
 In /app/webroot/ I have files, which is what I'd like to upload to (ideally files/Images and files/PDF, but that doesn't matter so much)

I've changed the paths in ckfinder/config.php as follows:

$baseUrl = '/files/';
$baseDir = '/www/MCS/app/webroot/files/'; (/www/MCS is the path to the app)

In my view file, I have the following:

<script type="text/javascript">
    var instance = CKEDITOR.instances['PageContent'];
    if(instance)
    {
        CKEDITOR.remove(instance);
    }
    var editor =
    CKEDITOR.replace( 'PageContent', {
        toolbar: 'Page',
        width: '737',
        height: '280',
        filebrowserBrowseUrl : 'ckfinder/ckfinder.html',
        filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
        filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
        filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
        filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
        filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
    });
</script>

I've tried changing the paths in the code above, adding various parts of the full URL, but nothing has helped.

I'm using the latest versions of CKEditor and CKFinder, and CakePHP 2.0.

Answer

Sharon picture Sharon · Apr 10, 2012

For anyone else who comes up against this, here's what I did to fix it:

Downloaded ckfinder into /app/webroot/js/ckfinder

In /app/webroot/js/ckfinder/config.php, I have

$baseUrl = 'http://localhost/mysite/app/webroot/js/ckfinder/userfiles/';

and I changed the authenticate function (thanks to Natdrip, above) to

function CheckAuthentication()
{
    session_name("CAKEPHP");
    session_start();
    if( isset($_SESSION['Auth']['User']) ) { return true; }
    return false;
}

I set it up in the view using:

var editor =
CKEDITOR.replace( 'PageContent', {
    toolbar: 'Page',
    width: '700',
    height: '280',
    filebrowserBrowseUrl : '/mysite/app/webroot/js/ckfinder/ckfinder.html',
    filebrowserImageBrowseUrl : '/mysite/app/webroot/js/ckfinder/ckfinder.html?type=Images',
    filebrowserFlashBrowseUrl : '/mysite/app/webroot/js/ckfinder/ckfinder.html?type=Flash',
    filebrowserUploadUrl : '/mysite/app/webroot/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
    filebrowserImageUploadUrl : '/mysite/app/webroot/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
    filebrowserFlashUploadUrl : '/mysite/app/webroot/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});

Once I had done this, I could see the 'Browse Server' button when I clicked 'Add Image' in CKeditor, but it was giving the usual 'Cakephp can't find the controller error'.

So, I edited my htaccess files so that anything being directed to ckfinder would not look for a controller. To do this I added:

   RewriteRule   ^ckfinder/ - [L]

after RewriteEngine on in all 3 files

and after that, it worked!

I don't know if this is the best way to do it, but maybe it will help someone else a little bit!