[Ngoprek] TinyMCE dengan Support Upload Images

TinyMCE dikenal oleh para programmer aplikasi berbasis web. Fasilitas ini memiliki fungsi utama adalah memberikan ruangan posting dengan tampilan WYSWYG (What You See Is What You Get). Semua blog tentu memiliki halaman kolom posting textarea yang simple menyerupai MS-Word. Dengan bantuan alat ini kita dapat menambah ukuran font, dapat melakuan penggantian paragraf dan lain sebagainya. Fasilitas pendukung textarea berbasis WYSWYG ini memang cukup banyak. Bermodalkan Ajax/Javascript, fasilitas ini benar-benar enak digunakan. Contoh selain TinyMCE adalah Rte dan FckEditor.

TinyMCE bukan tanpa masalah. Bersama teman-temannya itu, TinyMCE ternyata masih belum support dengan upload image..(entah kalau keluaran sekarang). Proses menyertaan gambar masih harus dilakukan sendiri-sendiri, kemudian baru dilakukan insert URL dari Image tersebut... Setelah googling-googling sana sini dan belum dapat yang 'simpe' untuk pengguna biasa, akhirnya saya mencoba melakukan modifikasi, dan disini saya tadi mencoba oprek beberapa file dan akhirnya... sepertinya bisa dikatakan berhasil dengan beberapa catatannya.

TinyMCE editan sana-sini ini, memiliki kemampuan :

1. Melakukan pemilihan filetype Image. Disini tidak digunakan filter Extension, tapi digunakan filter Filetype. Ini jauh lebih aman, menghindari jika pengguna mengupload file web-executable tetapi mengelabui dengan extension image. Image yang dipilih adalah jpeg, png, dan gif. Extension apapun akan tetap dapat masuk, jika filetype sesuai
2. langsung melakukan penyertaan gambar pada postingan. Namun untuk file yang tersimpan di localhost masih menggunakan "/filedir/image.jpg" bukan "http:/dir/filedir/image.jpg"
3. Resize Image pada bagian posting.
   

Nah berikut contoh gambar dalam melakukan inserting gambar. Proses ini akhirnya menjadi mirip dengan proses dalam memasukkan image di blog-blog, termasuk Multiply


Gambar 1. Tampilan pertama TinyMCE

'
Gambar 2. Tampilan insert gambar. Pada TinyMCE biasa hanya memasukkan ImageURL



Gambar 3. Tombol Browse



Gambar 4. Muncul halaman upload





Gambar 5. Memilih File



Gambar 6. Seluruh gambar yang ada pada direktori Uplad Image akan tampil



Gambar 7. Akan ditampilkan file yang telah diupload





Gambar 8. Halaman Konfirmasi tentang informasi data Image


Gambar 9. Image berhasil disertakan dalam posting.


Untuk pengguna TinyMCE, hanya perlu melakukan beberapa hal.. yaitu

1. Sebaiknya menyertakan tinyMCE pada direktori tertentu. Untuk kasus pada aplikasi saya, saya letakkan di bawah direktori libs.
   
   /index.php
   /images
   /files
   /scripts
   /libs/
         -tinyMCE_img_support/
                                          /tinymce
                                          /additional
                                          /tinyMCE.conf.inc.php
                                          /tinyMCE.func.inc.php
   
   
   
2. Menyertakan modul tinyMCE_init sebelum membentuk textarea. Dalam aplikasi ini, developer hanya perlu men-include file tinyMCE.func.inc.php, yang di dalamnya terdapat tiniMCE init, yang diletakkan dalam module PHP tinyeditor().
   Contoh:
   
   
   <?php
   include "libs/tinyMCE_img_support/tinyMCE.func.inc.php";
   
   tinyeditor();
   ?>
   <form name="coba" action="test.php" method="post">
   <textarea name="berita" id="elm1"></textarea>
   </form>
   
   
   Bagian yang ditebali ini akan menjadi WYSWYG
   
   
3. Menggunakan id="elm1", atau "elm2" dan seterusnya untuk element textarea yang akan ditampilkan sebagai elemen WYSWYG
4. Menentukan letak direktori image, dan base url. seperti berikut
   
   
   $filedir = "/var/www/tinyMCE_img_support/bmsimages";
   $baseurl = "http://localhost/tinyMCE_img_support/";
   $basetiny_image_url = "http://localhost/tinyMCE_img_support/bmsimages/";
   
   
   $kb_size = 1000; //SIze of your image
   $oversize_error = "File anda tidak boleh lebih dari $kb_size;";
   
   
   
   
5. Memastikan bahwa direktori image, writeable terhadap Web Server.

Nah mudah kan? Hanya perlu meng-include function, dan menentukan kevalid-an direktori tempat upload...


Anda dapat mendowload DISINI