KCFinder Image Browser gives 404 error when editing a Page

I have KCFinder integrated into KCEditor for image uploads in a Codeigniter site. When I create a Page, it works. I can upload images to the server and insert them into a page. But when I get back the page from MySQL into CKEditor for editing, KCFinder throws a 404 error when I try to browse for an image.

The problem is that when editing, the image browser gets the URL wrong! But both the edit page and the create page are linking to the same KCFinder folder so I don't understand why it breaks during page edit.

Here is how the URLs are in ckeditor's config.js file:

   config.filebrowserBrowseUrl = '../kcfinder/browse.php?opener=ckeditor&type=files';
   config.filebrowserImageBrowseUrl = '../kcfinder/browse.php?opener=ckeditor&type=images';
   config.filebrowserFlashBrowseUrl = '../kcfinder/browse.php?opener=ckeditor&type=flash';
   config.filebrowserUploadUrl = '../kcfinder/upload.php?opener=ckeditor&type=files';
   config.filebrowserImageUploadUrl = '../kcfinder/upload.php?opener=ckeditor&type=images';
   config.filebrowserFlashUploadUrl = '../kcfinder/upload.php?opener=ckeditor&type=flash';

The only way I could solve this problem was to use an Absolute URL. So I replaced ../ with http://localhost.dev for all the paths, like so ...

config.filebrowserBrowseUrl = 'http://localhost.dev/kcfinder/browse.php?opener=ckeditor&type=files';

This solves the problem but I don't like Absolute URLs for situations like this for portability reasons (I have to change the URL whenever I move the site to a different environment). Is there a way I can solve this issue and maintain relative URLs? N/B Any painless alternatives are most welcome.

Solution

If KCFinder is in the plugins folder of your CKEditor installation:

config.filebrowserBrowseUrl = CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'kcfinder' ) + 'browse.php?type=files' );
config.filebrowserImageBrowseUrl = CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'kcfinder' ) + 'browse.php?type=images' );
config.filebrowserFlashBrowseUrl = CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'kcfinder' ) + 'browse.php?type=flash' );
config.filebrowserUploadUrl = CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'kcfinder' ) + 'upload.php?type=files' );
config.filebrowserImageUploadUrl = CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'kcfinder' ) + 'upload.php?type=images' );
config.filebrowserFlashUploadUrl = CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'kcfinder' ) + 'upload.php?type=flash' );