I used ckeditor 5 zip in my laravel project. but it was not working when I add image upload plugin from ckeditor cloudServices. Here is the documentation .html

my html code in blade.

<div class="form-group">
    <label for="description">Description</label>
    <textarea class="form-control" name="description" id="description"
              rows="3">{{ old('description') }}</textarea>
</div>

here is my script

<script>
    ClassicEditor
        .create(document.querySelector('#description'), {
            cloudServices: {
                tokenUrl: '{{ csrf_token() }}',
                uploadUrl: '{{ public_path('../../img/desc-img') }}'
            }
        })
        .then(editor => {
            window.editor = editor;
        })
        .catch(err => {
            console.error(err.stack);
        });
</script>

I used ckeditor 5 zip in my laravel project. but it was not working when I add image upload plugin from ckeditor cloudServices. Here is the documentation https://ckeditor./docs/ckeditor5/latest/features/image-upload/image-upload.html

my html code in blade.

<div class="form-group">
    <label for="description">Description</label>
    <textarea class="form-control" name="description" id="description"
              rows="3">{{ old('description') }}</textarea>
</div>

here is my script

<script>
    ClassicEditor
        .create(document.querySelector('#description'), {
            cloudServices: {
                tokenUrl: '{{ csrf_token() }}',
                uploadUrl: '{{ public_path('../../img/desc-img') }}'
            }
        })
        .then(editor => {
            window.editor = editor;
        })
        .catch(err => {
            console.error(err.stack);
        });
</script>

• javascript
• php
• laravel
• ckeditor
• laravel-6

• I answered same question here , hope this help you stackoverflow./a/62485424/4575350 – STA Commented Jul 5, 2020 at 6:02

3 Answers 3

define your textarea

<textarea class="form-control" id="ckeditor" name="ckeditor"></textarea>

and instantiate the ckeditor using this code.

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

then create the action for uploading images and define your route like so:

/**
 * upload images from ckeditor.
 *
 * @param Request $request
 * @return \Illuminate\Http\Response
 */
 public function upload_images(Request $request)
 {
      $request->validate([
          'upload' => 'image',
      ]);
      if ($request->hasFile('upload')) {
            $url = $request->upload->store('images');
            $CKEditorFuncNum = $request->input('CKEditorFuncNum');
            $url = asset('storage/' . $url);
            $msg = 'Image successfully uploaded';
            $response = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
            @header('Content-type: text/html; charset=utf-8');
            return $response;
        }
}

And that is it.

use these script to call Ckeditor

<script src="https://cdn.ckeditor./ckeditor5/22.0.0/classic/ckeditor.js"></script>
<script type="text/javascript">
    CKEDITOR.replace('editor1', {
        filebrowserUploadUrl: "{{route('ckeditor.upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'
    });
</script>

and after put these code in your imageUploaderController

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;
 }

It works for me, try it.

And don't forget to stop script execution with exit.

if ($request->hasFile('upload')) {
    
    //some code for uploading
    
    echo $response;
    exit;
}