Menambahkan file manager Roxy Fileman pada CKEditor

Menambahkan file manager Roxy Fileman pada CKEditor

1292
16
SHARE

Kita lanjut ya, mumpung di jalan lagi macet total ne, jadi bisa nulis artikel. heee….

Melanjutkan artikel sebelumnya yaitu membuat WYSIWYG dengan CKeditor, kali ini kita akan menambahkan file manager. File manager berguna untuk mengupload file sehingga bila kita ingin memasukkan gambar / file dalam artikel, kita bisa langsung menguploadnya melalui wysiwyg.

Ada banyak sekali file manager yang ada dipasaran mulai yang free hingga berbayar. Masing-masing punya kelebihan dan kekurangan sendiri-sendiri. Pada kesempatan ini kia akan menggunakan yang free yaitu Roxy Fileman.

Untuk menggabungkan Roxy Fileman dengan ckeditor, cukup mudah. Berikut ini adalah langkah-langkahnya :

Step 1 : Anda perlu mendownload Roxy Fileman pada websitenya atau anda bisa mendownloadnya pada link di akhir artikel ini.

Step 2 : Letakkan file hasil ekstrak ke dalam folder ckeditor/plugins

fileman

Step 3 : Ubah baris 11 s/d 15 file index.php menjadi seperti berikut ini :

Step 4 : Lakukan pengaturan folder upload dengan cara mengubah konfigurasi dalam file ckeditor/plugins/fileman/conf.json. Ubah baris 2 dan 10 menjadi seperti berikut ini :

Sesuaikan baris 2 sesuai path tempat folder upload. Jangan lupa baris 10 diganti ckeditor.

Step 5 : Jalankan kembali ckeditor anda. Cobalah untuk mengupload gambar. Maka akan muncul jendela sebagai berikut :

browse
Klik Browse Server maka akan muncul jendela sbb :

upload
Upload sebuah gambar kemudian pilih gambar tersebut lalu klik OK. Maka gambar yang anda pilih akan masuk ke dalam wysiwyg seperti gambar diawal artikel ini. Anda bisa menyimpan artikel tersebut ke dalam database dan gambar akan muncul ketika data ditampilkan.

Demikianlah cara menambahkan file manager pada CKEditor. Semoga bemanfaat. Jangan lupa di share ya.. terima kasih.

Bagikan artikel ini ya.. terima kasih

16 COMMENTS

  1. Terima kasih. Artikelnya sangat berguna. Bisakah dilengkapi dengan cara memproteksi roxy fileman dari user yang tidak berhak mengaksesnya?

  2. saya masih belum nangkep yang anda maksud dengan proteksi di sini. Kalo maksudnya proteksi dari hak akses, ubah index.html ke index.php terus tambahkan session sesuai hak aksesnya. jangan lupa ubah juga alamat variabel roxyFileman di javascriptnya. Kalo yang anda maksud memproteksi dari listing folder pakai .htaccess aja. Bikin dile .htaccess, tambahkan script Options -Indexes. gitu kira2 😀

      • Proteksi hak akses min….
        index.html sudah dihapus, tinggal index.php. Tapi index.html dari browser masih bisa dibuka.

        • index mmg hrus bs d buka dr browser klo g y g bs upload file. Hehe.. tp kan g smua user th alamt file indexnya. Jd g smua user bs buka. Klo mw lebih aman, tambahkan variabel buat cek bahwa index di buka dr referrer yg valid atau nggak. Klo referrer g valid bkin forbiden dll.. gt gan.

  3. mau tanya nambahin script dibawah inin dimana nya yah simpennya?

    var roxyFileman = ‘ckeditor/plugins/fileman/index.html’;
    $(function () {
    CKEDITOR.replace(‘ckeditor1’, {filebrowserBrowseUrl: roxyFileman,
    filebrowserImageBrowseUrl: roxyFileman + ‘?type=image’,
    removeDialogTabs: ‘link:upload;image:upload’});
    });

    • silahkan lihat index.php di artikel sebelumnya (http://harviacode.com/2015/02/16/cara-membuat-input-wysiwyg-dengan-ckeditor/)

      ubah baris 11 s/d 15 yang semula

      < *script*>
      $(function () {
      CKEDITOR.replace(‘ckeditor1’);
      });
      < */script*>

      menjadi

      < *script*>
      var roxyFileman = ‘ckeditor/plugins/fileman/index.html’;
      $(function () {
      CKEDITOR.replace(‘ckeditor1’, {filebrowserBrowseUrl: roxyFileman,
      filebrowserImageBrowseUrl: roxyFileman + ‘?type=image’,
      removeDialogTabs: ‘link:upload;image:upload’});
      });
      < */script*>

  4. Min, mau tanya. “Sesuaikan baris 2 sesuai path tempat folder upload. Jangan lupa baris 10 diganti ckeditor.” itu maksudnya gimana ya? apanya yang disesuaikan. bisa kasih contoh?

    • Silahkan buka file ini mas ckeditor/plugins/fileman/conf.json. nanti kan muncul data seperti gambar itu. tinggal di ubah aja FILES ROOT nya sesuai path tempat upload, lalu “INTEGRATION”: menjadi ckeditor. hehe

LEAVE A REPLY