Integrate KCFinder with CKEditor in WordPress

Inserting images with Wordpress has almost ALWAYS been a pain in my backside.  I finally have a solution, and it's called KCFinder.  I got it working with CKEditor for Wordpress today, and so far it's awesome.  Here's how I did it.

BEGIN BACKSTORY

Scroll down to END BACKSTORY is you want to skip this part.  You can always come back up and read it later.

When I built my own CMS, it worked exactly like I wanted it to.  But the security was probably something akin to a piece of Swiss cheese.  I moved to Textpattern which seems to work very well, but uploading images was a real pain.  Since http://thebestcabinetsite.com is about cabinets and most posts needed at least two or three pictures, this lack of ease was getting to be a burden.

I tested WordPress with Dean’s FCKEditor and the Image Browser Extender plugin.  It was the only combination that made sense to me as far as image management (at least from the edit page) goes.  But Dean’s FCKEditor is old now.  I’ve had all the sites running it get hacked, though I didn’t do any kind of forensic investigating to prove whether it was the editor or something else.  Image Browser Extender wouldn’t work (for me) with any of the other editors available.  I have communicated with the author, Benjamin Sterling, who put out an update, but I still couldn’t make it work.  After my last email from him, I’m wondering now if the handy browsing during image uploads wasn’t Image Browser Extender’s purpose at all, but a weird side effect that just so happened to make life a lot easier.

END BACKSTORY

Looking for an IBE replacement, I ran across CKFinder.  Upon investigating, I found that this plugin did everything I wanted it to do.  But it only did it for one website at $60 a year.  This might be fine for me (I only run two sites of my own) but there are people I’ve helped who are not blogging for profit, or are struggling financially.  I couldn’t justify the money for them,  and kept looking for an answer.

I found KCFinder, a REAL open source app that mimics what CKFinder does.  I tried them demo, and yes, it would do what I wanted.  You can find it on the KCFinder homepage.

To utilize KCFinder and integrate it with CKEditor for WordPress, you’ve got to get rid of any other editors and install CKEditor.  Once that’s done, copy the kcfinder zip up to your wp-content/plugins/ckeditor-for-wordpress/ directory, unzip it, and then either remove the zip file or move it back to your home directory.  It was easier for me to rename the resulting folder to just kcfinder (rather than the kcfinder-2.51 that I ended up with) when I was following along with how other websites said I should be doing this.

Once the kcfinder directory is copied into the ckeditor-for-wordpress directory, edit ckeditor.config.js by going to (from somewhere in the WordPress Admin area) Plugins –> Installed Plugins.  Find CKEditor for WordPress and click on the Edit link just below it.  Make sure you find ckeditor.config.js and not ckeditor/config.js.  It’s a totally different animal and you may end a little balder and a lot madder like me if you try to edit it.  Actually, the editing it isn’t so bad, it’s wondering why the blazes nothing happens, and why Apache’s access or error logs don’t indicate anything wonky, that will drive you crazy.  So, in ckeditor.config.js, make your section looks like this.  All I’ve done is add six lines starting with config.filebrowser after config.resize and before a comment about protecting PHP code tags.

CKEDITOR.editorConfig = function(config) {
// The minimum editor width, in pixels, when resizing it with the resize handle.
config.resize_minWidth = 450;
config.filebrowserBrowseUrl = ‘/wp-content/plugins/ckeditor-for-wordpress/kcfinder/browse.php?type=files’;
config.filebrowserImageBrowseUrl = ‘/wp-content/plugins/ckeditor-for-wordpress/kcfinder/browse.php?type=images’;
config.filebrowserFlashBrowseUrl = ‘/wp-content/plugins/ckeditor-for-wordpress/kcfinder/browse.php?type=flash’;
config.filebrowserUploadUrl = ‘/wp-content/plugins/ckeditor-for-wordpress/kcfinder/upload.php?type=files’;
config.filebrowserImageUploadUrl = ‘/wp-content/plugins/ckeditor-for-wordpress/kcfinder/upload.php?type=images’;
config.filebrowserFlashUploadUrl = ‘/wp-content/plugins/ckeditor-for-wordpress/kcfinder/upload.php?type=flash’;

// Protect PHP code tags (<?…?>) so CKEditor will not break them when

We’re not quite done yet.  There’s a bit of editing left.  From the same editor window, you can get at kcfinder/conf/config.php (that’s config.php in the kcfinder directory you copied in a little while ago)

I changed the following lines:

‘disabled’ => false,

and

‘uploadURL’ => “/wp-content/uploads/”,

I also changed two lines that went:

‘rename’ => true

in both the files and dirs array.  Don’t forget the commas, where applicable.

It took me a bit to find where stuff was going (before I knew exactly what to put in the config file — there was a bit of experimentation with relative and absolute file paths) A directory called images was created in uploads eventually, and I copied all the existing images and related directories I had into this directory.  Then I could see them, delete them, and rename them.  Perhaps moving them is possible, but I don’t see how yet.

I could be numb, but the built in image manager in WordPress makes absolutely no sense to me at all.  I did try initially, just like I did with the Ubuntu Unity interface and GNOME3, but in the end, I gave up.  I use Xfce on my computers, and now I use KCFinder with WordPress.

Now, if you want to know how to USE the KCFinder app, check out my Using KC Finder Once It’s Installed walkthrough and let ‘er rip!