TinyMCE, WYSIWYG Web Based Editor Tutorial
On March 06, 2008 in Coding, Daily Journal, Design, Development, Web Design
WYSIWYG (What You See Is What You Get) Web Based Editor merupakan editor yang sering digunakan di banyak blog engine atau CMS (Content Management System) dalam dunia web development. kenapa dikasih nama WYSIWYG? ya karena emang sesuai sama artinya: “Apa yang kau lihat adalah apa yang kau dapatkanâ€. Artinya dengan menggunakan editor ini kita bisa sesuka hati mengedit kontent / isi kita layaknya ketika mengetik di aplikasi Office (Open Office, Ms. Word). Pengertian dari WYSIWYG secara lengkap ada disini (Wikipedia).
“Kita bisa memasukkan gambar, mengedit style, size dari font, menambahkan hyperlink, dan bahkan bisa menambahkan tabel dan gambar.â€
Kali ini saya akan mereview penggunaan dari salah satu WYSIWYG Editor ini yang berbasis Javascript. Kelak ketika suatu saat kita harus membuat web yang didalamnya disertai dengan Content Management System, kita sudah tau kemana harus mencari Editor pengganti textarea ini.
TinyMCE
Namanya adalah TinyMce. Salah satu blog engine yang menggunakan plugin Editor ini adalah wordpress.com (kebetulan engine blog wae ini juga menggunakan wordpress). TinyMCE merupakan library platform javascript yang digunakan sebagai HTML WYSIWYG Editor. Dirilis opensource dibawah lisensi LGPL dari Moxiecode Systems AB. Cara kerja dari TinyMCE adalah dia (tinymce) akan mengganti (convert) HTML Textarea standar menjadi sebuah WYSIWYG Textarea Editor, dan dapat dengan mudah sekali kita integrasikan ke dalam website kita yang berbasis Content Management System.
Langkah - Langkah integrasi TinyMCE ke dalam halaman Web.
Langkah1: Download & Ekstrak
- Download TinyMCE Versi terbaru (saat tulisan ini ditulis versi 3.0.3) http://tinymce.moxiecode.com/download.php
- Download Main Package dari TinyMCE http://prdownloads.sourceforge.net/tinymce/tinymce_3_0_3.zip?download
- Ekstrak.
- Akan ada 2 buah Folder: examples dan jscripts. Examples berisi contoh2 bagaimana integrasi dan penggunaan library TinyMCE ke dalam website kita. Library nya sendiri ada di folder jscripts/tiny_mce
Langkah 2: Integrasikan ke halaman Web
- Buat sebuah file HTML baru dengan nama coba.htm simpan disuatu folder.
- Copykan libary TinyMCE yg ada di folder jscripts/tiny_mce, (yg dicopy satu folder tiny_mce saja) ke dalam folder yg sama dengan file coba.htm
- Dalam file coba.htm buat kode standar web html/xhtml
-
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<meta name=”author” content=”irfansatriadarma” />
<title>Coba TinyMCE</title>
</head>
<body>
<form method=”post” action=”">
<strong>Place Content Here :</strong>
<textarea name=”content”></textarea>
<br />
<input type=”submit” name=”submit” value=”Save” />
</form>
</body>
</html> - Di dalam body disisipkan sebuah form yang menyimpan text area. Text area standar HTML. Save coba.htm. Kalau dijalankan, hasil akan tampak seperti berikut ini:
- Load library tinyMCE dan sisipkan diantara tag <head></head>
- <!– TinyMCE –>
<script type=”text/javascript” src=”tiny_mce/tiny_mce.js”></script>
<script type=”text/javascript”>
tinyMCE.init({
mode : “textareas”,
theme : “simple”});
</script>
<!– /TinyMCE –> - Hasilnya, sebuah Editor WYSIWYG yang simple seperti berikut :
- Kalau mau tipe Advance (lebih banyak toolbar yang bisa digunakan) kita tinggal mengganti konfigurasi theme: “simple” menjadi theme: “advanced”. Hasilnya terlihat seperti berikut.
- Beberapa kustomisasi dapat kita lakukan, diantaranya seperti : membuat toolbar ada diatas,sebelah kiri dan bisa dilakukan resize terhadap textarea tersebut sehingga seperti ini:
Ok, akhir kata, selamat mencoba… semoga lebih memperindah content management system yang sedang anda bangun dan lebih memuaskan klien anda.
(irfan, webwae)
CXCoWH Hi! Nice site! Where is a add to favorite button&
http://www.mysite.com
mmm nice bro :d
ini emang paling keren… banyak cms yang make ini. wordpress juga pake tinymce.
terima kasih telah membagi ilmu!!!
posting yg banyak lagi ya..
thx,. bro!! :d
keren.. bget.
Add A Comment