Tunggu Sebentar ...

Menyisipkan File Gambar Dari Upload Elfinder Ke Ckeditor. Sebenarnya agak bingung untuk judul ini, supaya mudah orang ngerti maksud tulisan ini. Tapi mudah-mudahan dari baca tulisan ini tahu yang saya maksud. Ini masih berkaitan dengan CKEDITOR sebagai text editor WYSIWYG dan Elfinder sebagai file manager. Keduanya bisa berkolaburasi digabungkan sehingga CKEDITOR bisa mengupload gambar dan mengatur file yang diupload dengan file manager Elfinder. Lalu setelah diupload dan di manage di Elfinder dan dipilih hasil gambar yang ingin di sisipkan ke CKEDITOR, maka diperlukan lagi fungsi supaya bisa mengirimkan value gambar dari elfinder ke ckeditor.

Nah setelah tulisan yang dulu tentang memasang elfinder di ckeditor serta ketemu error "Error Unable To Connect To Backend. Back End Not Found." Nah kali ini mau tulis catatan juga mengembalikan value file gambar yang dipilih dari filemanager elfinder. Misalnya, ketika kita mau menyisipkan gambar di ckeditor, dan lalu memilih upload file gambar dengan bantuan elfinder, dan setelah itu file gambar yang baru diupload di klik untu disisipkan gambar ke ckeditor untuk pelengkap tulisan artikel atau informasi lainnya.

Disini ada perubahan pada file elfinder.html (dalam contoh ini saya masih pake file bawaan elfinder aslinya). Dan disini juga saya engga kasih tahu cara setting supaya bisa konek antara ckeditor dan elfinder, karena ada link yang saya kasih tahu tadi diatas.

Sebenarnya untuk integrasi ckeditor dengan elfinder sudah ada di dokumentasi mereka, jika memang ingin pelajari silakan kesini.

1. Buka file elfider.html (sesuaikan masing-masing, jika ada yang tidak sama tapi maksud isi filenya sama, maka sesuaikan. Bisa jadi elfinder.html secara defaultnya diganti dengan nama misalnya filemanagerku.php atau filemanager.html). File elfinder.html ini berada di folder elfinder. Adapun susuan foldernya antara ckeditor dan elfinder adalah CKEDITOR > ELFINDER. Jadi kalau saya itu elfindernya didalam folder ckeditor.

2. Secara default-nya file elfinder.html itu ada bersisi code seperti dibawah ini :

<script type="text/javascript" charset="utf-8">
     // Documentation for client options:
    // https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
    $(document).ready(function() {
           $('#elfinder').elfinder({
                  url : 'php/connector.minimal.php'  // connector URL (REQUIRED)
                  // , lang: 'ru'                    // language (OPTIONAL)
            });
     });
</script>

Nah tambah kan script untuk mendapatkan url parameter dengan membuat fungsi javascript, bisa dilihat di dokumentasi mereka disini

function getUrlParam(paramName) {
    var reParam = new RegExp('(?:[\?&]|&amp;)' + paramName + '=([^&]+)', 'i') ;
    var match = window.location.search.match(reParam) ;
    return (match && match.length > 1) ? match[1] : '' ;
}

Lalu cari script seperti dibawah ini :

url : 'php/connector.minimal.php'

Tambah kan script dibawah ini tepat dibawah script diatas barusan

getFileCallback : function(file) {
   window.opener.CKEDITOR.tools.callFunction(funcNum, file.url);
   window.close();
}

Sehingga script untuk javascript secara keseluruhan di elfinder menjadi :

function getUrlParam(paramName) {
     var reParam = new RegExp('(?:[\?&]|&amp;)' + paramName + '=([^&]+)', 'i') ;
     var match = window.location.search.match(reParam) ;
     return (match && match.length > 1) ? match[1] : '' ;
}
			
// Documentation for client options:
// https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
$(document).ready(function() {
       var funcNum = getUrlParam('CKEditorFuncNum'); 
       // script diatas memanggil fungsi getUrlParam, lalu hasilnya ditampung di variabel funcNum

       $('#elfinder').elfinder({
	     url : 'php/connector.minimal.php',  // sesuaikan dengan file masing-masing
             getFileCallback : function(file) {
                     window.opener.CKEDITOR.tools.callFunction(funcNum, file.url);
		     window.close();
	     }
	});
});

3. Setelah itu simpan. Dan coba test upload dari ckeditor, seperti gambar dibawah ini (berdasarkan tahap demi tahap upload dari elfinder) :


Ini saat nulis tulisan di ckeditor dan ingin menyisipkan gambar tepat dibawah tulisan tersebut.



Ketika klik tombol image untuk menyisipkan gambar di ckeditor, akan muncul form dialog. Pilih "Browse Server"



Elfinder muncul ketika sebelumnya di klik "Browse Server". Lalu gambar diatas adalah setelah diupload gambar. Gambar yang baru diupload diklik untuk menyisipkan ke ckeditor tadi.


Form dialog sebelumnya membaca url dari gambar yang di klik dari elfinder untuk disisipkan di ckeditor



Gambar berhasil di sisipkan di tulisan yang berada di ckeditor

Nah kalau bingung dengan tulisan ini, sama. Saya pun bingung jelasinnya (antara diotak dengan diterjemahin ke tulisan bagi saya sangat sulit). Tapi bagi yang mengerti, ya syukurlah. Kalau tidak mengerti juga, mungkin memang disuruh untuk otak atik sendiri.

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

Komentar untuk "Menyisipkan File Gambar Dari Upload Elfinder Ke Ckeditor"

Bangkoor
07-05-2016 13:46

Yang bawaan ckeditor emang nggak begitu ya mas? Baru nyoba ckeditor euy

Komentar via web

Balas
Danni Moring
07-05-2016 14:40

seingetku (ga pernah lihat2 lagi), ckeditor yang buat filemanager-nya itu namanya ckfinder, dan itu commercial alias ga free, kendalanya sih itu kalau ga salah ingat makanya aku beralih ke elfinder..soalnya dah lama nyoba2 setting elfinder karena seperti yang ku bilang tadi (berdasarkan yang ku ingat)... kalau kemarin sengaja download ckeditor versi terbarunya, pengen ambil ckeditornya aja, tanpa lihat2 lagi ckfinder-nya....

Komentar via web

Balas