Upload file from ckeditor in cakephp

To upload file from ckeditor you just have to use following four step and that's done.

Include Ckeditor library file
<?php echo $this->Html->script('/js/ckeditor/ckeditor');?>

Textarea with class ckeditor
<?php echo $this->Form->textarea('StaticPage.page_content',array('class'=>'ckeditor'));?>


<script type="text/javascript">
    CKEDITOR.replace( 'data[StaticPage][page_content]',
    {
        //filebrowserBrowseUrl :'/js/ckeditor/filemanager/browser/default/browser.html?Connector=/js/ckeditor/filemanager/connectors/php/connector.php',
        filebrowserImageBrowseUrl : '/js/ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=/js/ckeditor/filemanager/connectors/php/connector.php',
        //filebrowserFlashBrowseUrl :'/js/ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=/js/ckeditor/filemanager/connectors/php/connector.php',
        //filebrowserUploadUrl  :'/js/ckeditor/filemanager/connectors/php/upload.php?Type=File',
        //filebrowserImageUploadUrl : '/js/ckeditor/filemanager/connectors/php/upload.php?Type=Image',
        //filebrowserFlashUploadUrl : '/js/ckeditor/filemanager/connectors/php/upload.php?Type=Flash'
    });
</script>


Keep following php file in app/webroot

<?php
$url = 'img/uploads/'.time()."_".$_FILES['upload']['name'];

 //extensive suitability check before doing anything with the file…
    if (($_FILES['upload'] == "none") OR (empty($_FILES['upload']['name'])) )
    {
       $message = "No file uploaded.";
    }
    else if ($_FILES['upload']["size"] == 0)
    {
       $message = "The file is of zero length.";
    }
    else if (($_FILES['upload']["type"] != "image/pjpeg") AND ($_FILES['upload']["type"] != "image/jpeg") AND ($_FILES['upload']["type"] != "image/png"))
    {
       $message = "The image must be in either JPG or PNG format. Please upload a JPG or PNG instead.";
    }
    else if (!is_uploaded_file($_FILES['upload']["tmp_name"]))
    {
       $message = "You may be attempting to hack our server. We're on to you; expect a knock on the door sometime soon.";
    }
    else {
      $message = "";
      $move = @ move_uploaded_file($_FILES['upload']['tmp_name'], $url);
      if(!$move)
      {
         $message = "Error moving uploaded file. Check the script is granted Read/Write/Modify permissions.";
      }
        if ($_SERVER['SERVER_ADDR'] == "172.10.1.7" || $_SERVER['SERVER_ADDR'] == "192.155.246.146")
            $url = "http://".$_SERVER['SERVER_ADDR'].":".$_SERVER['SERVER_PORT']."/" . $url;
        else
            $url = "http://".$_SERVER['SERVER_ADDR']."/" . $url;
     
    }
$funcNum = $_GET['CKEditorFuncNum'] ;
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
?>


Do setting of php file in ckeditor config it will be in app/webroot/js/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';
};

Read More »

How do you set and get ckeditor value by javascript

How do you get data from ckeditor ?
use below code to get data from ckeditor , assume your editor name is 'description'

alert(CKEDITOR.instances.description.getData());

How do you set data in ckeditor ?
use below code to set data in ckeditor , assume your editor name is 'description'

CKEDITOR.instances.description.setData( '<h1>Hello Ubed Khan PHP programmer</h1>' );

Read More »