CODEWITHSUNDEEP
phpckeditorckeditor5laravel-8
Ngirimana Safari Schadrack
Ngirimana Safari Schadrack

Reputation: 95

image are not being displayed in ckeditor

I'm implementing image upload using CKEditor in laravel but images are uploaded but they're not displayed. I need help, please.

these are my code

 public function upload(Request $request){
      
        if($request->hasFile('upload')){
            $originalName=$request->file('upload')->getClientOriginalName();
            $fileName=pathinfo($originalName,PATHINFO_FILENAME);
            $extension=$request->file('upload')->getClientOriginalExtension();
            $fileName=$fileName.'_'.time().'.'.$extension;

            $request->file('upload')->move(public_path('images'),$fileName);

            $CKEditorFuncNum=$request->input('CKEditorFuncNum');
            $url=asset('public/images/'.$fileName);
            $msg='Image uploaded successfully';
            $response="<script >window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum,'$url','$msg')</script>";
            @header('content-type:text/html','charset-utf-8');
            echo $response;
        }
    }

and output is this

enter image description here

Upvotes: 1

Views: 239

Answers (1)

Ngirimana Safari Schadrack
Ngirimana Safari Schadrack

Reputation: 95

put these script to your html file

<script src="https://cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
<script>
   CKEDITOR.replace( 'summary-ckeditor', {
filebrowserUploadUrl: "{{route('ckeditor.upload', ['_token' => csrf_token() ])}}",
filebrowserUploadMethod: 'form'

});

and put these code in your image controller

     if($request->hasFile('upload')) {
     $originName = $request->file('upload')->getClientOriginalName();
     $fileName = pathinfo($originName, PATHINFO_FILENAME);
     $extension = $request->file('upload')->getClientOriginalExtension();
     $fileName = $fileName.'_'.time().'.'.$extension;
    
     $request->file('upload')->move(public_path('images'), $fileName);

     $CKEditorFuncNum = $request->input('CKEditorFuncNum');
     $url = asset('images/'.$fileName); 
     $msg = 'Image uploaded successfully'; 
     $response = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
           
     @header('Content-type: text/html; charset=utf-8'); 
     echo $response;
 }

Upvotes: 1

Related Questions