Enable image upload option in CKEditor using PHP


In this tutorial I will explain how to enable image upload option in CKEditor using PHP. To enable image upload option in CKEditor, follow steps as explained below.

Integrate CKEditor

Include following line in your view where you want to use ckeditor and place your ckeditor folder in root folder.

<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>

Now add class ‘ckeditor’ to the textarea like below:

<textarea class="ckeditor" rows="10" name="Description" id="description"></textarea>

Enable image upload option in ckeditor

In ckeditor > config.js file add following line:

CKEDITOR.editorConfig = function( config )
{
   config.filebrowserUploadUrl = 'js/ckeditor/ckupload.php';
}

Now upload ckupload.php into ckeditor folder and create uploads folder in ckeditor folder.

Create ckupload.php with the below code :

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

$furl = 'http'.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$fdata = explode('ckeditor/ckupload.php',$furl);

 //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/jpeg") 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.";
      }
      $url = $fdata[0]."ckeditor/uploads/" . $time."_".$_FILES['upload']['name'];
    }
 
$CKEditorFuncNum = $_GET['CKEditorFuncNum'] ;
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$message');</script>";
?>

Now you will see Upload option in ckeditor image section.

Enable image upload option in CKEditor using PHP
Enable image upload option in CKEditor using PHP

Hope this tutorial will help you to enable image upload option in CKEditor using PHP.