I use the CKEditor plugin for WordPress on a number of websites that I run. Whilst CKEditor provides a much richer editor it does lack a good file browser for uploading files and managing them.
When using WordPress to power a website I need to be able to upload files (such as images) to specific locations and reference them easily in my page or post. As WordPress was originally designed as a Blogging package it uploads images to folders based on date such as /upload/2012/01. This is not ideal for a general website.
Whilst you can purchase CKFinder for CKEditor, I think it is rather expensive for what you get, especially if you run multiple websites.
I have researched various options on the Internet and so far the best option I have come across is to integrate a package called PDW File Browser into the CKEditor Plugin for WordPress. It does involve a bit of code tweaking but it is fairly straight forward, just follow the instructions below:
These instructions have been tested with:
- WordPress 3.3.1
- CKEditor for WordPress 3.6.2.5
- PDW File Browser 1.3 (Beta)
1. Ensure that WordPress and all plugins are up to date.
2. Install the CKEditor for WordPress plugin.
3. Download the PDW File browser from:
http://sourceforge.net/projects/pdwfilebrowser/files/V1.3/
4. Locate your WordPress plugins directory (on your webserver) and under the ckeditor-for-wordpress folder you should unpack the PDW File Browser.
So you such have something like:
/var/www/wordpress/wp-content/plugins/ckeditor-for-wordpress/pdw_file_browser
Make sure all the files you unpacked have the same ownership as existing WordPress files.
5. Go to your ckeditor-for-wordpress directory and edit the following files:
includes/upload.php – Insert the following after line 15:
<option value="pdw"<?php echo ($this->options['upload']['browser'] == 'pdw'?' selected="selected"':'') ?>><?php _e('PDW File Browser', 'ckeditor_wordpress'); ?></option>
ckeditor_class.php – Locate the method generate_js_options (line 590) and insert the following from the end of line 611:
else if ($options['upload']['browser'] == 'pdw') {
$ck_browser_url = $this->plugin_path . 'pdw_file_browser/index.php?editor=ckeditor';
$ck_upload_url = $this->plugin_path . 'pdw_file_browser/upload.php';
$settings['filebrowserBrowseUrl'] = $ck_browser_url;
$settings['filebrowserImageBrowseUrl'] = $ck_browser_url . '&type=Images';
$settings['filebrowserFlashBrowseUrl'] = $ck_browser_url . '&type;=flash';
$settings['filebrowserUploadUrl'] = $ck_upload_url;
$settings['filebrowserImageUploadUrl'] = $ck_upload_url . '?type=Images';
$settings['filebrowserFlashUploadUrl'] = $ck_upload_url . '?type=Flash';
}
6. Edit pdw_file_browser/config.php and set $uploadpath to point to the top directory that you want to upload files to (from the context of the webserver).
So if you want to be able to upload files to http://mywebserver/media/ then the config file should read:
$uploadpath = "/media/"; // absolute path from root to upload folder (DON'T FORGET SLASHES)
7. Finally got to you WordPress Admin console and under the CKEditor group select “Upload options”. Then in the File Browser drop down box select “PDW File Browser”. At the bottom of the page click “Update Options”.
Finally, to test everything:
Create a test Post/Page. Click the Image icon in the CKEditor toolbar and then click “Browse Server” in the dialog box. If everything is working you should see a PDW File Browser window.
If you find this useful then drop me an email to let me know.