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!