Cara konfigurasi dasar CKEditor dan KCFinder

Berikut cara untuk mengconfigurasi CKEditor dan KCFinder agar di text editor kita bisa upload file dan langsung bisa ditaruh di halaman text editor, seperti yang sering kita lihat pada text editor blogger.com.
langsung saja ya.
langkah pertama silahkan download CKEditor disini dan  KCFinder disini.

(Contoh system yang lagi dibuat bernama "Online System" dan kita akan menempatnya file-file tersebut pada Folder "assets" yang ada di folder "Online System")
Selanjutnya extrak file-file yang tadi telah didownload ke dalam folder "Online System/assets", sehingga membentuk susunan seperti ini :








- selanjutnya silahkan buka file config.js yang ada di folder ckeditor dan pada bagian "CKEDITOR.editorConfig"  silahkan tambahkan :

config.filebrowserBrowseUrl = '../assets/kcfinder/browse.php?type=files';
config.filebrowserImageBrowseUrl = '../assets/kcfinder/browse.php?type=images';
config.filebrowserFlashBrowseUrl = '../../assets/kcfinder/browse.php?type=flash';
config.filebrowserUploadUrl = '../../assets/kcfinder/upload.php?type=files';
config.filebrowserImageUploadUrl = '../../assets/kcfinder/upload.php?type=images';
config.filebrowserFlashUploadUrl = '../../assets/kcfinder/upload.php?type=flash';

Jangan lupa di save yaaa..

- selanjutnya silahkan buka file config.php yang ada di folder kcfinder, dan rubah konfigurasi 'disabled'  menjadi "false"

langsung di save setelah di konfigurasi

- konfigurasi sudah selesai dan CKEditor sudah siap digunakan, untuk menggunakan CKEditor sangatlah mudah. pada form tinggal kita buat input text dengan menggunakan textarea, lebih jelasnya seperti contoh berikut :

dan selesaiii.

setelah kita membuka file dengan textarea tadi maka pada textarea akan  nampak seperti ini :

dan kita juga bisa mengupload file image dengan mengklik icon image, maka akan muncul tampilan image properties

- selanjutnya klik tombol Browse Server, maka akan muncul tampilan KCFinder :

anda dapat upload file dari komputer anda ke server. dan menggunakan file image tersebut untuk diletakkan di text editor anda.

demikian semoga tulisan ini dapat bermanfaat buat para pembaca dan bisa dipraktekkan dalam pembuatan system anda.

oya ada yang lupa, jangan lupa ya untuk memasukkan ckeditor.js kedalam file form anda dengan script berikut :

selamat mencoba kawan-kawin, semoga berhasil dan sukses.