Your browser (Internet Explorer 7 or lower) is out of date. It has known security flaws and may not display all features of this and other websites. Learn how to update your browser.

X

Navigate / search

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 – http://grabaperch.com/add-ons/plug-ins/ckeditor

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 =
     [
        ['Source','-'],
        ['Cut','Copy','Paste','SpellChecker'],
        ['Undo','Redo','-','RemoveFormat'],
        ['Bold','Italic','Strike'],
        ['NumberedList','BulletedList'],
        ['Outdent','Indent','Blockquote','SpecialChar'],
        ['Link','Unlink'],
        ['Styles'],
        ['Maximize']
     ];
};

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 http://ckfinder.com/download 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!

Comments

graeme mackay
Reply

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

Graeme

daylightgambler
Reply

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!

Phil

graeme mackay
Reply

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?

daylightgambler
Reply

Whereabouts have you installed the ckfinder directory?

will
Reply

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?

cheers

daylightgambler
Reply

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.

Matthew
Reply

Hi, have you ever had the problem of CKEditor not saving and therefore Perch not displaying posts written through CKEditor?

daylightgambler
Reply

Hi Matthew,

I have sometimes seen a problem with absolute urls in the CKEditor content – for example http://www.yoursite.com/mypage.php, 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).

Phil

Juan
Reply

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?

Thanks
Juan

daylightgambler
Reply

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

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

Juan
Reply

@daylightgambler Thank you very much.

Juan
Reply

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

Help!

Thanks

daylightgambler
Reply

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.

Juan
Reply

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 – http://docs.grabaperch.com/docs/customizing-perch/ui-customizations/ .

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

Thanks again.

Leave a comment

name

email (not published)

website

CommentLuv badge