CODEWITHSUNDEEP
laravelckeditor
Alphy Gacheru
Alphy Gacheru

Reputation: 657

How to fix CKeditor not having upload image feature in laravel project

My ckeditor does not have an upload image feature. I'd like the feature to be available. How does one work around that in laravel?

Upvotes: 0

Views: 3384

Answers (1)

STA
STA

Reputation: 34668

You can use CKFinder that enables uploading and managing multiple files easily. With the built-in image editor cropping, resizing, rotating, adjusting brightness, contrast, saturation, exposure, and sharpness plus some pre-defined filter presets are available.

<script>
    CKEDITOR.replace( 'editor1', {
        filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
        filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'
    } );

    $('.textarea').wysihtml5();

</script>

Documentation Here

For laravel :

CKEDITOR.replace('editor1', {
    filebrowserUploadUrl: "{{ route('ckeditor.upload', ['_token' => csrf_token() ])}}",
    filebrowserUploadMethod: 'form'
});

In your route :

Route::post('images/upload', 'ImageController@upload')->name('ckeditor.upload');

And your ImageController :

public function upload(Request $request)
 {
     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;
     }
}

Cheers!!!

Upvotes: 4

Related Questions