Membuat Editor Text WYSIWYG Dengan TinyMce

Dalam membuat sebuah project aplikasi tentunya kita sering melihat form yang terlihat seperti inputan pada microsot word, open office dll. Inputan seperti inilah yang dinamakan editor text. Editor Text merupakan suatu jenis perangkat lunak komputer (software) yang digunakan untuk menyunting teks. Dengan Editor Text kita dapat mengkustomisasi teks/tulisan sesuai dengan kebutuhan yang diperlukan. Editor yang terdapat sebuah aplikasi website saat ini disebut Editor Text WYSIWYG (What You See Is What You Get) yang artinya apa yang kamu lihat adalah apa yang kamu dapatkan.

Disini saya akan membagikan tips dalam membuat Editor Text WYSIWYG, Salah satu Editor Text yang sering digunakan developer yaitu TinyMce karena sangat simple dan mudah digunakan. TinyMce adalah plugin javascript yang digunakan untuk mengubah textarea menjadi Editor Text yang memiliki banyak fitur. Dengan menggunakan TinyMce kita dapat dengan mudah dalam menyunting text dan setiap diformat dapat dilihat langsung hasilnya. Langsung saja kita membuat Editor Text WYSIWYG dengan TinyMce, yaitu :

Silahkan download plugin TinyMce disitus www.tinymce.com
Akan ada 2 pilihan yaitu TinyMce Community dan TinyMce Dev Package, gunakan TinyMce Community
Extract plugin TinyMce yang telah didownload, lalu rename nama folder menjadi tinymce
Buat folder di directory mana saja dengan nama tinymcedit, lalu copy folder tinymce ke dalam folder tinymcedit

Buat file html bernama index.html lalu simpan ke dalam folder tinymcedit, dengan skripnya seperti berikut:

index.html


<html>
<head>
<title&gtTinyMce</title>
</head>
<body>
<textarea>Ini adalah Editor Text TinyMce, Sangat Cocok digunakan dalam membuat aplikasi</textarea>
</body>
</html>

Tambahkan javascript untuk mengubah textarea menjadi Editor TinyMce sebelum tag <head>


<script src="tinymce/js/tinymce/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>


<html>
<head>
<title&gtTinyMce</title>
<script src="tinymce/js/tinymce/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
<textarea>Ini adalah Editor Text TinyMce, Sangat Cocok digunakan dalam membuat aplikasi</textarea>
</body>
</html>