Custom file upload in CKEditor with PHP

In CKEditor by default file browser option is not enabled.

You can only add a file to an editor with URL.

To add file browser option require to update CKEditor configuration and use options while initialization.

In this tutorial, I show how you can add file browser option in CKEditor and upload it with PHP.

Download & Include
Edit config.js
HTML & JavaScript
PHP
Output
Conclusion

1. Download & Include

Download CKEditor from here.
Extract the downloaded zip file in your project directory.
Include ckeditor.js library either in <head> or end of <body> section.

<script src="ckeditor/ckeditor.js" ></script>

You can also use CDN.

<script src="//cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>

2. Edit config.js

Open ckeditor/config.js file and add the following code after config.removeDialogTabs.

config.filebrowserUploadMethod = 'form'; // Added for file browser

3. HTML & JavaScript

HTML

Create a <textarea>.

JavaScript

Initialize CKEditor on the <textarea> element and define filebrowserUploadUrl, and filebrowserImageUploadUrl options. Pass the file path from where handle file upload.

The path on both options are the same but to detect is image or file is upload added ?type= with the URL.

Completed Code

<!DOCTYPE html>
<html>
   <head>
     <title>Custom file upload in CKEditor with PHP</title>
     <!-- CKEditor JS -->
     <script src="ckeditor/ckeditor.js" type="text/javascript" ></script>
   </head>
   <body>

     <!-- Editor -->
     <textarea id='editor'></textarea>

     <!-- Script -->
     <script type="text/javascript">
     CKEDITOR.replace( 'editor', {
        height: 300,
        filebrowserUploadUrl: "/ckeditor_fileupload/ajaxfile.php?type=file",
        filebrowserImageUploadUrl: "/ckeditor_fileupload/ajaxfile.php?type=image",

     } );
     </script>
   </body>
</html>

4. PHP

Create a new uploads directory and ajaxfile.php file.

Read parameters.

If $type == ‘image’ then check its extension is valid or not. If valid then upload the file to uploads directory and return the –

<script>window.parent.CKEDITOR.tools.callFunction('.$funcNum.', "'.$url.'", "'.$message.'")</script>

Which contains the $_GET['CKEditorFuncNum’], $_GET[‘CKEditor’], and file URL.

Similarly, if $type == ‘file’ then check the extension. If valid then upload the file to uploads directory and return the –

<script>window.parent.CKEDITOR.tools.callFunction('.$funcNum.', "'.$url.'", "'.$message.'")</script>

Completed Code

<?php

// Parameters
$type = $_GET['type'];
$CKEditor = $_GET['CKEditor'];
$funcNum = $_GET['CKEditorFuncNum'];

// Image upload
if($type == 'image'){

    $allowed_extension = array(
      "png","jpg","jpeg"
    );

    // Get image file extension
    $file_extension = pathinfo($_FILES["upload"]["name"], PATHINFO_EXTENSION);

    if(in_array(strtolower($file_extension),$allowed_extension)){
       
       if(move_uploaded_file($_FILES['upload']['tmp_name'], "uploads/".$_FILES['upload']['name'])){
          // File path
          if(isset($_SERVER['HTTPS'])){
             $protocol = ($_SERVER['HTTPS'] && $_SERVER['HTTPS'] != "off") ? "https" : "http";
          }
          else{
             $protocol = 'http';
          }
          $url = $protocol."://".$_SERVER['SERVER_NAME'] ."/ckeditor_fileupload/uploads/".$_FILES['upload']['name'];
       
          echo '<script>window.parent.CKEDITOR.tools.callFunction('.$funcNum.', "'.$url.'", "'.$message.'")</script>';
       }

    }

    exit;
}

// File upload
if($type == 'file'){

    $allowed_extension = array(
       "doc","pdf","docx"
    );

    // Get image file extension
    $file_extension = pathinfo($_FILES["upload"]["name"], PATHINFO_EXTENSION);

    if(in_array(strtolower($file_extension),$allowed_extension)){

       if(move_uploaded_file($_FILES['upload']['tmp_name'], "uploads/".$_FILES['upload']['name'])){
          // File path
          if(isset($_SERVER['HTTPS'])){
              $protocol = ($_SERVER['HTTPS'] && $_SERVER['HTTPS'] != "off") ? "https" : "http";
          }
          else{
              $protocol = 'http';
          }

          $url = $protocol."://".$_SERVER['SERVER_NAME'] ."/ckeditor_fileupload/uploads/".$_FILES['upload']['name'];
         
          echo '<script>window.parent.CKEDITOR.tools.callFunction('.$funcNum.', "'.$url.'", "'.$message.'")</script>';
       }

    }

    exit;
}

5. Output

6. Conclusion

Update file upload restrictions and file return path in the AJAX file. And make sure to add config.filebrowserUploadMethod = 'form'; in config.js file otherwise file path doesn’t return after upload.

If you found this tutorial helpful then don't forget to share.

Contents