Tutorial Memasang CKEditor dan KCFinder di CakePHP

Kerjaan kantor saya saat ini berhubungan dengan framework CakePHP. Versi CakePHP yang dipakai adalah 1.3.6. Ada sebuah modul yang ingin memakai editor WYSIWYG dan pilihan saya jatuh pada CKEditor karena pilihan editornya lumayan lengkap dengan tampilan visual yang ciamik pula. Sayangnya, pada versi free dan open source CKEditor, tidak ada pilihan upload file/gambar dari komputer lokal (komputer sendiri) melainkan dari URL situs. File manager yang bisa dipakai bersama CKEditor adalah CKFinder, namun sayangnya software itu tidak gratis alias perlu membeli lisensi.

Tapi ada cara lain selain memakai CKFinder, yaitu KCFinder. Dengan KCFinder ini Anda bisa mengintegrasikannya dengan CKEditor atau editor lainnya seperti FCKeditor atau TinyMCE.

Berikut segala perlengkapan yang kami pakai pada tutorial kali ini (kayak perang aja..wkwk 😀 ):

• CakePHP 1.3.6
• CKEditor 4.3.2
• KCFinder 2.51

Cara Instal dan Mengintegrasikan CKEditor ke CakePHP

1. Download CKEditor di www.ckeditor.com.

2. Ekstrak dan copy folder ke dalam folder “webroot/js/ckeditor/”.

3. Pada view dimana Anda ingin menampilkan editornya, copy dan paste kode di bawah ini pada bagian atas halaman (atau dimanapun, tapi sebelum textarea yang ingin menampilkan editor): 

<?php echo $this->Html->script('ckeditor/ckeditor');?>

Kode di atas akan memasukkan file “webroot/js/ckeditor.js” ke dalam view.

4. Buat textarea dan berikan class bernama “ckeditor”, misalkan seperti ini:

<?php echo $this->Form->textarea('content',array('class'=>'ckeditor'))?>

Voila! Selamat, sekarang editor sudah tampil bersama dengan textarea.

Cara Instal dan Mengintegrasikan KCFinder ke CakePHP

1. Download KCFinder di kcfinder.sunhunter.com.

2. Ekstrak dan copy file ke dalam folder “webroot/js/kcfinder/”.

3. Buka file “webroot/js/kcfinder/config.php”. Di file ini Anda bisa mengatur beberapa konfigurasi, tapi kita hanya akan fokus pada 1 hal terpenting agar file manager bisa berjalan normal.

Secara default, KCFinder di-disable. Jika Anda ingin semua user bisa memakai file manager ini di dalam situs Anda (tidak ada batasan), ubah nilai ‘disabled’ menjadi ‘false’.

Tapi memberikan akses ke semua user untuk mengelola file di server bukanlah ide yang bagus. Oleh karena itu Anda bisa mengaktifkan manajemen file hanya kepada variabel session tertentu. Nama variabel session berada di bagian bawah config.php:

'_sessionVar' => &$_SESSION['KCEDITOR'],

Berikut yang perlu Anda lakukan untuk membuat file manager bisa dipakai oleh user yang sudah login.

• Ubah “disabled” menjadi “true”.
• Di controller yang dipakai untuk memvalidasi login user, setelah user berhasil login, masukkan kode ini untuk meniban settingan disabled true di atas tadi menjadi false: 

  $_SESSION['KCEDITOR']['disabled']=false;

Jangan lupa untuk menghapus variabel session ini setelah user logout.

• Pada bagian atas file “webroot/js/kcfinder/core/autoload.php”, masukkan kode berikut:

  session_name('CAKEPHP');

4. Masih di file “config.php”. Sekarang kita akan menentukan folder yang dijadikan tempat untuk menyimpan hasil upload gambar dll. Secara default, KCFinder menentukannya di folder “upload” KCFinder sendiri.

Jika Anda sedang membuat aplikasi di localhost dan “webroot”-nya ada di “http://localhost/“ dan Anda ingin menyimpan hasil upload di “webroot/upload”, pada konfigurasi ‘uploadURL’, setting seperti ini:

'uploadURL' => "/app/webroot/upload",

Tapi jika aplikasi Anda ada di “http://localhost/my_app/” maka konfigurasinya akan seperti ini:

'uploadURL' => "/my_app/app/webroot/upload",

Untuk mengetes KCFinder ini sudah berjalan baik, silahkan buka URL berikut:

http://path_to_your_app/js/kcfinder/browse.php

Ganti “path_to_your_app” dengan lokasi aplikasi Anda.

Cara Mengintegrasikan KCFinder ke dalam CKEditor pada CakePHP

Buka file “webroot/js/ckeditor/config.js” dan ubah config-nya seperti ini:

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

Tapi jika aplikasi Anda berada di http://localhost/my_app/ maka config-nya akan seperti ini:

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

Setelah mengatur konfigurasi di atas, Anda bisa melihat tombol “Browse” di pilihan Insert Image/Link/Flash.

Selesai, semoga bermanfaat dan selamat mencoba. 😉

Happy coding!