/ Without Label / Cara pasang menu-menu seperti yang ada di Ms Word pada Textarea

Cara pasang menu-menu seperti yang ada di Ms Word pada Textarea

Selasa, Juli 17, 2012
Contoh gambar textarea dengan gaya Ms Word
Kebanyakan format atau tampilan Textarea yang beredar saat ini hanyalah berwujud kotak putih polos begitu saja tanpa ada apa-apanya atau ada apanya.....Upssst :).
Tapi tenang saja, setelah saya juga bingung mengenai bagaimana agar tampilan textarea dapat lebih menarik saya lantas berselanjar di google eh ternya saya menemukan salah satu alamat web yang di sana kita dapat donwload scriptnya lengkap satu paket, untuk dowload alamatnya tekan disini Selanjutnya ekstrak paket library
TinyMCE tersebut di komputer kita. Di dalam paket TinyMCE tersebut terdapat beberapa file, yaitu sebagai berikut:
  • Direktori jscripts, berisi source file TinyMCE, plugin dan theme
  • Direktori examples, berisi beberapa contoh pemakaian TinyMCE
Berikut ini contoh script bagaimana cara untuk membuat editor dengan TinyMCE.

<html>
<head>
<title>Editor Web dengan TinyMCE</title>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
   mode: "textareas",
   theme: "simple"
});
</script>
</head>
<body>
<form>
   <textarea name="content" cols="50" rows="15">Edit konten web dengan TinyMCE</textarea>
</form>
</body>
</html>

Setelah itu simpan dan beri nama editortextarea.html dan jangan lupa untuk mletakkan juga file extrakan tadi kedalam direktori yang sama pada penyimpanan  editortextarea.html.

itu tadi tampilan editor textarea yang sederhana jika kita ingin modifikasi tampilan tadi rubah script pada baris 5-10 menjadi seperti ini:

<script type="text/javascript">
tinyMCE.init({
   mode : "exact",
   elements : "content",
   theme : "advanced",
   theme_advanced_toolbar_location : "top",
   theme_advanced_toolbar_align : "bottom"
});
</script>
 
*) untuk tema sudah disediakan 2 tema yaitu simple dan advanced.

nah itu lah tadi cara bagaimana membuat editor seperti Ms Word pada Textarea semoga bermanfaat.<^@^> 



 
 

Comentarios: