وبلاگ

آپلود عکس ویرایشگر CKEditor 5 در لاراول

در این مقاله به آپلود عکس در ویرایشگر متنی CKEditor 5 می پردازیم که هنگام نصب آن آپلودی انجام نمی شود و باید کنترلر آپلود عکس برای ارتباط با ویرایشگر بنویسیم.

برای شروع EditorController ایجاد کنید:

php artisan make:controller EditorController

مسیر روت با متد post برای EditorController ایجاد کنید:

Route::post('editor', [EditorController::class, 'upload'])->name('editor.upload');

کد زیر را در کنترلر وارد کنید:

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('media'), $fileName);

       $url = asset('media/' . $fileName);
       return response()->json(['fileName' => $fileName, 'uploaded'=> 1, 'url' => $url]);
   }
}

کد بالا هنگامی آپلود عکس انجام می شود, پوشه media در پوشه public لاراول ایجاد می شود و نیازی نیست دستی ایجاد کنید.

فایل جاوا اسکریپت ویرایشگر CKEditor 5 به لاراول منتقل کنید:

<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>

می توانید روی این پیوند لینک کنید و فایل را دانلود کنید.

ویرایشگر متنی CKEditor را فعال سازی می کنیم:

<textarea class="form-control" id="editor" rows="10"></textarea>
<script>
    ClassicEditor
    .create( document.querySelector( '#editor' ), {
        ckfinder: {
            uploadUrl: '{{route('editor.upload').'?_token='.csrf_token()}}'
        },
        language: {
            content: 'ar'
        }
    })
   .then( editor => {
         console.log( editor );
   })
   .catch( error => {
        console.error( error );
   })
</script>

پیش نمایش:

موفق باشید 🙂