Integrating CKEditor and CKFinder with Perch

Perch is a great light content management system, but it’s textarea editor (markitup) leaves a lot to be desired. This quick tutorial runs through how to replace this editor with CKEditor (an excellent open source WYSIWYG editor) and CKFinder (a paid add-on to CKEditor which adds upload functionality).

This tutorial uses the following versions:

  • Perch – 1.5.5
  • CKEditor Perch Plug-In (CKEditor 3.3.2)
  • CKFinder – 2.0.1

1. Add CKEditor

Adding CKEditor is pretty straightforward, thanks to a plug-in on the Perch website –

Download the file and place the ckeditor folder into the perch/plugins/editors directory. CKEditor can now be used on any textarea field in Perch – set the following options in your template files (as well as the standard ID, label etc.):

<perch:content type="textarea" editor="ckeditor" html="true" />;

By default, CKEditor uses the full toolbar – personally I do not like to give users so many options, so I have replaced the contents of perch/plugins/editors/ckeditor/config.js with:

CKEDITOR.editorConfig = function( config )
     config.forcePasteAsPlainText = true;
     config.toolbar = 'Full';

     config.toolbar_Full =

2. Add CKFinder

This is where it gets a bit more complicated – whilst there is quite a lot of documentation in integrating CKFinder with CKEditor there is next to nothing about how to integrate CKFinder in Perch (other than a few forum posts)

a) Download CKFinder

Download the latest PHP version of CKFinder from and install to /ckfinder directory (this is the default install directory, if you install CKFinder to /perch/ckfinder or perch/plugins/editors/ckeditor/ckfinder you will also need to modify the path settings for CKFinder)

b) Add call to CKFinder scripts

First up we need the Perch admin pages to load the CKFinder scripts. There is probably a better way of doing this, but for speed, I decided to just add the call to the template file.

In perch/inc/top.php add the following after line 59 (it seemed to make sense to only load the scripts when a user is logged in):

echo '<script src="/ckfinder/ckfinder.js" type="text/javascript"></script>';

c) Add CKFinder to all CKEditor instances

We now need to tell each CKFinder to add itself to every CKEditor instance.

The CKFinder documentation has a single line which does this:

CKFinder.setupCKEditor( null, '/ckfinder/' );

Add this line at the bottom of the CKEditor config file perch/plugins/editors/ckeditor/config.js (this makes sense as we know this file is definitely called when CKEditor is in use)

d) Sort out permissions

You should now see that CKFinder appears in each CKEditor instance – although it will generate a security error.

To fix this, we need to tell CKFinder to check whether a Perch user is logged in.

In /ckfinder/config.php replace the function CheckAuthentication() with the code in the file below (for some reason WordPress crashes if I try and put the code inline!)

Replacement CheckAuthenticaton() function

e) Link the ckFinder and Perch upload directory

Whilst we are editing /ckfinder/config.php we may as well change the settings to use the Perch upload directory (which you have probably already set as write-able).

Change the $baseUrl variable to '/perch/resources/' (line 54) – it might also be worth defining $baseDir on line 73, as this can apparently cause problems too.

You should now have CKFinder working nicely with CKEditor in Perch!

14 Replies to “Integrating CKEditor and CKFinder with Perch”

  1. i cannot find: Add this line at the bottom of the CKEditor config file perch/plugins/editors/ckeditor/config.sys? I have checked the Perch CK editor download three times and no such file exists – can you help pls


    1. Hi Graeme – sorry must have been losing the plot when I wrote this! I meant the config.js file! (post updated!)

      Thanks for spotting it!


  2. thanks for the update – nearly there but getting

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

    The file ckfinder.html is there, but something is not pointing correctly

    Any suggestions as to why?

  3. Hi,
    nice clear post, apart from where we are meant to stick the ckfinder directory!

    does it go in perch/ckfinder? perch/plugins/editors/ckeditor/ckfinder?

    could you clarify this please dude?


    1. Hi Will – thanks for the feedback. I have tried to make it clearer which directory to install CKFinder in the post – it needs to go in it’s own directory /ckfinder (not under /perch), otherwise you also need to update the path settings.

    1. Hi Matthew,

      I have sometimes seen a problem with absolute urls in the CKEditor content – for example, which for some reason causes CKEditor to not save a page (I have no idea why!)

      Also worth checking you have the latest version of CKEditor just in case it is a specific browser problem. Happy to take a peek if it is something you can share access to (send me the details in the form below).


  4. So glad I found this post ! Got it working, thanks.

    But when I tried to download the Replacement CheckAuthenticaton() function – the file cannot be found – do you still have it?


    1. Hi Juan – no longer have the file but will attempt to paste the code below!

      function CheckAuthentication()
      if(isset($_SESSION[‘userID’])&&is_numeric($_SESSION[‘userID’])) return TRUE; else return FALSE;

  5. Hi Phil

    Did you (or anyone else) ever get CKfinder to work with the blog app?

    Its working fine for me with the rest of the cms, but it wont work in the blog – the Browse Server button does not show and I have the following error in console:

    Uncaught ReferenceError: CKFinder is not defined



    1. Hi Juan – thanks for the comment. Not tried it with the blog app, but it sounds like the page does not have the script include ( in my example above) – possibly because the template file is not used by extensions? There might be a better file in the extension directory.

      1. Hi Phil

        Thank you once again for getting back to me with an answer that lead me to a fix.

        I’m using Perch 2.3.4 and the top.php is in a different location to where it used to be when you wrote this, also, it turns out that the Perch team won’t offer support if you change core files – they sent me to this link – .

        So I removed the JS call for ckfinder.js from top,php and placed in the file – now CKfinder works with all apps in Perch.

        Thanks again.

Leave a Reply

Your email address will not be published. Required fields are marked *