{"id":266,"date":"2012-03-22T16:30:26","date_gmt":"2012-03-22T16:30:26","guid":{"rendered":"http:\/\/www.cotsweb.com\/blog\/?p=266"},"modified":"2013-05-17T08:43:13","modified_gmt":"2013-05-17T07:43:13","slug":"integrating-class-upload-php-into-ckeditor","status":"publish","type":"post","link":"https:\/\/www.cotsweb.com\/blog\/integrating-class-upload-php-into-ckeditor-266.html","title":{"rendered":"Integrating class.upload.php into CKeditor"},"content":{"rendered":"

I have been working on a Content Management System for Kate’s Home Nursing<\/a>, a Stow based charity who provide top quality palliative care around the North Cotswolds.\u00a0 As part of the CMS I am using CKeditor<\/a>, which is a very good WYSIWYG editor, allowing the users to create their own content in something like a word processing environment.<\/p>\n

But I need the facility to upload images to be integrated into the page being edited, CKfinder<\/a> is a possibility, it integrates well with CKeditor, but it isn’t Open Source.\u00a0 KCfinder<\/a> is another possibility;\u00a0 it\u00a0 is Open Source but I found it difficult to do exactly what I wanted with it.\u00a0 What I really wanted was to use class.upload.php<\/a> which is Open Source and I know from experience does exactly what I want it to do.<\/p>\n

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.\u00a0 So after some trial and error here is my solution. <\/p>\n

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.<\/p>\n

Getting CKeditor to call your custom upload script<\/h2>\n

I am calling CKeditor with javaScript from within a webpage so my calling code looks like this;
\n

<!-- Set up CKeditor -->\n<script src="ckeditor.js" type="text\/javascript"><\/script>\n\n<script type="text\/javascript">\n    function displayCkeditor(id)\n    {\n        if(CKEDITOR.instances[id])\n        {\n            CKEDITOR.remove(CKEDITOR.instances[id]);\n        }\n\n        CKEDITOR.replace(id,  {\n            filebrowserUploadUrl :      "uploader.php?type=files,\n            filebrowserImageUploadUrl : "uploader.php?type=images",\n            filebrowserFlashUploadUrl : "uploader.php?type=flash"\n        });\n\n    }\n\n<\/script>\n<!-- CKeditor end -->\n<\/code><\/pre>
\nThis 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).<\/p>\n
Creating the Custom Upload Script<\/h2>\n
And this is the script called by Ckeditor;
\n
\n<?php\n\/**\n * uploader.php\n * Use class.upload.php to upload images etc.\n *\/\ninclude('\/includes\/class.upload.php');          \/\/ where you have put class.upload.php\n\n$msg = '';                                     \/\/ Will be returned empty if no problems\n$callback = ($_GET['CKEditorFuncNum']);        \/\/ Tells CKeditor which function you are executing\n\n$handle = new upload($_FILES['upload']);       \/\/ Create a new upload object \nif ($handle->uploaded) {\n    $handle->image_resize         = true;\n    \/\/\n    \/\/ Create a small image (thumbnail)\n    \/\/\n    $handle->image_x              = 150;\n    $handle->image_ratio_y        = true;\n\n    $handle->process($_SERVER['DOCUMENT_ROOT'] . '\/userfiles\/');  \/\/ directory for the uploaded image\n    $image_url = '\/userfiles\/' . $handle->file_dst_name;          \/\/ URL for the uploaded image\n \n    if ($handle->processed) {\n         $handle->clean();\n    } else {\n        $msg =  'error : ' . $handle->error;\n    }\n}\n\n$output = '<script type="text\/javascript">window.parent.CKEDITOR.tools.callFunction('.$callback.', "'.$image_url .'","'.$msg.'");<\/script>';\necho $output;\n?>\n<\/code><\/pre>
\nIn this simple example I just upload an image and resize it to a 150px wide thumbnail for inclusion in the edited text.<\/p>\n
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.<\/p>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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.\u00a0 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[20,19,18],"tags":[102,46,145,144],"_links":{"self":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts\/266"}],"collection":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/comments?post=266"}],"version-history":[{"count":9,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts\/266\/revisions"}],"predecessor-version":[{"id":274,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts\/266\/revisions\/274"}],"wp:attachment":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/media?parent=266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/categories?post=266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/tags?post=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}