I have been working on a Content Management System for Kate’s Home Nursing, a Stow based charity who provide top quality palliative care around the North Cotswolds. As part of the CMS I am using CKeditor, which is a very good WYSIWYG editor, allowing the users to create their own content in something like a word processing environment.
But I need the facility to upload images to be integrated into the page being edited, CKfinder is a possibility, it integrates well with CKeditor, but it isn’t Open Source. KCfinder is another possibility; it is Open Source but I found it difficult to do exactly what I wanted with it. What I really wanted was to use class.upload.php which is Open Source and I know from experience does exactly what I want it to do.
The problem was that while I found some useful hints I couldn’t find clear instructions on the whole process of how to integrate class.upload.php with ckeditor. So after some trial and error here is my solution.
Please note, class.upload.php is a file uploader, it doesn’t offer the file browser facilties that CKfinder and KCfinder provide. I have concentrated on the integration process rather than on the various parameters, both CKeditor and class.upload.php are quite well documented and once you have the upload process working it is just a matter of fine tuning until you get the result you want.
Getting CKeditor to call your custom upload script
This just tells CKeditor to use my custom “uploader.php” script when the user clicks on the image upload facility in the editor. In this case it is expecting to find uploader.php in the current directory (the Ckeditor directory).
Creating the Custom Upload Script
And this is the script called by Ckeditor;
In this simple example I just upload an image and resize it to a 150px wide thumbnail for inclusion in the edited text.
The important part is the $output echoed back to CKeditor which tells it which function to link up with and the URL of the uploaded file (which will then be inserted into the text being edited). If the upload is successful the $msg field should be empty, otherwise it should contain an error message and the URL should be empty.
The code above is a working outline, obviously a bit more needs to be built in to make it a safe and useful bit of code but I have left it quite simple so that it is clear and useful for others to build on. I hope you find it useful.