Monday, 28 January 2019

Uploading Image in CKEDITOR with PHP

           , , , , , , , ,      17 comments   


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

See Also





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. Unknown29 January 2019 at 18:56

    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. moviemasti19 February 2019 at 22:51

    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. Anonymous2 March 2019 at 02:19

    please make a video on codeigniter

    ReplyDelete
  4. Unknown4 March 2019 at 19:18

    my upload script isn't passing the URL to CKEditor

    ReplyDelete
  5. abhimanuk9 April 2019 at 08:19

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

    ReplyDelete
  6. Т.Ариунсанаа25 July 2019 at 01:59

    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. Unknown4 November 2019 at 01:50

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

    ReplyDelete
  8. Unknown13 November 2019 at 05:36

    thanks a lot for this video.

    ReplyDelete
  9. Unknown18 January 2020 at 01:00

    Awesome tutorial sir.


    Thanks

    ReplyDelete
  10. Peter20 March 2020 at 01:56

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

    ReplyDelete
  11. chandan chaurasia29 June 2020 at 02:38

    thanks this code is working

    ReplyDelete
  12. Unknown6 July 2020 at 05:34

    Awesome tutorial, Thank you.

    ReplyDelete
  13. Aykut25 July 2020 at 03:43

    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
  14. Unknown24 December 2020 at 16:57

    Good


    ReplyDelete
  15. olinone.in30 March 2021 at 01:21

    your code is not working properly

    ReplyDelete
  16. Admin11 April 2021 at 08:26

    thank you very much localhost not working worked on the server

    ReplyDelete
  17. suresh15 June 2021 at 08:04

    Thank you so much brother you saved me lot

    ReplyDelete