.:: GnouBdilS Blog ::.

WYSIWYG (What You See Is What You Get) text editor merupakan sebuah rich text editor yang dibuat untuk mempermudah dalam penulisan sebuah dokumen yang dibuat dengan bahasa javascript yang memiliki banyak kelebihan dibandingkan sebuah object textarea biasa pada HTML. Saat ini sudah cukup banyak WYSIWYG text editor yang dapat kita gunakan salah satunya adalah TinyMCE yang dibuat oleh Moxiecode Systems.
Kita dapat menambahkan WYSIWYG Text Editor pada website yang kita miliki dengan mudah tanpa harus membuat coding javascript yang rumit. Yang kita butuhkan hanya mendownload filenya kemudian mengimplementasikannya pada website kita.

Disini saya akan menuliskan tentang cara menambahkan WYSIWYG Text Editor pada website dengan menggunakan TinyMCE. Jadi yang harus anda lakukan pertama kali adalah mendownload file TinyMCE pada link berikut ini : http://tinymce.moxiecode.com/download.php pada link tersebut akan terdapat beberapa versi TinyMCE yang bisa anda gunakan. Pada tutorial ini saya menggunakan TinyMCE versi 3.3.5.

Berikut ini adalah tampilan dari TinyMCE :

Setelah anda download file TinyMCE dari websitenya extraklah file tersebut. Dalam file zip yang diberikan oleh TinyMCE (versi 3.3.5. yang saya download) terdapat 2 buah folder, yang pertama adalah examples dan yang satunya lagi adalah jscripts. Folder examples berisi contoh penggunaan TinyMCE pada sebuah website sedangkan folder jscripts merupakan folder dimana file-file TinyMCE berada.
Masuklah kedalam folder jscripts dan anda akan menemukan folder tiny_mce. Copylah/uploadlah folder tersebut ke folder yang anda inginkan dihosting anda sebagai contoh pada kasus ini saya mengupload file tiny_mce kedalam folder includefile.

Setelah itu langkah berikutnya adalah mengintegrasikan TinyMCE kedalam website anda.
Bukalah index dari website anda kemudian carilah kode <head> tambahkanlah kode berikut ini dibawah <head> dan sebelum </head> :

<script type="text/javascript" src="includefile/tiny_mce/tiny_mce.js"></script>

dan juga tambahkanlah kode berikut dibawah kode diatas :

<script type="text/javascript">
tinyMCE.init({

//opsi umum
mode : "textareas",
theme : "advanced",
plugins :"pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",

//opsi theme
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
//kode css pada website andacontent_css : "includefile/tiny.css"
});
</script>

jika sudah tinggal pemanggilan pada formnya saja.. berikut ini contoh kodenya :

<form method="post" action="somepage">
<textarea name="content" style="width:100%">
</textarea>
</form>

Selesai TinyMCE WYSIWYG Text Editorpun telah terintegrasi pada web anda.. (^^,)
Jika anda ingin mendownload sample projectnya silahkan mendownloadnya dengan mengklik disini

Selamat mencoba..

Layaknya bahasa pemrograman desktop seperti visual basic, visual foxpro, dll dalam pemrograman webpun kita bisa membuat sebuah messsagebox dengan menggunakan javascript.
Adapun beberapa contoh penggunaan messagebox dengan menggunakan javascript yang akan saya bahas pada tutorial ini adalah sebagai berikut :

1. Membuat sebuah messagebox pada saat website pertama kali diload :

<html>
<body>
<script type="text/javascript">
alert("Hello world")
</script>
</body>
</html>

dengan menggunakan kode diatas akan menampilkan pesan Hello World pada saat web diload..

2. Membuat sebuah messagebox ketika sebuah link di click :

<html>
<body>
<A HREF='javascript:onClick=alert("Anda menglick sebuah link")'>Click here</A>
</body>
</html>

3. Menampilkan messagebox ketika sebuah buton diclik :

<html>
<body>
<form>
<input type="button" name="click" value="Click To Alert" onclick='alert("Anda mengclick sebuah tombol")'>
</form>
</body>
</html>

4. Menampilkan sebuah dialog konfirmasi :

<html>
<body>
<script type="text/javascript">
var answer = Confirm: ("Ingin melanjutkan?")
if (answer)
alert("Anda memilih: Ok")
else
alert("Anda memilih: Cancel")
</script>
</body>
</html>

penggunaan messagebox dengan javascript ini juga bisa digunakan untuk meredirect ke suatu halaman tertentu yang kita tunjuk bila tombol OK pada messageboxnya di click.

<html>
<body>
<script type="text/javascript">
var answer = Confirm: ("Mau diredirect?")
if (answer)
window.location = "http://www.gnoubdils.blogspot.com"
else
alert("Tidak jadi diredirect")
</script>
</body>
</html>

5. Menampilkan sebuah dialog konfirmasi untuk menghapus data menggunakan sebuah fungsi :
Tambahan kode berikut ini setelah <head> dan sebelum </head>

<script language="JavaScript">
function konfirmasi(del)
{
tanya = confirm('Hapus '+ del + '?');
if (tanya == true) return true;
else return false;
}
</script>

Adapun contoh dalam pemanggilan fungsi tersebut pada saat link di klik adalah sebagai berikut :