Upload Gambar di CKEditor dengan Laravel 5.2

Dalam proses development aplikasi terkadang membutuhkan sebuat text editor. Banyak plugin text editor yang menjadi pilihan bagi developer. Namun dalam tutorial kali ini akan dibahas bagaimana menambahkan text editor CKEditor yang sudah populer dan KCFender sebagai file manager dari CKEditor.

Tutorial ini akan mengintegrasikan CKEditor dengan framework Laravel 5.2.

1. Instalasi framework laravel.

Untuk proses instalasi framework laravel Anda dapat melihat dokumentasi resminya di https://laravel.com/docs/5.2/installation

2. Download CKEditor

Anda dapat mendownload CKEditor di http://ckeditor.com/download

3. Download KCFender

Anda dapat mendownload KCFender di http://kcfinder.sunhater.com/download

4. Extrac dan pindah file

Extrac ckeditor dan kcfender. Pindah hasil extrac kfender kedalam folder ckeditor. Terakhir pindahkan hasil extrac ckeditor ke folder public di framework laravel.

Jangan lupa mengubah permission untuk pengguna linux atau mac

5. Tambahkan konfigurasi di CKEditor

Buka file config.js yang berada di folder ckeditor/config.js. Kemudian ganti code dengan code berikut:

 CKEDITOR.editorConfig = function( config ) {
    config.filebrowserBrowseUrl = 'public/ckeditor/kcfinder/browse.php?opener=ckeditor&type=files';
    config.filebrowserImageBrowseUrl = 'public/ckeditor/kcfinder/browse.php?opener=ckeditor&type=images';
    config.filebrowserFlashBrowseUrl = 'public/ckeditor/kcfinder/browse.php?opener=ckeditor&type=flash';
    config.filebrowserUploadUrl = 'public/ckeditor/kcfinder/upload.php?opener=ckeditor&type=files';
    config.filebrowserImageUploadUrl = 'public/ckeditor/kcfinder/upload.php?opener=ckeditor&type=images';
    config.filebrowserFlashUploadUrl = 'public/ckeditor/kcfinder/upload.php?opener=ckeditor&type=flash';
 };

6. Mengubah konfigurasi di KCFender

Edit file config di folder ckeditor/kcfender/conf/config.php. Ganti 'disabled' => true menjadi 'disabled' => false.

7. Menambahkan root

Selanjutnya membuat routing di app/Http/routes.php

 Route::get('/editor', function(){
    return view('ckeditor.index');
 });

8. Menambahkan view

Selanjutnya membuat view di rosources/views/ buat folder ckeditor dan buat file index.blade.php dengan kode seperti berikut:

<!DOCTYPE html>
<html>
<head>
 <title>CKEDITOR With KCFinder</title>
 <script src="{{asset('ckeditor/ckeditor.js')}}"></script> 
</head>
<body>
 <textarea id="ckeditor" class="ckeditor"></textarea>  
 <script type="text/javascript">  
  CKEDITOR.replace( 'ckeditor' );  
 </script>
</body>
</html>;

Jangan lupa membuat folder images di public/ckeditor/kcfinder/upload/images

Berikut hasil screenshort:

Editor CKEditor&KCFender

Hasil Upload Gambar

Semua gambar yang telah di upload

Full source code dapat di download di https://github.com/agungid/laravel_cakeeditor

Referensi: http://way2php.com/image-upload-ckeditor-using-laravel-5-3/

About catatancidingku.bligspot.com

M Agung Sutrisno: Saya seorang Web Devoloper sejak tahun 2015. Saya tertarik dengan dunia IT sejak tahun 2013. Lulus dari Universitas Islam Madura pada tahun 2016. Pernah bekerja di Univeritas Islam Madura selama 2 tahun. Mulai tahun 2017 mulai bekerja sebagai Web Developer di salah satu perusahaan software PT. Warung Jasa Teknologi, Jakarta.

2 coment�rios:

avenged sevenfold10 May 2017 at 15:25
mas ..kcfinder itu yg di download yg apa ya mas?

### Saya akan coba merespon komentar baru secepatnya.
### Jangan berkomentar SPAM (promosi, dll,)
### Jangan komentar yang berisi link aktif,
### Mohon Maaf Jika Komentar saya moderasi karena ingin mengantisipasi kemungkinan Spam atau link Aktif