CKEditor is an awesome piece of software, it’s essential for good CMS-es that require WYSIWYG editing, the problem however that it doesn’t have an image uploader by default and it’s not a trivial task to write one because it’s documentation is not very good at this part. I spent a lot of time googling for hints on how can I write a PHP backend for image uploads, luckily after some hard work I managed to gather enough info to create a working image upload backend.

1. I have an ajax directory relative to the sites root, I will create an upload.php in this folder.

2. I edit the config.js (inside CKEditor’s directory) and append the following line:

//this needs to be inside: CKEDITOR.editorConfig = function( config )
config.filebrowserImageUploadUrl = 'ajax/upload.php?type=Images';

3. This upload.php will have to deal with a HTTP Post Request of course and the file will be sent from an input named “upload”, in PHP this means that we have to deal with $_FILES['upload']. Also we need to respond to CKEditor which is a little tricky, it involves ad-hoc JavaScripting(which was badly documented when I did this the first time). The following template solves the CKEditor specific issues:

<?php
//process $_FILES['upload']
//store uploaded images URL in $uploadedImageURL
?>
<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction( <?php echo $_GET['CKEditorFuncNum']?>, '<?php echo "$uploadedImageURL"?>' );
</script>

We normally want to resize the image at this point and tell CKEditor the URL of our resized image. This ad-hoc method is mainly for security.

There is also the option for using CKFinder for file uploads, but I prefer doing custom solutions so that I can have maximum control over my file uploads.