CKEditor – Custom upload dialog

The great WYSIWYG editor called CKEditor allows you to do a custom file upload, so that you can handle where the file is stored and also you can do your database extra inserts for example.

To start with you have to tell the CKEditor where to post the file uploaded to custom built page

var editor = CKEDITOR.replace( 'Content',{ filebrowserUploadUrl :'/custom.imageuploader.php'});

Where the custom.imageuploader.php is the actual php page that will deal with the custom page, can be done in any other language if required. In the above code, the ‘Content’ is the textarea to change to a CKEditor WYSIWYG.

Here is a basic php page that you will need to alter to store the $_FILES[“upload”] into the place where you want to store and do any database code to link to the resource that you are uploading, but the bit underneath that you need to have, this will tell the CKEditor what to do after your PHP code has stored the file, the CKEditoFuncName, is required (but passed in) to tell the CKEditor what function to call after the upload has happened, the $wherestorage, is where the actual file is so that the WYSIWYG can show the image and any $message that may help the CKEditor user for any error reports.

<?php
// the files are stored within the upload part of the $_FILES 
$_FILES["upload"];
?>
<html>
<body>
<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction(
   <?php echo $_REQUEST["CKEditorFuncNum"].",\"".$wherestorage."\",\"".$message."\"";?>
);
</script>
</body>
</html>
?>