Integrasi Ckeditor dan KCFinder pada Framework Codeigniter 3

CKEditor adalah teks editor yang digunakan di lingkungan web. CKEditor adalah sebuah WYSIWYG editor, yang berarti teks yang diedit akan sama dengan yang akan tampil. Memakai CKEditor sebagai teks editor mirip seperti kita menggunakan Microsoft Word atau OpenOffice, dengan Ckeditor memungkinkan user untuk menentukan format, ukuran dan jenis huruf, menambahkan hyperlink dan tabel, dan juga bisa mengupload file, gambar, animasi flash, video, dll. KCFinder adalah salah satu plugin populer untuk web file management yang biasa diintegrasikan dengan editor tinymce, ckeditor dan masih banyak lagi yang biasa digunakan oleh para web master.

Baiklah, pada pagi ini saya akan membagikan sedikit pengalaman bagaimana cara untuk mengintegrasikan CKEditor dan KCfinder atau biasa disebut File Manager. Sebenarnya sudah banyak artikel yang bisa anda didapatkan search engine google tentang tutorial ini, atau secara langsung bisa membuka document dari situs CKeditor. tapi setelah kita coba selidiki artikel-artikel tersebut kebanyakan kurang update dan berasal atau ditulis beberapa tahun yang lalu dan nanti akan membuat ragu yang membacanya.

Langsung saja kita praktekkan

Disini saya menggunakan Framework Codeigniter versi 3, Sebelumnya silahkan download dulu CKEditor dan KCfinder dibawah ini :
1. http://ckeditor.com/download
2. https://kcfinder.sunhater.com/download

Masukkan CKEditor dan KCFinder pada folder assets satu tingkat bersama folder application,..
ckeditor5
Kemudian Edit config.js CKEditor yang berada di folder ckeditor, menjadi:

Selanjutnya mengaktifkan Ckeditor dan Kcfinder include ckeditor.js :

dan replace filebrowserImageBrowseUrl

Selanjutnya pada textarea tambahkan atribut id=”editor1″ :

Terakhir untuk security KCfinder agar tidak bisa di akses umum, Dimana ketika ada user yang mencoba mengakses file browse.php tanpa melalui login maka akan ditolak.

Pertama, Buka file index.php Codeigniter dan kemudian ubah :

Selanjutnya Edit config.php KCFinder yang berada di folder kcfinder/config/

dan Terakhir pada saat login kita set $_SESSION[‘file_manager’] menkadi true agar kcfinder bisa di akses, karena kondisi awal kcfinder masih dalam keaadaan disable, berikut :

Berikut Penampakannya :
1. Ckeditor Sudah Aktif
ckeditor1

2. Browse Server / Buka Kcfinder File Manager
ckeditor2

3. Upload Gambar pada KCFinder File manager
ckeditor2

4. Gambar Berhasil Disisipkan
ckeditor2

Semoga bermanfaat dan sampai jumpa lagi pada artikel lainnya, jika anda mempunyai pertanyaan atau kendala silahkan melalui form komentar yang sudah kita sediakan dibawah ini atau juga bisa melalui forum yang sudah kita sediakan di : https://members.phpmu.com/forum, salam,.. 🙂

DEMO DOWNLOAD

Robby Prihandaya

Chief Executive Officer at https://phpmu.com
Robby is an Engineer, Entrepreneur, Thinker and Founder of phpmu.com programming blog. a very popular web development site, Lives in Padang - Indonesia