Dalam membuat situs web yang dinamis, yang kontennya diharapkan dapat secara rutin diupdate, satu hal yang harus dipikirkan oleh pemrogram web ialah kemudahan pengisian konten. Ambil saja contoh, sebuah situs berita. Pemrogram web situs berita tersebut harus dapat menciptakan antarmuka yang mudah digunakan untuk memasukkan berita.
Dengan menggunakan Content Management System, terutama yang biasa digunakan untuk pembuatan blog seperti Wordpress, tentunya hal ini tidak perlu kita pikirkan lagi. Tapi, bagaimana jika kita ingin membangun script untuk situs web kita sendiri dari nol?
Untuk membuat antarmuka pengisian artikel, biasanya kita menyediakan form dengan menggunakan tag “textarea” sebagai tempat memasukkan konten berita. Dengan menggunakan tag ini, kita dapat memasukkan berita dalam bentuk plain text dengan jumlah karakter yang besar. Kita pun dapat memasukkan kode-kode HTML untuk mengatur layout, format teks, serta tipografi berita tersebut.
Namun, menggunakan sistem pengisian berita dengan tag-tag HTML tidak semudah itu. Selain tidak praktis, tidak semua orang menguasai kode HTML. Ini tentunya menjadi kendala jika kita mempercayakan orang yang tidak mengerti kode HTML untuk menjadi seorang kontributor ataupun penulis berita yang langsung diberi akses ke halaman antarmuka pengisian berita tersebut.
Salah satu solusi hal ini ialah dengan menyediakan sebuah editor WYSIWYG (What You See Is What You Get) dalam antarmuka pengisian berita di situs web kita. Dengan editor WYSIWYG ini, seorang yang hendak mengisi berita akan dihadapkan dengan form yang dilengkapi berbagai toolbar untuk melakukan pemformatan teks serta paragraf, penambahan tautan, sampai memasukkan gambar ke dalam teks. Setiap kali kita melakukan pemformatan, editor secara otomatis menambahkan atau mengurangi kode HTML di belakang layar, sedangkan yang ditampilkan kepada pengguna ialah hasil pemformatannya (Rich Text Format) atau mendekati preview tampilannya dalam halaman web. Cara inilah yang biasa diterapkan dalam CMS atau situs-situs penyedia hosting blog.
Beberapa waktu yang lalu penulis sempat mencari source code WYSIWYG editor yang bagus di internet. Di era gratisisme ini (meminjam istilah Pak Gora 
, ternyata cukup banyak tersedia source semacam itu di internet. Namun sayangnya banyak yang kurang sempurna ataupun tidak dilengkapi dokumentasi yang rapi.
Tapi ada satu source yang penulis nilai cukup, bahkan sangat bagus. Ternyata setelah berputar-putar, yang saya temukan tidak jauh dari WordPress. Source code yang penulis maksud tersebut ialah TinyMCE, sebuah editor rich text atau WYSIWYG yang digunakan dalam WordPress (CMS yang menghidupkan blog ini).
TinyMCE merupakan pustaka (library) editor WYSIWYG HTML yang berbasis Javascript. Ini membuatnya tidak terikat pada platform sistem operasi maupun web server tertentu. TinyMCE dikembangkan oleh Moxiecode Systems AB dan dapat diunduh di situs web TinyMCE atau di tempat pengunduhan kode open source terbesar – SourceForge.net.
Instalasi TinyMCE cukup mudah. Cukup dengan mengekstrak file kompresi yang diunduh dan menguploadnya ke server web kita. Kemudian kita panggil file javascript TinyMCE yang berisi fungsi-fungsi editor WYSIWYG ke dalam halaman web kita (halaman yang hendak diberi editor WYSIWYG) serta menambahkan perintah untuk menginisiasi TinyMCE.
Berikut contoh kode halaman yang dilengkapi dengan editor WYSIWYG TinyMCE:
<html>
<head>
<title>TinyMCE Test</title>
<script language=”javascript” type=”text/javascript” src=”../jscripts/tiny_mce/tiny_mce.js”></script>
<script language=”javascript” type=”text/javascript”>
tinyMCE.init({
mode : “textareas”
});
</script>
</head>
<body>
<form method=”post”>
<textarea name=”content” cols=”50″ rows=”15″>This is some content that will be editable with TinyMCE.</textarea>
</form>
</body>
</html>
Kode di atas ialah kode HTML biasa yang diberi tambahan baris untuk memanggil javascript dari TinyMCE dan menginisiasinya (kode yang dicetak tebal). Lokasi file “tiny_mce.js” pada contoh di atas tentunya harus disesuaikan dengan lokasi sebenarnya file tersebut di server. Dengan adanya kode yang dicetak tebal tersebut, setiap tag “textarea” akan secara otomatis dirubah menjadi sebuah editor WYSIWYG.
Berikut preview dari kode di atas:
Dengan mengubah nilai-nilai dalam perintah tinyMCE.init(), kita bisa merubah tag sasaran yang akan dirubah menjadi editor WYSIWYG, memilih theme, menambahkan tombol-tombol, sampai menambahkan plugin serta mengatur konfigurasi lainnya. Semuanya tergantung dari kebutuhan situs web Anda. Keterangan lebih lanjut mengenai ini dapat dibaca pada dokumentasi yang disertakan dalam file archive TinyMCE.
Isi text dalam tag “textarea” yang kita rubah menjadi editor WYSIWYG berisi kode-kode HTML. Untuk mengirimkannya ke server, cukup menggunakan <input type=”submit” name=”[nama_textarea]“> seperti biasa. Misalkan pada contoh di atas, kita menggantikan “[nama_textarea]” dengan “content”.
Selamat Mencoba!
wahh,, manteb ulasannya,,,
cocok nih bagi para pengguna wordpress,,
Lho… ya nggak to. Malah pengguna Wordpress gak perlu make, coz udah dibundle jadi satu dengan file distribusi WordPressnya.
Justru ini lebih cocok buat para developer web yg pengen bikin CMS sendiri
Aku udah pernah pake tinyMce dia menggantikan semua text area dengan WYSIWYGnya…. sayangnya gak bisa difilter mana yang pake n mana yang gak perlu.
Kebetulan aku peke tinyMCE di CMS ku (namanya: kereator), pake SIMPLE AJAX implementation, jadi semua full AJAX. cuman ada kendala java scriptnya gak mau jalan kalo text areanya kita load pake AJAX. Belum nemu solusinya sih…… karena dia sendiri pake java script yang ada inisialisasi di saat ngeload page. Harusnya bisa inisialisasi editornya kapan saja.
Target elemen yg bisa dijadikan editor kan tidak terbatas pada textarea. Bisa juga kamu tunjuk <div> tertentu
Aku agak lupa gimana cara mem-parse isi textarea ke variabe javascript. Tapi ketok’e emang textarea gak punya property .value (mboh ding…
). Textarea jg gak punya .innerHTML. Coba kamu pake <div>. Mengenai cara makenya baca aja di documentation.
Btw SIMPLE AJAX Implementation yg kamu maksud itu yg make sistem hidden frame atau HTTP Request sih? Sory, aq blm baca
Kalau soal inisialisasi TinyMCE yg pada saat ngeload page, aku gak tau ya apa bisa diakalin. Tapi kalau kamu pengen munculin editor pada saat-saat tertentu, kenapa gak kamu sembunyiin aja dulu editornya, baru ketika ada event tertentu dimunculin? Hehehe..
Coba liat dong CMS yg kamu bikin..
Aku juga bikin CMS dari nol untuk situs BEM FK Undip. Tapi setelah aku liat2 n membedah script2 CMS lain, tyt emang CMSku masih amburadul
.
TinyMCE senjata para developer web… lebih ringan ketika di-load ketimbang WYSIWYG editor yang laen..
kok saya lebih seneng manual ya? WIWIWIG
yup.. aku juga lebih suka gitu. Lebih leluasa.. lebih dari sekedar menulis, bisa melukiskan halaman dengan kode-kode.
Kata WordPress: Code is poetry.. tul gak?
Tapi ini bener2 bermanfaat kalo situs kita yg ngisi bukan orang2 yg mengerti HTML..
What I Write Is What I Get? Hmm… bagus juga
setuju sama chocoluv. lebih suka manual..
komentar sy buat mas zam sama kayak buat chocoluv
klo buat situs pribadi sih OK OK ajah
Wah artikel bagus.. kbetulan saya mampir sini pas googling tinymce..
sebenernya saya lagi cari alternatif yang lebih simple dari tinymce, coz file sourcenya gede hehe.. tapi karena powerfull akhirnya saya pake juga pada situs web pribadi saya.
selama ini yang bikin males update artikel dan blog ya salah satunya penulisan kode ini.. dengan tinymce kita bias lebih fokus ke konten tanpa perlu repot2 mikir kode
jadi kalo saya, urusan begini lebih enak yang otomatis hehe
trims
Trims… yup memang powerfull dan extensible.. dan TinyMCE jg ada compressornya kok. sebenernya gak berat2 amat.
Iya.. tinggal menyalukan inspirasi ke jari2 tangan tanpa perlu mencampur-adukkan dengan logika-logika kode HTML
CMS yg Anda pakai buatan sendiri ya? sipp euy.. klo memang Anda pengen berkonsentrasi lebih ke konten, kenapa gak make CMS yg jadi aja?
Trims, Ya sejauh ini se CMS ku udah cukup memenuhi kebutuhan. Lagian itu dibikin dulu pas semangat2 nya, pas idealis bgt, dimana segalanya harus dikerjain sendiri from scratch.. anti produk jadi apalagi template..hihi
Tapi belakangan untuk urusan non desain (aplikasi backend), jadi lebih terbuka ama produk jadi.. nyoba2 engine Wordpress, Drupal ato Joomla, dll..
kudu lebih realistis lahh hehe
jadi bisa fokus ke satu hal tanpa perlu buang2 tenaga….
Lagian yang kayak wordpress gini desainnya very customizable, ya gak
masih user wordpress pemula neh..
salam dari Malang
Sang kyou veri machi bwt infonya http://www.hudatoriq.web.id/smilies/yahoo_bigsmile.gif
Saya pengen tanya tentang masalah TinyMCE dg Form AJAX. saya mengalami kesulitan saat penanganan TinyMce saat akan disimpan dg ajax. saat saya mengambil isi dari textarea, nilainya selau kosong.
jadi begini:
saya membuat form dg textarea sbg tempat menaruh tinymce kmd, saya kasih button[bukan submit] yg akan menjalankan script ajax yg menyimpan data ke server melalui ajax. Tetapi value dari textarea tsb kosong.
mohon bantuannya./kirim ke email: deffleo@yahoo.com.
trims banyak.
Jujur saya belum pernah nyoba ngutak-atik untuk memperluas kemampuan TinyMCE.
Tp seandainya informasi yang Anda berikan lebih detail mungkin saya bisa membantu.
Bagaimana Anda menangkap isi textarea tersebut? Apakah secara manual menggunakan statement Javascript standar, atau menggunakan kerangka kerja Javascript tertentu (semisal prototype.js ataupun jquery.js)? Bisa dilampirkan sintaksnya?
saya masih bingung bila melampirkan gambarm gimana cara uploadnya ?
gimana ya cara taruh audio streaming embed html(flash file) di dalam posting wordpress ? ane dah taruh code nya tp pas di update repiew kok malah keliatan code nya ga kayak di blogger klo di taruh embed code lgsg auto detect(musik nya lgsg jln)
Emang kesukaan orang berbeda-beda, tp Artikel ini bener2 bermanfaat toh Wysiwyg editor kan bisa pilih SOURCE (Bisa ketik tag HTML) jd ga ada salahnya pake.
Kalo gi malas atau bad mood ngetik tag html bisa digunain, bukan begitu??
Yg jelas dengan adanya Wysiwyg editor sangat membantu sekali koq..
Cool artikel. Semangat mas huda
mazz mo tanyaaa caranya nambahin gambarnya gemana to aq udah coba ber kali-kali tapi gambar gak nampil-nampil kalau didrag diliat di mozila gak muncul tapi kalo pake IE koq muncul gimana dunXXXX
@hariz:
gambar apa y? Bisa lebih jelas maksudnya?
dah maz udah ketemu, kemaren udah aku akhirnya utak-atik ketemu dach. yg dimksud gambarnya tu, kan misal mo bkin tutorial yang mo diposting kan biasanya pake gambar. nha insert gambar lewat tiny_mce nya tu kren aku mmasih bingung. tapi sekarang udah nggak koq.hehehehe
Mas bisa minta tulung dijelasin dunk, secara lebih detail lagi,
setelah kita kirim yang kita pake code htmlnya atau script tamplannya?
trus cara makenya (namiplkan) gimana??
masih bingung banget nih,,,maklum masih pemula…..
caya coba tampilkan pke
yang nampil cuma text gambar gak nampil…..
intinya saya masih bingung penggunaannya….
makasih sebelumnya….
berminggu minggu nyari di google dengan berbagai kata kunci, akhirnya ketemu juga ni artikel.
mau nyoba dulu, entar kalo gak jalan, bisa nanya dong ya..
matur nuwun
Toloooooong, aku pernah bikin wapsite di wen.ru . Lalu aku beri gambar dg menggunakan javascript. Lalu aku coba lihat hasilnya melalui operamini. Dan hasilnya memuaskan,gambarnya bisa muncul.,tapi ketika aku lihat melalui browser ponsel kok gmbarnya gak muncul,,. Gimana ya cara mengatasinya?Agar gmbarnya dpt muncul jika dilihat melalui browser ponsel, pdahal di browser ponsel sudah disetting untuk dapat menampilkan poto.,Plizzz bantu aku donk,,, Bagi saudaraku yang punya jawaban atas pertanyaanku tadi,tolong kirim emailnya,plizzz, alamat emailku abdi.nugroho57@yahoo.co.id ,thx aku tunggu
Toloooooong, aku pernah bikin wapsite di wen.ru . Lalu aku beri gambar dg menggunakan javascript. Lalu aku coba lihat hasilnya melalui operamini. Dan hasilnya memuaskan,gambarnya bisa muncul.,tapi ketika aku lihat melalui browser ponsel kok gmbarnya gak muncul,,. Gimana ya cara mengatasinya? Agar gmbarnya dpt muncul jika dilihat melalui browser ponsel, pdahal di browser ponsel sudah disetting untuk dapat menampilkan poto., Bagi saudaraku yang punya jawaban atas pertanyaanku tadi,tolong kirim emailnya,plizzz, alamat emailku abdi.nugroho57@yahoo.co.id ,thx aku tunggu
ada yg tau arti dari WYSIWYG ?
@Fajar LESmana
What You See Is What You Get. Kan sudah saya cantumkan di atas kepanjangannya
. Untuk lebih jelasnya coba klik di sini:
http://en.wikipedia.org/wiki/Wysiwyg
kalo modulnya pengen custom gimana ya? soalnya banyak tombol2 yang gak perlu?
kl utk insert image biar langsung gambar yang diinsert diupload pada folder yang kita inginkan misal….images/nama file gambar
tinymce memang bagus, tetapi kenapa penggunaannya pada pembuatan web ketika halamn dari submit tinymce ketika di refresh pakai localhost langsung hilang, mohon bantuannya, agr ketika tinymce word di submit tetap ada ahalamn ketika disubmit giman caranya?