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?

回答1:

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!!!

来源：https://stackoverflow.com/questions/62484365/how-to-fix-ckeditor-not-having-upload-image-feature-in-laravel-project

标签

laravel

ckeditor