Gut Moring

Sebelumnya pernah saya catat memasang CKEditor pada tulisan ini. Apa itu elFinder? elFinder itu boleh dikatakan sebagai filemanager. Jadi fungsinya untuk mengatur file-file. Biasanya yang sering digunakan pada blog itu untuk mengupload gambar, menghapus gambar. Nah sedangkan CKEditor hanya menyediakan insert gambar berupa melalui alamat website dari gambar tersebut. Sedangkan elFinder ini justru memudahkan untuk menginsert gambar sekaligus mengupload gambar jika gambar yang diinginkan belum ada di filemanager / belum pernah di upload.

Sebenarnya CKEditor bisa menggunakan CKFinder sebagai file managernya. Tetapi kalau dilihat dari webnya CKFinder bisa didownload hanya versi trialnya saja. Oke, mengenai elFinder bisa didapat di situsnya disini. Silahkan didownload.

Memasang elFinder pada CKEditor

1. Setelah di download elFinder, tentu sebelumnya sudah download CKEditor. Nah saya contohkan folder elFinder diletakkan didalam folder CKEditor. Jadi urutannya CKEditor/elFinder.
2. Pada folder "CKEditor", edit config.js (menggunakan editor code, misalnya notepad++ atau lainnya. Masukkan kode seperti dibawah ini dialam "CKEDITOR.editorConfig = function( config ) {"

   config.filebrowserBrowseUrl = '../ckeditor/elfinder/elfinder.html';
   config.filebrowserImageBrowseUrl = '../ckeditor/elfinder/elfinder.html?mode=image';
   config.filebrowserFlashBrowseUrl = '../ckeditor/elfinder/elfinder.html?mode=flash';

3. Jadi secara keseluruhan isi dari file config.js ini seperti dibawah ini.

   /**
    * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
    * For licensing, see LICENSE.html or http://ckeditor.com/license
    */
   
   CKEDITOR.editorConfig = function( config ) {
   	// Define changes to default configuration here. For example:
   	// config.language = 'fr';
   	// config.uiColor = '#AADC6E';
   	
   	config.filebrowserBrowseUrl = '../ckeditor/elfinder/elfinder.html';
   	config.filebrowserImageBrowseUrl = '../ckeditor/elfinder/elfinder.html?mode=image';
   	config.filebrowserFlashBrowseUrl = '../ckeditor/elfinder/elfinder.html?mode=flash';
   	 
   };

4. Untuk tatanan folder dari file textarea yang akan diakses itu seperti postingan sebelumnya. Jadi kalau di saya itu begini susunan foldernya,
5. Nanti yang dipanggil dibrowser adalah file tesckeditor.html.
6. Cara memanggil elfindernya tekan tombol images "" Nanti akan muncul image properties. Pada text-box "URL" klik Browse Server. Nanti akan muncul filemanager elfinder.

Maaf kalau catatan ini sangat menyulitkan untuk dipahami, karena memang lebih baik pelajari sendiri dan otak-atik sendiri berdasarkan petunjuk dari masing-masing CKEditor ataupun elfinder. Oya, sama perbanyak baca-baca forum.

Update :

- Jika ada error Unable to connect to backend. Back end not found, silakan baca tulisan disini