Tunggu Sebentar ...

Memasang ElFinder Pada CKEditor

Ditulis oleh

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.post
  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

Ditumpuk didalam berkas : Catatan Belajar , Belajar lain-lain
Yang berkomentar (7)
Setiap komentar yang tampil adalah hasil dari persetujuan Admin

Komentar untuk "Memasang ElFinder Pada CKEditor"

weins
25-04-2016 04:33

mas,
kenapa muncul pesan error pas klik tombol browsernya?
" enable to connect to banckend"

Komentar via web

Balas
Danni Moring
25-04-2016 13:11

coba kamu buka file elfinder.html di folder enfilder-mu... nah itu ada code
$(document).ready(function() {
$('#elfinder').elfinder({
url : 'php/connector.minimal.php' // connector URL (REQUIRED)
// , lang: 'ru' // language (OPTIONAL)
});
});

artinya dia konek ke url url : 'php/connector.minimal.php' .... jadi error back end itu karena file connector.minimal.php tidak ada. Caranya, buka folder elfinder-nya, terus cari folder php. Di folder php cari file connector.minimal.php-dist .. buka file itu dengan text editor. Lalu save as dengan nama file connector.minimal.php. intinya file connector.minimal.php-dist itu harus diubah jadi file connector.minimal.php

Komentar via web

Balas
Danni Moring
25-04-2016 13:39

coba lihat tulisan baru saya http://dannimoring.net/baca/error-unable-to-connect-to-backend-back-end-not-found

Komentar via web

Balas
Nikko
09-06-2015 16:08

MAs Juragan..

Saya udah test hampir beberapa scrip dan beberapa finder, tapi kenapa ya button browser file nya tidak tampil di pop upload imagenya... mohon di bantu Juragan suhu Dani

Komentar via web

Balas
Danni Moring
10-06-2015 11:58

waduh dipanggil juragan suhu... | btw path elfindernya udah bener nulisnya sesuai letaknya ?

Komentar via web

Balas
Rusdin
02-10-2014 15:35

udah ikutin stepnya, pas di run, muncul dialog box "invalid backend configuration, PHP json module not instaled"
gimana solusinya gan??

Komentar via web

Balas
Danni Moring
02-10-2014 16:10

path ckeditornya udah bener blum..letak foldernya..

Komentar via web

Balas