ckeditor upload image button

Question

I'm using CKEDITOR and would like to be able to allow users to upload and embed images in the Text Editor. but the default can't. how to make it can upload image form the local environment.

Answer 1

You need to enable a "file browser"

1. CKEditor documentation
2. CKEditor documentation - Custom Browser
3. Existing StackOverflow Question

Answer 2

Add the following lines to ckeditor config.js file:

CKEDITOR.editorConfig = function( config ) {
     config.filebrowserUploadUrl = 'url_to_file/upload.php';
     config.filebrowserImageUploadUrl =  'url_to_file/upload.php';   
};

Create a upload.php file and a images folder inside ckeditor folder

Put this code in upload.php

   <?php
        if(isset($_FILES["upload"]["name"])){
            
            $server_link = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://".$_SERVER['HTTP_HOST'];
            $name_array =explode(".",  $_FILES["upload"]["name"]);
            $ext=end($name_array);
            $name=$name_array[0];
                 
            $new_name=substr($name,0,10).'_'.rand(1,20000).'.'.$ext;
            move_uploaded_file($_FILES["upload"]["tmp_name"],"images/" . $new_name );
             
             echo json_encode([ 'fileName' => $new_name,            'uploaded' => true,             'url' => $server_link.'/path_to_folder/ckeditor/images/'.$new_name      ]);
            
}
else{

        $error = 'There was an error uploading the file';
        echo json_encode(['uploaded' => false, 'error' => array('message' => $error)]);
    }
?>