TinyMCE : Cara Menambah Fasilitas Upload Image

Bagi anda yang terbiasa tanpa CMS develop web sendiri, beberapa tahun yang lalu pasti pernah mengalami kendala dalam menentukan text editor WYSIWYG (what you see is what you get). Itulah masa lalu. Sekarang sudah banyak bermunculan text editor WYSIWYG yang bagus dan gratis. Salah satu text editor berbasis JavaScript yang enak digunakan adalah TinyMCE. Plugin-nya banyak, support-nya pun banyak karena cukup luas digunakan (termasuk di beberapa CMS, contohnya Joomla).

Sekarang TinyMCE sudah mencapai versi 3.3b1. Saya sendiri masih menggunakan versi 3_0. Secara default TinyMCE sudah lebih dari cukup untuk dijadikan text editor berbasis web. Walau begitu, modul untuk memfasilitasi upload dan insert image (gambar) tidak disediakan secara default. Nah, kebetulan beberapa waktu ini saya ketiban proyek pembuatan web. Tentu saja harus ada fasilitas halaman admin. Pilihan pun jatuh pada text editor ini. Namun ternyata cukup ribet agar bisa ‘mengaktifkan’ fasilitas upload gambar.

Saya asumsikan anda sudah memasang tinyMCE.init({….}) dan telah juga meng-include-kan “../jscripts/tiny_mce/tiny_mce.js“. Okey langsung saja ini langkah-langkahnya :

1) Tuliskan kode di bawah ini sebelum meng-include-kan file tiny_mce.js (Perhatian : sesuaikan dengan path anda masing-masing)

<script src="/tinymce/jscripts/tiny_mce/tiny_mce_popup.js"></script>

2) Tambahkan   file_browser_callback : ‘myFileBrowser’ di dalam tinyMCE.ini({…})

tinyMCE.init({
...
file_browser_callback : 'myFileBrowser', // <----PERHATIKAN INI !
...
})

3) Buat file dengan nama upload.php. File ini nantinya akan dijadikan pop-up yang berfungsi untuk menyimpan dan memasukkan images yang diinginkan. File ini akan digunakan di function myFileBrowser. (download di sini)

4) (sebenarnya ini masalah selera sih) Buatlah file upload-act.php untuk melakukan proses upload terhadap image yang kita pilih. (download di sini)

5) Tambahkan function myFileBrowser di dalam tag <script>…</script>

<script type='text/javascript'/>
...
function myFileBrowser (field_name, url, type, win) {
 //url='upload.php';
 //alert("Field_Name: " + field_name + "\nURL: " + url + "\nType: " + type + "\nWin: " + win); // debug/testing
 /* If you work with sessions in PHP and your client doesn't accept cookies you might need to carry
 the session name and session ID in the request string (can look like this: "?PHPSESSID=88p0n70s9dsknra96qhuk6etm5").
 These lines of code extract the necessary parameters and add them back to the filebrowser URL again. */
 var cmsURL = 'upload.php'   ;  // <-------- PERHATIKAN INI !
 if (cmsURL.indexOf("?") < 0) {
 //add the type as the only query parameter
 cmsURL = cmsURL + "?type=" + type;
 }
 else {
 //add the type as an additional query parameter
 // (PHP session ID is now included if there is one at all)
 cmsURL = cmsURL + "&type=" + type;
 }
 tinyMCE.activeEditor.windowManager.open({
 file : cmsURL,
 title : 'My File Browser',
 width : 420,  // Your dimensions may differ - toy around with them!
 height : 400,
 resizable : "yes",
 inline : "yes",  // This parameter only has an effect if you use the inlinepopups plugin!
 close_previous : "no"
 }, {
 window : win,
 input : field_name
 });
 return false;
 }
...
</script>

6) Selesai. Selamat Mencoba

***

Referensi :

• http://wiki.moxiecode.com/index.php/TinyMCE:Custom_filebrowser
• http://www.reconn.us/content/view/30/51/
• http://hadi.toekang.net/2008/04/13/tinymce-image-browser-seharian-baru-ketemuweh/
• http://php.net/manual/en/function.readdir.php

Product Review : ACER ASPIRE 4530

Saya browsing laptop dengan harga di bawah 7 juta namun dengan prosesor yang sudah dualcore. Akhirnya saya tertarik dengan Acer Aspire 4530 dengan processor AMD Turion X2 2.2GHz. Yah, itu laptop termurah dibanding merek lain dengan spek yang sebanding. Tak lama setelah itu saya langsung survey ke TKP (BEC). Sial, dollar naek !. Laptop tersebut yang asalnya dibawah 7 juta, jadi malah di atas 7 juta !.

Setelah di install OS, driver, dan JDK (tentunya), laptop-ku itu nampaknya baik-baik saja. Tapi ternyata tidak,

My Squad : Departemen Pengembangan Organisasi

Oleh : Eka Risyana Pribadi

Tulisan ini dibuat dengan tujuan mengenang segala pengalamanku mengemban amanah sebagai kepala departemen (Menteri) di Departemen Pengembangan Organisasi (DPO), KEMAKOM FPMIPA UPI. Sungguh tak terbayangkan seorang Zulkifli (Presiden Kemakom) bisa mempercayakan departemen ini kepadaku. Semua berawal ketika sekitar bulan April 2008 aku ditawari untuk bergabung di departemen ini. Mungkin salah satu alasannya memilihku karena di kepengurusan tahun sebelumnya aku duduk di DPM (legislatif) yang kebagian tugas mengawasi DPO, atau nampaknya tidak ada orang lagi yang mau menjadi kepala departemen DPO. Dan anehnya aku pun dengan gila menerima tawaran tersebut karena alasan yang tak bisa aku sebutkan di sini.

Oke, akan aku perkenalkan rekan-rekan yang selama ini berjuang bersama untuk memberikan manfaat dan sesuatu yang terbaik. Tanpa mereka perjuangan tak akan pernah ada. Dan tanpa mereka pun aku tak bisa apa-apa.

Facebook : Membuat Ketagihan dan Jadi Lupa Blogging

Oleh : Eka Risyana Pribadi

Akhirnya nulis di blog lagi. Sudah sebulan lebih aku melupakan aktifitas sebagai blogger. Create New Post, approve comment, blog walking, dll. Penyebab sempat terbengkalainya blog ini adalah :
- Maen facebook melulu
- Sibuk project terakhir di Kemakom
- Sibuk mempersiapkan Uas dan Tugas kuliah

Nah pada kesempatan ini aku akan bahas point pertama. Yaitu : Maen facebook melulu.

Dari ketiga hal di atas, memang yang paling banyak menyita waktu online adalah maen facebook. Aku sudah lama gabung di SNS itu, tapi baru ketagihan kira-kira 2 bulan yang lalu. Banyaknya temen kuliah yang punya akun di facebook membuat aku nambah napsu untuk nongkrongin terus situs itu. Terlebih dari segi programming, facebook bisa dibliang sudah canggih dan realtime. Setiap perubahan ada catatan log-nya dan bisa dikasih komentar. Mungkin itulah penyebab aku perlahan-lahan meninggalakan friendster.

Yang jelas begini, keuntungan/kelebihan ketika maen facebook :
- Bisa nambah temen (pasti)
- Bisa nyari temen lama yang gak tahu rimbanya
- Bisa sepuasnya ngasih komentar ke orang lain (karena setiap log dicatat)
- upload video / foto
- Menandai foto
- Bisa chatting dengan temen yang lagi online
- Tersedia banyak aplikasi tambahan (game dan sejenisnya)
- Bisa mengembangkan aplikasi sendiri dan di share ke orang lain
- Adanya penawaran untuk bergabung dengan group tertentu secara random
- Kita bisa melaporkan ke admin facebook jika ada content yang tidak sesuai dengan term and condition. Temenku ada yang di suspend tidak bisa add orang lain karena aku lapor ke admin tentang foto yang dia upload. heheh, kasian juga jadinya.
- Hm.. apa lagi ya ? coba saja sendiri

Oiya, sekedar promosi, halaman facebook yang punya blog ini : Eka Risyana Pribadi