Penerapan TinyMCE Sebagai Sebuah Tool Editable yang Handal pada Sebuah Website

Mamba Andi Pramuri Universitas BSI Bandung denmamba@gmail.com

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 enewspaper, 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. 2. 3. 4. 5. 6. 7. Easy to integrate, kemudahan intergrasi dengan website biasa, hanya dengan menuliskan beberapa sintaks saja. Customizable, memiliki banyak theme dan plugin sehingga bisa diubah sewaktu-waktu Browser friendly, dapat berjalan dibeberapa browser populer seperti Mozilla, MSIE, FireFox, Opera, Safari dan Chrome. Lightweight, dirancang dengan beberapa bahasa pemprograman seperti PHP/.NET/JSP/Coldfusion, menjadikan TinyMCE 75% lebih ringan dan cepat. AJAX Compatible International didukung dengan beberapa bahasa dari berbagai negara. 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,non breaking,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. Mendukung konsep content management system (CMS) yang kini menjadi tren website dinamis. Efisiensi waktu serta tampilan yang menarik ketimbang textarea biasa yang dimiliki HTML. User friendly, sehingga bisa digunakan oleh orang awam tentang komputer sekalipun.

2. 3. 4.

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-diruby-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)