Editor yang satu ini, bagi saya sudah lebih dari cukup. Kerja dari editor WYSIWYG TinyMCE ini, menyisipkan plug-in editor layaknya office pada semua textarea yang id-nya disesuaikan dengan script yang dideklarasikan di tag head. Selain itu, WYSIWYG TinyMCE juga menyediakan skin untuk tampilan editor dari WYSIWYG TinyMCE. Skin dari WYSIWYG TinyMCE bervariasi, dari warna hitam dan biru yang tampilannya seperti Office 2007, serta skin silver atau bisa saya bilang seperti logam yang dipolesin chrome :)
TinyMCE adalah web platform independen javascript berbasis HTML editor WYSIWYG kontrol dirilis sebagai Open Source di bawah LGPL oleh Moxiecode Systems AB. Ia memiliki kemampuan untuk mengkonversi bidang TEXTAREA HTML atau elemen HTML ke dalam penyunting. TinyMCE sangat mudah untuk mengintegrasikan ke Content Management Systems lainnya. TinyMCE ini juga menyediakan versi compresor-nya. Jadi, waktu untuk mengeload script TinyMCE lebih singkat :). Di versi Terbaru TinyMCE, TinyMCE juga disisipkan jQuery untuk menambah kesan wah :p.
Baik, kita mulai untuk mencoba menggunakan TinyMCE. Pertama, silahkan download TinyMCE. Setelah di ekstrak, cari nama folder tiny_mce yang di dalamnya terdapat nama file tiny_mce.js. Copy kan folder tersebut ke folder lain (misalnya, folder latihan). Kemudian, buat file html, dimana sisipkan kode script ini sebelum </head> :
Setelah meng-copy script tersebut, silahkan copy paste kode berikut setelah tag <body> :
Setelah selesai, simpan file ke folder latihan tadi (jadi usahakan satu tempat dengan folder tiny_mce yang di copy kan tadi :D )
Baik, kita mulai untuk mencoba menggunakan TinyMCE. Pertama, silahkan download TinyMCE. Setelah di ekstrak, cari nama folder tiny_mce yang di dalamnya terdapat nama file tiny_mce.js. Copy kan folder tersebut ke folder lain (misalnya, folder latihan). Kemudian, buat file html, dimana sisipkan kode script ini sebelum </head> :
<script type="text/javascript" src="editor/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
// O2k7 (Skin BIRU / defaultnya)
tinyMCE.init({
// General options
mode : "exact",
elements : "elm1",
theme : "advanced",
skin : "o2k7",
plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (file CSS disesuaikan dengan yang kita pakai)
content_css : "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
Setelah meng-copy script tersebut, silahkan copy paste kode berikut setelah tag <body> :
<form method="post" action="somepage"> <textarea id="elm1" name="elm1" style="width:100%"> </textarea> </form>
Setelah selesai, simpan file ke folder latihan tadi (jadi usahakan satu tempat dengan folder tiny_mce yang di copy kan tadi :D )
Untuk kode elements : "elm1", merupakan deklarasi penamaan id untuk texarea yang akan menggunakan TinyMCE (Contoh, <textarea id="elm1" name="elm1" style="width:100%">). Selain itu, di bawah kode skin : "o2k7", tambahkan kode skin_variant : "warna" (untuk kata warna, silahkan ganti dengan BLACK atau SILVER untuk menggunakan skin yang laen).
Untuk melihat contoh hasil dan selengkapnya tentang TinyMCE, silahkan klik disini (ini merupakan website resmi dari WYSIWYG TinyMCE). Selamat berkreasi dengan Editor TinyMCE :D.
Komentar
Posting Komentar
Silahkan tinggalkan Komentar sahabat disini atau feedback untuk kemajuan blog ini :)
Jika ingin bertukar link website atau blog silahkan klik disini :)
Salam Blogger.