CKFinder adalah sebuah aplikasi berbasis web yang digunakan untuk mengelola dan mengunggah file ke server. CKFinder sering digunakan bersama dengan CKEditor, yang merupakan editor teks kaya (rich text editor) berbasis web. Dengan CKFinder, pengguna dapat dengan mudah mengunggah, menghapus, memindahkan, dan mengatur file dan folder secara intuitif melalui antarmuka grafis yang user-friendly.
Untuk menggunakan ckfinder, sebelumnya harus kita harus menginstall ckeditor terlebih dahulu
1. ckeditor dapat didownload pada link berikut : https://ckeditor.com/
2. Terus, download ckfinder bisa didownload menggunakan link https://ckeditor.com/ckfinder/resources/
Kedua folder download diatas, buat folder baru dengan struktur folder assets/core-admin
3. Kemudian, install framework Laravel dengan memasukkan code pada terminal :
composer create-project laravel/laravel ckfinder-example
4. tambahkan route pada web.php seperti ini:
Route::post('ckeditor/upload', [BeritaController::class,'upload'])->name('ckeditor.upload');
5. lalu buat controller BeritaController dengan mengetikan pada terminal, seperti dibawah ini:
php artisan make:controller BeritaController
6. pada BeritaController tambahkan kode seperti dibawah ini, untuk membuat function index() dan upload():
public function index(){
return view('sample_ckeditor');
}
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;
}
}
7. kemudian buat simple view berinama sample_ckeditor.blade.php. masukkan kode seperti dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="#" method="post">
<textarea class="form-control" placeholder="Isi Berita"
name="konten_berita" id="editor"></textarea>
</form>
</body>
<script src="{{ asset('assets/core-admin/core-component/ckeditor/ckeditor.js') }}"></script>
<script src="{{ asset('assets/core-admin/core-component/ckfinder/ckfinder.js') }}"></script>
<script>
var editor = document.getElementById('editor');
if (editor) {
CKEDITOR.replace('editor', {
toolbar: 'MyToolbar',
width: "100%",
filebrowserUploadUrl: "{{route('ckeditor.upload', ['_token' => csrf_token() ])}}",
filebrowserUploadMethod: 'form'
});
}
</script>
</html>
Selamat Mencoba …. ^_^
