Instalasi Wordprecessor tinyMCE

langkah-langkah untuk instalasi tinyMCE.

1. Download File tinyMCE lengkap disini

2. Ekstrak file tersebut ke sebuah folder atau apabilan kita bekerja dengan framework ekstak file tersebut ke folder yang menangani tentang design dan tampilan web.

3. Setalah ekstrak maka buatlah sebuah file example baik berbasis php ataupun HTML

4. Pada bagian header (antara <head> dan </head> sertakan script berikut :

<!– TinyMCE –>
<script type=”text/javascript” src=”../jscripts/tiny_mce/tiny_mce.js“></script>
<script type=”text/javascript”>
tinyMCE.init({
// General options
mode : “textareas”,
theme : “advanced”,
plugins : “safari,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,wordcount”,

// 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,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,

nonbreaking,template,pagebreak”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)
content_css : “css/content.css”,

// Drop lists for link/image/media/template dialogs
template_external_list_url : “lists/template_list.js”,
external_link_list_url : “lists/link_list.js”,
external_image_list_url : “lists/image_list.js”,
media_external_list_url : “lists/media_list.js”,

// Replace values for the template plugin
template_replace_values : {
username : “Some User”,
staffid : “991234″
}
});
</script>
<!– /TinyMCE –>

Perhatikan bagian yang dicetak tebal

../jscripts/tiny_mce/tiny_mce.js” : Merupakan letak file tiny_mce.js. Bagian ini harus disesuaikan dengan folder yang kita punya
theme_advanced_buttons1 . Merupakan bagian baris icon yang nantinya bisa dihilangkan apabila kita tidak membutuhkan fasilitas tersebut. Begitu juga dengang theme_advance_buttons2 sampai theme_advance_buttons4.
Setelah itu coba browse file example.php tadi dari browser. Apabila berhasil Maka akan tampil seperti ini :

Berhasil.. Apabila kita ingin menghilangkan salah satu fasilitas pada tinyMCE tinggal cari nama button kemudian cari nama tersebut pada theme_advance_buttons. Cukup Mudah bukan.. Selamat Mencoba

*PS : Artikel yang serupa juga dituliskan di www.monahelisa.web.id*