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 :
- 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
- langsung melakukan penyertaan gambar pada postingan. Namun untuk file yang tersimpan di localhost masih menggunakan "/filedir/image.jpg" bukan "http:/dir/filedir/image.jpg"
- Resize Image pada bagian posting.
![](http://multiply.com/mu/bimosaurus/image/1/photos/60/600x600/8/tinyURL1.png?et=c5FelYfBhecJ0IWpFXUAEA&nmid=460227814)
Gambar 1. Tampilan pertama TinyMCE
![](http://multiply.com/mu/bimosaurus/image/1/photos/60/600x600/9/tinyURL2.png?et=od4a2WjFvKWWSGF8jLFNOg&nmid=460227814)
Gambar 2. Tampilan insert gambar. Pada TinyMCE biasa hanya memasukkan ImageURL
![](http://multiply.com/mu/bimosaurus/image/1/photos/60/600x600/10/tinyURL3.png?et=TEDS7pL2LGSnVHsHS65fGA&nmid=460227814)
Gambar 3. Tombol Browse
![](http://multiply.com/mu/bimosaurus/image/1/photos/60/600x600/11/tinyURL4.png?et=GZGI3cbyeYLbEYo9sFT0GA&nmid=460227814)
Gambar 4. Muncul halaman upload
![](http://multiply.com/mu/bimosaurus/image/1/photos/60/600x600/12/tinyURL5.png?et=10DVCk%2BIQcmG87fGm7mEXA&nmid=460227814)
Gambar 5. Memilih File
![](http://multiply.com/mu/bimosaurus/image/1/photos/60/600x600/13/tinyURL6.png?et=d21EGtBathZFHgpY6NKZXQ&nmid=460227814)
Gambar 6. Seluruh gambar yang ada pada direktori Uplad Image akan tampil
![](http://multiply.com/mu/bimosaurus/image/1/photos/60/600x600/14/tinyURL7.png?et=aSRqL7p04PjnN76ft3Hfdg&nmid=460227814)
Gambar 7. Akan ditampilkan file yang telah diupload
![](http://multiply.com/mu/bimosaurus/image/1/photos/60/600x600/15/tinyURL8.png?et=4xaNuCNJFwhWiaZqbDwBfg&nmid=460227814)
Gambar 8. Halaman Konfirmasi tentang informasi data Image
![](http://multiply.com/mu/bimosaurus/image/1/photos/60/600x600/16/tinyURL9.png?et=qgFw890xIrTzQoyoHglHyw&nmid=460227814)
Gambar 9. Image berhasil disertakan dalam posting.
Untuk pengguna TinyMCE, hanya perlu melakukan beberapa hal.. yaitu
- 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 - 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 - Menggunakan id="elm1", atau "elm2" dan seterusnya untuk element textarea yang akan ditampilkan sebagai elemen WYSWYG
- 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;"; - Memastikan bahwa direktori image, writeable terhadap Web Server.
Anda dapat mendowload DISINI
Naaaah daripada cari yang berbayar agar bisa upload gambar... silakan download... gratis, sudah dioprek berbagai macam tangan, mudah pakenya
Pertamax makin susah.. karena para jamaah MUI berebut halal
BalasHapusada gambar kelinci lagi
BalasHapusTag dulu..
BalasHapusHalah ini ini udah belibet ya.
Liat pake direktori artinyaa pake framework
beasok dah di download n cobain, liat pake hp.
itu memang dari pembuat tiny nya kok... itu semua javascript... kita nggak mbuat, cuma modif aja
BalasHapuskenapa harus sby gambar contohnyah
BalasHapusIjin menyimak
BalasHapusWoooi dini hari liat kelinci jangan mikir majalah kelici, di keplak saat pulang tau rasa deh haha
BalasHapusyang lain gambarnya porno mbak :D
BalasHapussiap mas, untuk yang dasar html tak siapin kiye
BalasHapuspulang kemana ?? jadi takut
BalasHapusiya nihhhh...
BalasHapuskenapa gak gambar BBM haram ajaaaa.... #manyun
sorry mas, nggak bisa dapat gambar premium... maklum yang jualan premium milih pada resign... takut nggak berkah
BalasHapuskok aku saiki mumet nek maca script2 ngene iki, rasane tambah dudul wae
BalasHapushmm,,.. Like this!
BalasHapusmasih belom ngerti penggunaannya elm1 elm2 untuk apanya :(
BalasHapusexample.nya penggunaan sampe elm10 dong
*ngikik*
aku yo mumet kok mas hahahahaa
BalasHapusterima kasiih.... semoga bermanpangat...
BalasHapusNgene dik... Ini adalah masalah bahasa Pemrograman web aja..
BalasHapusBahasa pemrograman web dibagi menjadi dua..
1. Bahasa Server Side
2. Bahasa Client Side
Kesamaan dua duanya adalah: mereka megambil input dan selanjutnya diproses dan jadilah output matengannya.
Perbedaannya adalah
Bahasa Server Side ini mengolah di sisi server. Paling enak aku ambil adalah PHP. PHP menerima masukan dalam bentuk POST, GET, COOKIES, SESSION dan lain sebagainya. Masukan ini kemudian diolah dalam sisi yang prosesnya maupun sintaksnya tidak terlihat dalam sisi client. Misalnya: Query database. Tentu Client tidak boleh tahu dan tidak bisa tahu variabel apa saja yang berjalan di script PHP. Untuk POST dan GET, PHP mengambil elemen web melalui NAME nya.. contoh
<input type="text" name="nomer_HP" style="width:100px; background: #fea;" onclick="return confirm('Bener mau lanjut cah elek??')";>
maka setelah disubmit, tentu name itu akan di proses di PHP...
Sedang Bahasa Client Side ini bekerja di sisi browser. Dia memanipulasi tampilan dan juga melakukan pekerjaan yang mempermudah kerja server. Contohnya adalah Javascript dan VBScript. JavaScript berkembang pesat menjadi Ajax dan JQuery. CSS bisa dikatakan Client Side, tapi dia bukan programming language. Bahasa client side ini akan melakukan manipulasi tampilan berdasarkan : id elemen, class elemen, jenis dan juga boleh name juga.
Misalnya :
<div id='satu' class='coba'> HALO </div>
JavaScript dan css bisa melakukan manipulasi tampilan seperti memutar, memberi warna, dan lain sebagainya dengan cara mengambil id atau class dan selanjutnya diproses langsung di browser. Kelemahan bahasa ini adalah... Harus banyak mengakomodasi browser.
DIsini TinyMCE menggunakan pengambilan id adalah ELM untuk dimanipulasi di core tinyMCE nya..., dibentuk dengan css dia sendiri, diberi tanda tanda pengerjaan dan sejenisnya...
Piye?