Mengenal WYSIWYG dengan TinyMCE

Bismillah,
Dari judul teman-teman pasti ada yang bingung..
“ini orang rajin banget buat blog, artikel yang sederhana seperti itu aja diposting segala…” 🙂
Buat teman yang udah paham tentang apa itu WYSIWYG dan penggunaanya bagaimana,, close aja deh ini artikel..
Sengaja artikel ini diposting buat pemula seperti saya yang lagi rajin-rajinnya menggunakan semacam plugin javascript. Kita share deh,,biar ilmu ada manfaatnya..:)

Apa itu WYSIWYG ?teman bisa cari arti maksudnya di Wikipedia. Kepanjangannya adalah “What You See Is What You Get”, kalu diartiin “apa yang kamu lihat itulah yang kamu dapat”.

Maksudnya apa ?

saya juga gak ngerti dari arti diatas, tapi setelah saya coba gunakan, paham dan mengerti penggunaannya di kasus pembuatan web tokobukubekas..

Kamu pasti pernah menggunakan salah satu element pada HTML “textarea” bukan ? Sebenarnya dengan element “textarea” tersebut kita bisa menyisipkan coding-coding HTML seperti menebalkan dan menggarisbawahi kata dan lain sebagainya. Silahkan coba bila tidak percaya…

Nah daripada cape buat tag / element HTML tersebut secara manual *ngetik*, kita gunakanlah apa itu WYSIWYG. Berikut ini saya coba praktekan setting sederhana WYSIWYG dengan menggunakan tinyMCE.
Sebelumnya download terlebih dahulu tinyMCE di situsini http://tinymce.moxiecode.com/download.php. Lalu buat folder sembarang, dan buat juga folder “js”. Tempatkan download tinyMCE di folder “js”. Setelah itu buat sembarang file HTML. Disini saya namakan tutor.html yg isinya seperti ini :

<html>
<head>
<title>Tutorial Sederhana WYSIWYG</title>
	<script type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script>
	<script type="text/javascript">
		tinyMCE.init({
			mode : "textareas",
			theme : "advanced"
		});
	</script>
</script>
</head>
<body>
<center>
	<form name='adiputra' action='#' method='POST'>	
		Isi Berita : <textarea name='textAreaNews' cols='40' rows='10'></textarea>
	</form>
</center>
</body>
</html>

Lalu setelah itu coba dirunning. Lihat perbedaannya.
Kalau sudah berubah,,pasti terdapat icon-icon seperti pada Microsoft Word (Bold,Italic,Underline, dll). Kamu blok,,trus seperti biasa tinggal klik icon yang sesuai dengan keinginan teman. Nah,,seperti itu.

Coba klu bisa disimpan di database, maka pasti nanti ada tambahan coding HTML, seperti misalnya kalau kita menebalkan huruf akan terdapat tag **.

Simple bukan ?

Moga bermanfaatya,
Saingannya dapat diliat di list ini :

Kalu mau tau lebih dalem mengenai tinyMCE disini alamatnya http://wiki.moxiecode.com/index.php/TinyMCE:Index

Iklan

2 thoughts on “Mengenal WYSIWYG dengan TinyMCE

  1. Konsep WYSIWYG datang dari software komputer, seperti dreamweaver kemudian seiring berkembangnya teknologi web, konsep ini dibawa ke ranah web untuk mempermudah kita dalam membentuk konten web.

Silahkan Komentar...

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s