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!