CKEditor/ CKFinder with CakePHP 2.0

Question

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 1

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!

Answer 2

I have the ckeditor located @ webroot/js/ I downloaded and installed http://labs.corefive.com/Projects/FileManager/ and have it located @ webroot/js/ckeditor/filemanager

for the ckeditor/config.js I added the following code:

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
    config.uiColor = '#AADC6E';
    config.width = '100%';
    config.filebrowserBrowseUrl = '/js/ckeditor/filemanager/index.html';
    config.filebrowserImageBrowseUrl = '/js/ckeditor/filemanager/index.html?type=Images';
    config.filebrowserFlashBrowseUrl = '/js/ckeditor/filemanager/index.html?type=Flash';
    config.filebrowserUploadUrl = '/js/ckeditor/filemanager/connectors/php/filemanager.php';
    config.filebrowserImageUploadUrl = '/js/ckeditor/filemanager/connectors/php/filemanager.php?command=QuickUpload&type;=Images';
    config.filebrowserFlashUploadUrl = '/js/ckeditor/filemanager/connectors/php/filemanager.php?command=QuickUpload&type;=Flash';

};

I created the folders /app/webroot/assets/img/
in the filemanager.config.js I switched

var fileRoot = '/app/webroot/assets/img/';

in the /app/webroot/js/ckeditor/filemanager/connectors/php/filemanager.config.php I added to the auth()

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

in the view add/edit I added the following:

echo $this->Form->textarea('Content',array('class'=>'ckeditor'));

and it works! here is the web site I used for ref http://www.hashtwo.com/blog/integrating-a-file-browser-into-ckeditor-cakephp

Answer 3

You mentioned you have ckfinder in /js, so I would prepend all the paths with /js .

filebrowserBrowseUrl : '/js/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/js/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : '/js/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : '/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'

Answer 4

I worked around for a long time. My solution with cakephp 2.3 is at the end put into the webroot/js/ckfinder the version 2.3.1 of ckfinder then In a custom helper I put following code as getFck function

    function _getFck( $pToReplaceId, $pHtmlContent=null, $pLabel=null ){
    $result = "";

    if ( $pLabel != null ){
        $result .= "<div class=\"input text\">\n";
        $result .= "<label for=\"$pToReplaceId\">".__($pLabel)."</label>\n";
        $result .= "</div>\n";
    }
    App::uses('FormHelper', 'View/Helper');
    $fh = new FormHelper(new View());   
    $result .= $fh->input('comment', array(
        'id' => $pToReplaceId,
        'name' => $pToReplaceId,
        'type' => 'textarea',
        'value' => $pHtmlContent,
        ));
    $result .= "<script>var ckEditor = CKEDITOR.replace( '$pToReplaceId', {
        removeButtons: '',
        toolbar: 'Page',
        skin: 'moono',
        lang: 'fr',
        filebrowserBrowseUrl: '/js/ckfinder/ckfinder.html',
        filebrowserImageBrowseUrl: '/js/ckfinder/ckfinder.html?Type=Images',
        filebrowserFlashBrowseUrl: '/js/ckfinder/ckfinder.html?Type=Flash',
        filebrowserUploadUrl: '/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
        filebrowserImageUploadUrl: '/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
        filebrowserFlashUploadUrl: '/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
} );</script>";

    echo $result;
}

and for configuration in the /js/ckfinder/Config.php file the following methods and settings:

$baseUrl = "http://".$_SERVER['HTTP_HOST']."/files/ckFinderFiles/";//working on prod
$baseDir = $_SERVER['DOCUMENT_ROOT'].'/app/webroot/files/ckFinderFiles/';//working on prod

Dont forget to modify the CheckAuthentication method as described above...