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.


October 24, 2016

BEGIN BACKSTORY

Scroll down to END BACKSTORY is you want to skip this partYou 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!

 

Need a hand? Looking for something you didn't see?

Give a rundown of what kind of trouble you're having, and we'll see if we can help.

7 responses to “Integrate KCFinder with CKEditor in WordPress”

  1. Florian says:

    Hi,

    thank you very much for these helpful instructions.

    Just an addition: In the WordPress CKEditor Upload Settings panel at “File browser” the option “Disabled” has to be selected, otherwise one doesn’t get rid of the old built-in file manager.

  2. Omar says:

    Are you still using the kcfinder/ckeditor combination? I am currently using WP4.1. I noticed that ckeditor is no longer being maintained. And I am a bit worried about using it if it is going to be quickly outdated and vulnerable.

    • craig says:

      I actually switched to Foliopress a couple of months ago. The image uploading isn’t as smooth as with the KCFinder/CKeditor scenario, but it installs without having to jump through hoops. I also haven’t been blogging much since last May (2014 — it’s now February 2015), so it’s probably time to get going again and using Foliopress might be a good post to write. I’ll keep you updated.

  3. Omar says:

    I look forward to seeing your write up. Thanks for the reply.

  4. Craig says:

    Dude, I gave up.  I'm back to KCFinder…  Couldn't get Foliopress to interact with post excerpts, among some other snafoos, and so I just came back.  I will have to update this walkthrough, as something changed with the latest KCFinder versions.

  5. Philippe Caron says:

    Thank you for this very useful info.

    You mention : 
    I also changed two lines that went:
    'rename' => true
    in both the files and dirs array.

    But changing into what ? false ?

    Regards.
     

    • Craig says:

      It’s been a while; I believe they were false to begin with.  I currently do not have a working kcfinder.  Something has changed and I’ve got to go back through and figure out what broke.

Leave a Reply

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

 

 

 

CLOSE
CLOSE