Kali ini saya memberikan tutorial untuk memadukan TinyMCE 4.9.1 dengan KCFinder 3.20. Dengan KCFinder selain mudah pemasangannya, ada fitur proteksi dari penjebolan dari luar lantaran menggunakan teknik session apabila user telah login ke halaman admin. Maksudnya session yang ada di kcfinder menyatu dengan CMS. KCFinder akan memeriksa sendiri session user atau admin dari CMS tersebut.
Langsung dicoba saja:
Langkah 1, download TinyMCE 4.1.9 di sini atau di sini . Dan juga download KCFinder 3.20 di sini.
Apabila anda menggunakan TinyMCE sebelumnya upgrade atau ganti dengan versi tersebut. Saat saya membuat artikel ini TinyMCE merupakan versi terbaru. Apabila menggunakan CMS Lokomedia, hapus semua folder tinymce ganti dengan yang baru.
Ekstrak file zip yang telah anda download di server hosting atau localhosting anda. Saya contohkan di localhost menggunakan xampp, saya ekstrak di folder utama yaitu namadomain/.
Langkah 2, selanjutnya masuk folder adminweb buka file media.php (untuk CMS Lokomedia). Hapus script src yang mengarah ke TinyMCE, ganti dengan
tinymce.init({
selector: "#tinymce_full",
plugins: ["advlist autolink lists link image charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars code fullscreen", "insertdatetime media nonbreaking save table contextmenu directionality", "emoticons template paste textcolor",
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons", image_advtab: true,
relative_urls : false,
});
</script>
sebelum tag </body>
Langkah 3, ekstrak KCFinder 3.20 pada folder utama anda. ganti kcfinder-master menjadi kcfinder. Edit script tadi dan tambahkan script berikut:
<script>
tinymce.init({
//ini yang ditambahkan
file_browser_callback: function(field, url, type, win) {
tinyMCE.activeEditor.windowManager.open({
file: '../kcfinder/browse.php?opener=tinymce4&field=' + field + '&type=' + type,
title: 'KCFinder',
width: 700,
height: 500,
inline: true,
close_previous: false
}, {
window: win,
input: field
});
return false;
}
}),
</script>
//sampai di sini
selector: "textarea",
bla-bla dan seterusnya.
Langkah 4, selanjutnya kita membuat session untuk KCFinder di CMS Lokomedia, buka file cek_login.php yang ada di folder adminweb, lalu tambahkan script berikut sebelum: $_SESSION[namauser] = $r[username];
yaitu:
$_SESSION['KCFINDER']=array();
$_SESSION['KCFINDER']['disabled'] = false;
$_SESSION['KCFINDER']['uploadURL'] = "../image";
$_SESSION['KCFINDER']['uploadDir'] = "";
Langkah 5, masuk ke folder kcfinder/conf, buka file config.php. Ketik folder tempat penyimpanan anda seperti session di atas pada "uploadURL' => "..", . Misalnya saya taruh di folder image:
'uploadURL' => "../image",
Pada script paling bawah hilangkan tanda komentar pada bagian ini dan sesuaikan dengan letak tinymce:
'_tinyMCEPath' => "../tiny_mce",
Selesai, halaman admin anda telah menggunakan text editor WYGIWYS dengan upload image dan video denga KCFinder terbaru.