Cara memasang TinyMCE sebagai Text Editor di WEB Anda ~ Trial And Eror

Sunday, 14 December 2014

Cara memasang TinyMCE sebagai Text Editor di WEB Anda

TinyMCE adalah Aplikasi Text Editor berbasis WEB seperti MS - WORD yang memberikan ruangan POSTING dengan tampilan WYSWYG (What You See Is What You Get).

Semua blog tentu memiliki halaman kolom posting textarea yang simple menyerupai MS-Word. Dengan bantuan alat ini kita dapat menambah ukuran font, dapat melakuan penggantian paragraf dan lain sebagainya. Fasilitas pendukung textarea berbasis WYSWYG ini memang cukup banyak. Bermodalkan Ajax/Javascript, fasilitas ini benar-benar enak digunakan. Contoh selain TinyMCE adalah Rte dan FckEditor.

OK saya tidak akan berpannjang Lebar langsung sajah cara pemasangannya :

Pertama - tama download dulu TinyMCE
Setelah Download langsung saja ekstrack di folder manapun

Setelah Itu Ambil/CUT folder yang sudah di lingkari merah ke folder WEB atau disitu sajah diamkan
Bikin file HTML lalu masukin ke folder sederajat sama folder TinyMCE
Masukan Kode dibawah ini ke file HTML yang tadi Anda buat

<html>
<title>Tutorial Menggunakan TinyMCE di dalam web PHP</title>
<head>
<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
</head>
<body>
<form method="post" action="somepage">
<textarea name="content" style="width:100%"></textarea>
</form>
</body>
</html>
Buka File HTML tersebut:
Jika ingin memasang Full tools TinyMCE ganti script yang bewarna merah dengan ini :

Memasang Full tools Tiny MCE :

<script type="text/javascript">
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"
],
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
});
</script>
Hasil
Selesai