Masih dalam rangka belajar ini-itu, tentu saja, amunisi yang dicari adalah CMS (Content Management System) yang Apa Yang Kamu Lihat Itu yang bikin kamu gak bisa tidur (What You See Is What You Get/ WYSIWYG). TinyMCE yang lama populer karna digunakan WordPress, jadi pilihan saya.

Karna lama populer, sebetulnya sudah sangat terlambat membahas ini. Tapi kata teman yang cantik, “tidak ada kata terlambat buat belajar”. Artinya, walau pelajaran mulai jam 8.00, datang jam 9.00 pun tidak apa-apa…tidak ada kata terlambat.

Jadilah, saya belajar TinyMCE ini.

Menempatkan CMS ini, intinya :

Menaruh folder tinymce hasil ekstrak dari donlud, pada folder yang sama dengan tempat kita membuat website, tambahkan beberapa perintah. Udah, gitu aja.CMS dah tertampil.

Yuk, mari dilanjutkan :

1. Donlud TinyMCE

2. Ekstrak (Ubuntu pake klik kanan=>ekstrak…biar mudah😛 )

3. Hasilnya ada 2 folder :

examples ; yang berisi contoh2 bagaimana integrasi dan penggunaan library TinyMCE ke dalam website.

jscripts ; berisi library tinymce itu sendiri.Ada di folder jscripts/tiny_mce

4.Praktek :

*) Buat folder latihan

*) kopi-kan 1 folder jscripts/tiny_mce, yang dikopikan cukup 1 folder tiny_mce aja, gak sah folder jscript-nya…ke dalam folder latihan.

*) bikin file, misal di-save dengan nama latihan.html. Di simpan dalam folder latihan tadi. Sementara sih, buat pake gedit (editor-teks) sudah oke buat latihan ini.

misal :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; dir=”ltr”>
<head>
<title>TinyMCE Test</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>

</head>
<body>
<form method=”post” action=”show.php”>
<strong>Silahkan Tulis Di sini :</strong>
<br />
<textarea name=”content”></textarea>
<br />
<input type=”submit” name=”submit” value=Save />
</form>
</body>
</html>

hasilnya seperti ini :

tinymce1Lalu, coba ditambahkan tinymce diantara tag <head></head> :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; dir=”ltr”>
<head>
<title>Latihan TinyMCE</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>

<!– TinyMCE nya –>
<script type=”text/javascript” src=”tiny_mce/tiny_mce.js”></script>
<script type=”text/javascript”>
tinyMCE.init({
theme : “advanced”,
mode : “textareas”,
plugins : “fullpage”,
theme_advanced_buttons3_add : “fullpage”
});
</script>

</head>
<body>
<form method=”post” action=”show.php”>
<strong>Silahkan Tulis Di sini :</strong>
<br />
<textarea name=”content”></textarea>
<br />
<input type=”submit” name=”submit” value=Save />
</form>
</body>
</html>

muncullah cms-nya :

tinymce2

*) Kalau mau toolbarnya diatas, tambahkan : “theme_advanced_toolbar_location : “top””

seperti ini :

<!– TinyMCE nya –>
<script type=”text/javascript” src=”tiny_mce/tiny_mce.js”></script>
<script type=”text/javascript”>
tinyMCE.init({
theme : “advanced”,
mode : “textareas”,
plugins : “fullpage”,
theme_advanced_toolbar_location : “top”
});
</script>

jadinya :

tinymce3

Ragam konfigurasi tinymce dapat dilihat di wiki_tinymce_configiration.

Demikian.
(Masih banyak yang harus saya pelajari lagi).

Referensi :

1. Blog Wae

2. Wiki-nya TinyMCE