Pernah mendengar tentang editor WYSISYG?
Baiklah, WYSIWYG adalah singkatan dari
What You See Is What You Get yang artinya apa yang kamu lihat adalah apa yang kamu dapatkan. Menurut Wikipedia, editor WYSISYG adalah suatu sistem di mana konten (teks dan grafis) pada layar selama proses
editing muncul dalam bentuk erat sesuai dengan penampilan saat dicetak atau ditampilkan sebagai produk jadi, seperti dokumen, halaman web, atau
slide presentasi.
Timbul, pertanyaan. Editor WYSIWYG itu gunanya buat ngapain, sih?
Bayangkan kita adalah seorang programmer yang ingin membuat sebuah website berita. Tentunya programmer harus bisa memberikan website dengan antarmuka yang mudah digunakan oleh reporter dalam menuliskan isi beritanya. Untuk memenuhi hal itu, biasanya disediakan texarea yang memungkinkan user untuk mengetik lebih dari satu baris.
Sayangnya, teks yang berada di dalam textarea tidak bisa diformat, seperti dimiringkan, ditebalkan, atau diatur ukuran hurufnya pada kalimat tertentu. Kecuali user hafal perintah HTML dan menuliskannya secara manual di dalam textarea tersebut. Tentunya ini sangat menyulitkan bagi reporter ataupun user yang awam dengan HTML.
Jalan keluarnya adalah menggunakan editor WYSIWYG (
What You See Is What You Get). Editor WYSIWYG akan memudahkan user dalam mengisi konten website layaknya menggunakan aplikasi pengolah kata(Microsoft Word atau Open Office).
Lagi-lagi, timbul pertanyaan. Editor apa aja sih yang termasuk WYSIWYG dan gimana dapetinnya? Cara nginstalnya gimana? Gunainnya gimana? Implementasinya di web gimana? Waduh~ Sabar ya...
Ada bayak editor WYSIWYG yang bisa kita pakai. Kalau nanya mbah google, nanti pasti akan nongol banyak, seperti :
Dari pada bingung mau pilih yang mana, kali ini saya akan menggunakan TinyMCE dan sedikit membahas editor WYSIWYG tersebut.
Instalasi atau Pemasangan TinyMCE
Sebelum menggunakan TinyMCE rasanya kurang
afdhol kalau kita tidak mengenal TinyMCE terlebih dahulu. Jadi... menurut halaman awal TinyMCE...
TinyMCE adalah platform web independen berdasarkan Javascript HTML editor WYSIWYG kontrol dirilis sebagai Open Source di bawah LGPL.
TinyMCE memiliki kemampuan untuk mengkonversi bidang TEXTAREA HTML atau elemen HTML lainnya untuk kasus redaksi.
Intinya, TinyMCE merubah textarea standar menjadi sebuah editor WYSIWYG. Adapun langkah-langkah pemasangan dan penggunaannya adalah sebagai berikut :
Download TinyMCE di
http://www.tinymce.com/download/download.php (pilih yang deskripsinya
"Contains all you need for production usage" dan tekan tombol download di samping kanannya)
Ekstrak file zipnya, kemudian pindahkan hasil ekstrak tersebut (tinymce) ke folder htdocs (atau folder projek kalian).
Lalu pasang masukkan file tinymce.min.js dari tinymce ke dalam file html atau php kalian. Contohnya, kita akan membuat sebuah file yang bernama tini.html di htdocs dengan script :
<!doctype html>
<html>
<head>
<title>Contoh</title>
<script src="tinymce/js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({selector:'textarea'});
</script>
</head>
<body>
<textarea>Easy! You should check out MoxieManager!</textarea>
</body>
</html>
Bagian yang saja warnai adalah bagian untuk memanggil tinymce.min.js. Bagian ini perlu disesuaikan dengan alamat atau
path dari file tinymce.min.js tersebut.
<script>
tinymce.init({selector:'textarea'});
</script>
Sedangkan script tinymce.init({selector:'textarea'}); digunakan untuk menempatkan editor WYSIWYG ke dalam textarea. Jangan lupa dengan <!doctype html> yang berada paling atas. Tanpa itu, editor ini tidak bisa digunakan.
Hasilnya seperti berikut :
Tapi, itu belum kelihatan semua fiturnya lho! Karena di atas kita menggunakan cara yang paling mudah. Bagaimana kalau mau yang standar? Cukup ubah
<script>
tinymce.init({selector:'textarea'});
</script>
Menjadi
<script>
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
Dan hasilnya agak beda :
Kalau mau yang full fiturnya, ganti
<script>
tinymce.init({selector:'textarea'});
</script>
Menjadi
<script>
tinymce.init({
selector: "textarea",
theme: "modern",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern imagetools"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
]
});
</script>
Dan tampilan semua fiturnya seperti ini :
Bagaimana? Menarik? Menurut saya, fitur yang disediakan oleh TinyMCE sudah terbilang memadahi. Sayangnya, plugins untuk Upload File atau File Manager yang tersedia berbayar. Jadi tidak bisa tinggal pasang gambar, langsung terupload. Salah satu solusinya adalah menggunakan Responsive File Manager yang dapat diunduh di
http://www.responsivefilemanager.com.
Lain kali kita akan membahas tentang menyimpan hasil dari editing menggunakan TinyMCE ke dalam database MySQL. Sampai jumpa lagi...
Kalau ada yang tidak anda pahami, jangan sungkan untuk bertanya.
