Membuat Ckeditor dan Ckfinder di Codeigniter

Ckeditor merupakan suatu plug-in text editor yang dipakai kebanyakan web, untuk menyempurnakan kegunaanya juga didukung oleh Ckfinder yang memudahkan bagi users dalam mengupload file atau gambar ke dalam tekt editor. banyak tulisan di blog-blog lain yang memuat bagaimana membuat ckeditor dan ckfinder serta menintegrasikanya, namun banyak yang eror atau tidak jalan pada aplikasi yang dibuat, namun kali ini saya akan memberikan penjelasan dan tutorial yang mudah, saya pun sudah mencobanya terlebih dahulu.

Step 1 . buatlah project Codeigniter dengan nama "ckf"

Step 2 . Lalu buatlah folder js dan userfiles di root project. seperti dibawah ini :

Step 3. download ckeditor di sini dan ekstrak,lalu copy ke dalam folder js

Step 4. download ckfinder di sini dan ekstrak,lalu copy ke dalam folder js

Step 5. download library ckeditor di sini dan copy di system\libraries

Step 6. download library ckfinder di sini dan copy di system\libraries

Step 7. Edit config.php di ckf\js\ckfinder
- ubah bagian false menjadi true seperti ini :
     

  
- setting base url ckfinder menjadi $baseUrl = 'ckf/userfiles/'; atau $baseUrl =

  'namaproject/folder upload'

- edit bagian base dir menjadi

 $baseDir = $_SERVER['DOCUMENT_ROOT'].'/ckf/userfiles/';

Step 8. Edit config.js di folder ckf\js\ckeditor bertujuan untuk memasukan ckfinder kedalam ckeditor
seperti  ini :


         
Step 9. buka welcome_message.php di folder view guna membuat tampilan ckeditor pada project aplikasi

- ckf dan buatlah kodingan seperti dibawah ini :

   

Step 10 . Setelah membuat tampilan,kita harus membuat kodingan agar tampilan itu dapat di running oleh program, maka buka folder controller, welcome.php dan buat lagi kodingan seperti ini :


 
Step 11. Running aplikasi di localhost/ckf

Step 12. anda dapat mendownload aplikasi ini, jika ingin mempelajarinya lebih lanjut. klik download


      Sekian tutorial dari saya, semoga membantu dan tolong like dan comment postingan ini ya......

Author : mommy aify

Share this

Related Posts