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 :

18 thoughts on “TinyMCE : Cara Menambah Fasilitas Upload Image

  1. Terima kasih banyak mas, berguna sekali untuk membangun CMS saya sendiri. Boleh saya jadikan landasan pengembangan untuk CMS saya khan? lisensi nya apa ni?

  2. Iy setelah saya coba, tinymce memang sangat membantu dan terasa powerful, tapi saya msh bingung, untuk customize biar resize kolom Tinymce nya ga aktif gmn ya??? mohon pencerahan..🙂

  3. mas saya sudah bisa upload tapi pas di tampilkan gambarnya ga bisa tampil padalah di databasenya sudah tersimpan kenapa yah itu

  4. mas pada saat mw browse koq muncul ini???
    ” Warning: opendir(../../media/) [function.opendir]: failed to open dir: No such file or directory in C:\xampp\htdocs\bold\text_editor\upload.php on line 48

    Warning: readdir(): supplied argument is not a valid Directory resource in C:\xampp\htdocs\bold\text_editor\upload.php on line 49 ”
    trus wktu saya coba upload ….muncuL ” Warning: copy(../../media/1310021274.jpg) [function.copy]: failed to open stream: No such file or directory in C:\xampp\htdocs\bold\text_editor\upload-act.php on line 54

    Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\bold\text_editor\upload-act.php:54) in C:\xampp\htdocs\bold\text_editor\upload-act.php on line 66 ”

    mohon bantuannya mass..
    makasihhh sbLumnya…..

  5. sangat bagus sekali…. saya dari kemarin pusing nich mas nyari upload imagenya gak jalan2… good… good posting….
    like this…

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s