воскресенье, 25 сентября 2011 г.

How to make CKEditor upload photos without CKFinder.

CKEditor has built in feature to upload images, but from scratch this feature
unfortunately doesn't work. You can make it work doing the following steps:

1.  After you install CKEditor, go to /ckeditor/plugins/image/dialogs/image.js, find  'id:'Upload',hidden:true' and replace it with  'id:'Upload',hidden:false'.


2. Now  when you click on Image icon in editor, you will see new tab 'Upload' (1) in Image dialog:

3. Now you can go on 'Upload' tab, click 'Choose file' and then 'Send it to server', but you will no have success, and that's right. We will work on it on next step.

4. After you added 'Upload' tab, you must handle file uploading by edding script that will be handle our file upload. I created php file 'ckupload.php' in my web root folder and added the following code in it:
<?php
    $callback = $_GET['CKEditorFuncNum'];
    $file_name = $_FILES['upload']['name'];
    $file_name_tmp = $_FILES['upload']['tmp_name'];
    $file_new_name = '/var/www/ckeditortest/upload/';
    $full_path = $file_new_name.$file_name;
    $http_path = '/upload/'.$file_name;
    $error = '';
    if( move_uploaded_file($file_name_tmp, $full_path) ) {
    } else {
     $error = 'Some error occured please try again later';
     $http_path = '';
    }
    echo "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(".$callback.",  \"".$http_path."\", \"".$error."\" );</script>";
?>  

5. Also you must add this line in your config file:

 In the /ckeditor/config.js:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
   config.filebrowserUploadUrl = '/ckupload.php';
};    


6. Thats it. Hope this help to anybody.
  

2 комментария: