Laravel Ckeditor Resim Yükleme

tarafından
23
Laravel Ckeditor Resim Yükleme

Laravel de ckeditor kullanıyor iseniz veya kullanmak istiyorsanız resim yüklemek için bir kısım var ancak bu ilk çalıştırdığınızda kapalıdır. Bu işlemi yapmak için birkaç işlem yapmak gerekmektedir. Aşağıda her şeyi adım adım yazacağım en altta linkleri bulabilirsiniz.

1 – Ckeditor dosyalarını public klasörü altında assets klasörü altına yükleyin. Ben örnek proje olduğu için direk çıkarıp attım.

2 – Bir controller oluşturun. Ben CKeditorController adında bir controller oluşturdum. Bu controller iki tane fonksiyon içerecek onlarda şu şekilde;

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;

class CkeditorController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('ckeditor');
    }
	/**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function upload(Request $request)
    {        
        $file = $request['upload'];

        // Build the input for validation
        $fileArray = array('upload' => $file);

        // Tell the validator that this file should be an image
        $rules = array(
            'upload' => 'mimes:jpeg,jpg,png,gif|required|max:10000' // max 10000kb
        );

        $validator = Validator::make($fileArray, $rules);
        if ($validator->fails())
        {
            $response = "<script>CKEDITOR.dialog.getCurrent().hide();</script><script>alert('File format not appropriate');</script>";                   
                
            @header('Content-type: text/html; charset=utf-8'); 
            echo $response;
        }
        else
        {
            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 = ''; 
                $response = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
                   
                @header('Content-type: text/html; charset=utf-8'); 
                echo $response;
            }
        }

       
    }
}

Yukarıdaki kod bloğunda index sayfamızı açıyor. upload fonksiyonu ise bizim sunucu tarafındaki yükleme işini yapmakta. Ayrıca resim dosya biçimi, boyutu için validate işlemi de yapılıyor. Yükleme işleminden sonra dosya ismine zaman damgası veriliyor ve sunucuya o şekilde yükleniyor.

3 – Route dosyasını açın ve şu iki satırı ekleyin.

Route::get('/', 'CkeditorController@index');
 Route::post('ckeditor/upload', 'CkeditorController@upload')->name('ckeditor.upload');

4 – View dosyası oluşturun Controller’ da ckeditor ismini verdik. Burada da view klasörü altına ckeditor.blade.php isimli dosyayı oluşturun ve şu kodları ekleyin.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Ckeditor Image Upload Example</title>
    <script src="assets/ckeditor.js"></script>
</head>
<body>
<h1>Laravel Ckeditor Image Upload Example</h1>
<textarea name="editor1"></textarea>
   
<script type="text/javascript">
    CKEDITOR.replace('editor1', {
        filebrowserUploadUrl: "{{route('ckeditor.upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'
    });
</script>
   
</body>
</html>

Kod kısmında route da yazdığımız upload yolunu buraya veriyoruz ayrıca laravel post işlemlerinde token istediği için tokenıda veriyoruz. Bu şekilde artık ckeditor de resim yüklemesi yapabilirsiniz.

Linkler

Ckeditor’ un sitesine erişmek için buraya tıklayınız.

Laravel’ in sitesine erişmek için buraya tıklayınız.

Projenin yapılmış halini indirmek isterseniz buraya tıklayınız.