Monday 28 January 2019

Uploading Image in CKEDITOR with PHP



If you have build any content management system or any other system in which you have use CKEDITOR HTML editor. So, Now you want to upload Image from CKEDITOR using PHP script. For this here we have make this post, in which we have step by step describe how to make custom image upload in CKEDITOR from your PHP application. We all know CKEDITOR is a widely used HTML editor in any web based application, and it is very easy to use, and it is very easy to integrate in our application.

Suppose you have used CKEDITOR in your web application, then by default for add image into your content, you have to just add upload image path into image dialog box and you can adjust property of image. But you cannot direct upload image from your local computer into text editor. For upload image or file in CKEDITOR, there are two way you can upload image in CKEDITOR, first you have to use any plugin for upload image in CKEDITOR or you have to make custom image upload in CKEDITOR.

Here we have discuss, how to make custom image upload in CKEDITOR using PHP script. For make custom image upload in CKEDITOR, you have to follow following steps.

1 - Integrate CKEDITOR
2 - Create HTML code file for integrate CKEDITOR
3 - Make PHP script for upload Image






1 - Integrate CKEDITOR


If you want to use CKEDITOR into your PHP web application, then first you have to download CKEDITOR from it's official site or even you can directly use cdn for CKEDITOR for it's official site also.

Create HTML code file for integrate CKEDITOR


Suppose you have done download CKEDITOR or use cdn of CKEDITOR in your application, For this here we have make index.php file. In this file we have make simple html code of textarea field. Below you can check how to integrate CKEDITOR in textarea html field and after integrate CKEDITOR it will convert into textarea field. In this HTML code we have use cdn of CKEDITOR for integrate into our application.

In this code textarea field class=ckeditor is used as selector for integrate CKEDITOR on this textarea field. For enable upload tab, you can see in javascript code, in which we have use filebrowserUploadUrl option. This option will enable upload tab in CKEDITOR image dialog box. In this option we can define PHP script file name, this PHP script will upload selected image into folder. That means this option will send request this file for upload image. This complete source code you can find below.


<!DOCTYPE html>
<html>
 <head>
  <title>How to Upload Image using ckeditor in PHP</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="http://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>
 </head>
 <body>
  <div class="container">
   <br />
   <h3 align="center">How to Upload Image using ckeditor in PHP</h3>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">How to Upload Image using ckeditor in PHP</h3>
    </div>
    <div class="panel-body">
     <textarea name="content" id="content" class="form-control ckeditor"></textarea>
    </div>
   </div>
  </div>
 </body>
</html>

<script>
 CKEDITOR.replace( 'content', {
  height: 300,
  filebrowserUploadUrl: "upload.php"
 });
</script>


3 - Make PHP script for upload Image


Once you have done integrate CKEDITOR into HTML code, and enable upload tab in image dialog box. Now you have to make PHP script for upload selected image from local computer to upload folder and send uploaded image request back to CKEDITOR image dialog box. For this source code you can find below.






upload.php

<?php

//upload.php

if(isset($_FILES['upload']['name']))
{
 $file = $_FILES['upload']['tmp_name'];
 $file_name = $_FILES['upload']['name'];
 $file_name_array = explode(".", $file_name);
 $extension = end($file_name_array);
 $new_image_name = rand() . '.' . $extension;
 chmod('upload', 0777);
 $allowed_extension = array("jpg", "gif", "png");
 if(in_array($extension, $allowed_extension))
 {
  move_uploaded_file($file, 'upload/' . $new_image_name);
  $function_number = $_GET['CKEditorFuncNum'];
  $url = 'upload/' . $new_image_name;
  $message = '';
  echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($function_number, '$url', '$message');</script>";
 }
}

?>


This is complete step by step process for how to integrate CKEDITOR in PHP application, how to enable upload tab in CKEDITOR image dialog box and how to upload image in CKEDITOR using PHP script.

17 comments:

  1. Awesome tutorial sir. Please make a video on how to create product variations with different prices and quantities for the same product in PHP or Codeigniter. Exactly like Wordpress woo-commerce product variations.

    ReplyDelete
  2. sir i wanr to know that can i use this upload feature to free downloaded ckeditor version, can i get full code that you use in demo (not script src in url but in local)
    waiting for you reply
    if you want to send zip file in

    ReplyDelete
  3. please make a video on codeigniter

    ReplyDelete
  4. my upload script isn't passing the URL to CKEditor

    ReplyDelete
  5. I have a problem. Localhost says 'incorrect server response'. please help

    ReplyDelete
  6. Hi. How do I upload the text content to MySql database? Will link to the image in upload folder automatically included in database or what kind of configuration should i do? Thank you in advance. Your post is helping me much.

    ReplyDelete
  7. thanku for code ... but your code is not working...

    ReplyDelete
  8. I get this error:
    HTTP fout tijdens uploaden van bestand (404: Bestand niet gevonden).
    What do I wrong

    ReplyDelete
  9. Awesome tutorial, Thank you.

    ReplyDelete
  10. Hello,

    I'm working localhost. Upload the picture is okay, but I can't redirect it. I received the wrong server response. Why did I get such a mistake. Do you have an idea?

    Thanks

    ReplyDelete
  11. your code is not working properly

    ReplyDelete
  12. thank you very much localhost not working worked on the server

    ReplyDelete
  13. Thank you so much brother you saved me lot

    ReplyDelete