penerapan tinymce sebagai sebuah tool editable
TRANSCRIPT
Penerapan TinyMCE Sebagai Sebuah Tool Editable yang Handal
pada Sebuah Website
Mamba Andi Pramuri
Universitas BSI Bandung
Abstrak Internet menjadi infrastruktur penting dalam menyalurkan kebutuhan akan informasi yang sangat cepat, akurat,
dan handal. Website, email, dan jejaring sosial adalah diantara elemen yang berperan didalamnya. Website yang
berisi muatan-muatan informasi yang memperbaharui (up to date) mampu memenuhi kebutuhan pengguna (user)
dalam mendapatkan informasi.
Pembaruan informasi kini tidak hanya dilakukan setiap hari, tetapi setiap detik orang bisa dengan mudah serta
murah mengakses informasi yang terdapat dalam sebuah website. Semakin dinamis sebuah website menayangkan
berbagai informasi, akan semakin menambah nilai lebih yang akan meningkatkan kunjungan pengguna internet pada
website tersebut.
Maka untuk mempermudah pembaruan website perlu adanya alat bantu (tools) yang berfungsi menyunting
website agar selalu menampilkan informasi terkini. Semakin handal tools yang digunakan, semakin cepat pula
informasi yang dapat dihadirkan oleh sebuah website sehingga akan meningkatkan popularitas website tersebut bagi
para pengguna internet.
Kata Kunci: internet, website, tinymce, tools editable
Pendahuluan Tren website yang dinamis kini menjadi kebutuhan di dunia maya, sebab banyak media-media informasi seperti
surat kabar, majalah, bahkan radio yang memperluas pangsa pemirsa mereka. Pada umumnya media-media tersebut
mengubah kebiasaan penyiarannya menjadi berbasis internet/online yang kini banyak dikenal dengan sebutan e-
newspaper, e-magazine, dan podcaster.
Solusi dari tren tersebut ialah mempersiapkan dan menggunakan alat bantu edit yang disebut tinyMCE.
Penerapan tools ini populer pada website-website yang berbasis Content Manangement System (CMS). Tetapi bukan
mustahil bila tinyMCE juga diterapkan pada website yang kita bangun sendiri karena selain mudah dalam
penggunaan dan penerapannya, juga tinyMCE bersifat sumber terbuka (open source).
Apa itu tinyMCE ? Susunan struktur tinyMCE dibangun dengan javascript dan HTML yang diperuntukkan membangun sebuah
website dinamis. TinyMCE berkonsep WYSIWYG (What You See Is What You Get) editor yang memiliki
kemampuan mengubah textarea HTML biasa menjadi editor instan serupa Microsoft Word.
Tujuh fitur yang dimiliki tinyMCE diantaranya:
1. Easy to integrate, kemudahan intergrasi dengan website biasa, hanya dengan menuliskan beberapa sintaks saja.
2. Customizable, memiliki banyak theme dan plugin sehingga bisa diubah sewaktu-waktu
3. Browser friendly, dapat berjalan dibeberapa browser populer seperti Mozilla, MSIE, FireFox, Opera, Safari
dan Chrome.
4. Lightweight, dirancang dengan beberapa bahasa pemprograman seperti PHP/.NET/JSP/Coldfusion,
menjadikan TinyMCE 75% lebih ringan dan cepat.
5. AJAX Compatible 6. International – didukung dengan beberapa bahasa dari berbagai negara.
7. Open Source – berupa sumber terbuka dibawah lisensi LGPL
Instalasi tinyMCE Sebelum melakukan instalasi, yang diperlukan adalah mengunduh tinyMCE dari alamat
https://sourceforge.net/projects/tinymce/files/TinyMCE/3.3.8/tinymce_3_3_8.zip/download kemudian ekstrak pada
directori yang diinginkan. Langkah selanjutnya salin kode dibawah ini dan sisipkan pada halaman yang akan
digunakan sebagai editor website atau script bisa diunduh di http://tinymce.moxiecode.com/examples/full.php#
<!-- TinyMCE -->
<script type="text/javascript" src="js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
skin : "o2k7", skin_variant : "silver",
plugins :
"safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,prev
iew,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xh
tmlxtras,template",
// Theme options
theme_advanced_buttons1 :
"bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsiz
eselect",
theme_advanced_buttons2 :
"copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,imag
e,cleanup,code,|,preview,|,forecolor,backcolor",
theme_advanced_buttons3 :
"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,media,advhr",
theme_advanced_buttons4 :
"insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
// Drop lists for link/image/media/template dialogs
//template_external_list_url : "lists/template_list.js",
//external_link_list_url : "lists/link_list.js",
//external_image_list_url : "lists/image_list.js",
//media_external_list_url : "lists/media_list.js"
});
</script>
<!-- /TinyMCE -->
Gambar 1. List sintaks tinyMCE
Setelah kode diatas disisipkan pada halaman yang diinginkan, refresh halaman tersebut sehingga hasilnya
seperti gambar dibawah ini:
Gambar 2. Tampilan editor tinyMCE
Fitur-fitur edit yang terdapat dalam tinyMCE sangat mudah digunakan (user friendly). Sekilas tampilannya
mirip dengan Microsoft word 2003. Pada prinsipnya penggunaan tinyMCE dimaksudkan agar adminstrator sebuah
website tidak perlu direpotkan dengan sintaks-sintaks HTML. Contohnya untuk menampilkan huruf tebal seorang
admin cukup dengan menyorot teks yang akan ditebalkan, kemudian mengklik simbol tidak
perlu lagi menulis sintaks “<b>teks yang dicetak tebal</b>”.
Manfaat tinyMCE
Beberapa manfaat yang didapat dari fitur-fitur yang dimiliki tinyMCE ialah:
1. Untuk mengedit sebuah tulisan yang akan dimuat pada website, tidak perlu memiliki kemampuan yang
mumpuni tentang HTML, sebab penggunaan tinyMCE layaknya editor word biasa yang sering digunakan pada
komputer.
2. Mendukung konsep content management system (CMS) yang kini menjadi tren website dinamis.
3. Efisiensi waktu serta tampilan yang menarik ketimbang textarea biasa yang dimiliki HTML.
4. User friendly, sehingga bisa digunakan oleh orang awam tentang komputer sekalipun.
Kesimpulan
Tools editor semacam tinyMCE bisa sangat berguna dalam perancangan aplikasi website yang berkonsep pada
Content Management System, sehingga siapapun kini tidak hanya berperan sebagai pengguna aplikasi CMS seperti
Joomla, Drupal, Jupiter, dan sebagainya tetapi lebih jauh mampu merancang sebuah aplikasi CMS dimasa
mendatang. Sehingga website yang dinamis akan memberikan informasi yang dinamis pula.
Penerapan tinyMCE yang mudah bisa digunakan diberbagai platform seperti HTML, PHP, javascript bahkan
digabungkan dengan website berbasis flash. Pada hakikatnya, website kedepan akan lebih menonjolkan sisi
informasi, manajemen konten, pengaturan tema, serta memanjakan pengguna internet dengan informasi yang di
update setiap waktu, real time dengan tanpa mengurangi akurasi dari muatan informasi tersebut. Bukan hal yang
mustahil bila media online bisa jadi tren paperless yang menggantikan media cetak.
Daftar Pustaka
Niwatori. “TinyMCE di Ruby on Rails”. Diambil dari http://chickenstrip.wordpress.com/2008/07/17/tinymce-di-
ruby-on-rails/ (17 Juli 2008)
Cobain, yans. “Upload Image TinyMce”. Diambil dari
http://forumphp.web.id/viewtopic.php?p=34462&sid=ba0943087216d7ed33f9c76ed6b825c6 (17 April 2010)
Anoname. “tinyMCE API”.
http://tinymce.moxiecode.com/js/tinymce/docs/api/index.html#class_tinymce.ui.ColorSplitButton.html (28 Juli
2010)
Azami, Muhammad Khairul. “Instalasi Word Processor tinyMCE – WYSIWYG”. Diambil dari
http://www.ilmuwebsite.com/tutorial-php/instalasi-word-processor-tinymce-wysiwyg (28 Juli 2010)