20120801

Membuat Editor Dengan TinyMCE

TinyMCE merupakan salah satu solusi editor WYSIWYG berbasis open source yang banyak dipakai untuk membuat editor di Content Management System (CMS). Joomla dan WordPress adalah contoh software CMS yang menggunakan TinyMCE sebagai editornya.
Nah, pada artikel ini saya akan membahas bagaimana cara untuk membuat editor di website menggunakan TinyMCE.

Langkah pertama, download terlebih dahulu library TinyMCE di situs berikut ini. Pilih versi yang terbaru, misalnya tinymce_3.4.2.zip (saat tulisan ini dibuat). 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 sederhana bagaimana cara untuk membuat editor dengan TinyMCE.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
Jika Anda ingin mencoba kode di atas, caranya yaitu buat sembarang file HTML di komputer Anda, misalnya kita beri nama editor.html. Selanjutnya kopikan direktori tiny_mce (bisa kita temukan di direktori jscripts) beserta isinya ke direktori yang sama dengan file tadi.
Dengan cara seperti di atas, pada saat dieksekusi dengan web browser, secara otomatis semua TEXTAREA yang ditemukan di halaman web tersebut akan diubah menjadi editor HTML dengan toolbar terletak di bawah editor.
Kita bisa mengubah tampilan editor web tersebut dengan cara mengubah inisialisasi TinyMCE tersebut. Contohnya, kita akan menampilkan editor khusus untuk TEXTAREA dengan nama content dan toolbar berada di bagian atas.
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
tinyMCE.init({
   mode : "exact",
   elements : "content",
   theme : "advanced",
   theme_advanced_toolbar_location : "top",
   theme_advanced_toolbar_align : "bottom"
});
</script>
Untuk konfigurasi lainnya, bisa Anda baca di sini.

SARSAWO

0 komentar:

MASIH BELUM KETEMU??? CARI DISINI