Tutorial ini saya buat sebagai pengingat cara mengintegrasikan Roxy File Manager ke CKEditor. CKEditor telah menjadi pilihan saya dalam membuat sebuah website. Alasannya, karena CKEditor mudah diintegrasikan ke kode HTML dan tampilannya yang menarik. Dengan CKEditor, membuat konten web bisa dilakukan seperti layaknya membuat dokumen di MS Word. Dengan CKEditor, pembuat konten bisa mengatur jenis perataan dokumen (rata kiri, rata kanan, tengah atau rata kiri-kanan), memilih jenis huruf, memilih ukuran huruf, menyisipkan icon, gambar bahkan animasi flash. Sayangnya, untuk menyisipkan gambar, CKEditor tidak menyediakan fitur File Manager. Tanpa fitur File Manager, pembuat dokumen harus meng-upload terlebih dahulu gambar yang ingin disisipkan, lalu meng-copy link URL-nya ke tools insert image yang ada di window CKEditor. Hal ini agak menyulitkan pembuat dokumen yang menggunakan CKEditor. Syukurnya, ada alternatif File Manager versi opensource yang bisa diintegrasikan ke CKEditor, yaitu Roxy File Manager.
Website Roxy File Manager dapat diakses melalui link ini. Untuk mengintegrasikan Roxy File Manager ke CKEditor, terlebih dahulu men-download versi stabil tools ini di link download. Ada tiga pilihan Roxy File Manager yang bisa di download, yang disesuaikan dengan jenis lingkungan pemrograman yang digunakan. Karena saya membuat website dengan menggunakan bahasa pemrograman PHP, pilihannya adalah Roxy File Manager for PHP. File yang di download memiliki ukuran kurang dari 1MB atau sekitar 885KB. Langkah-langkah integrasi Roxy File Manager ke CKEditor adalah sebagai berikut:
- Extract file archieve Roxy File Manager yang sudah di download.
- Isi dari archieve Roxy File Manager adalah sebuah folder dengan nama fileman. Upload folder fileman tersebut ke folder website yang sedang dibuat. Contohnya, untuk yang sedang membangun website menggunakan xampp, dapat mengcopy folder fileman ke file website yang berada di xampp/htdocs/_nama_website. Atau bisa langsung di upload ke web hosting website yang dibuat.
- Cari file conf.json yang berada di dalam folder fileman lalu ubah opsi “INTEGRATION” pada baris ke 10 menjadi “ckeditor”.
- Saat mengintegrasikan CKEditor ke halaman html, sisipkan kode seperti berikut: