Textarea merupakan salah satu inputan yang paling sering digunakan khususnya pada sebuah halaman penginputan data aplikasi website. Fungsi utama dari textarea yaitu untuk membuat inputan text yang dapat menampung lebih dari 1 (satu) baris inputan atau inputan yang panjang. Contoh penggunaan textarea pada halaman penginputan data website yaitu: membuat halaman inputan berita, mengisi kolom komentar, keterangan, catatan, pengumuman dan masih banyak lagi contoh lainnya.
Untuk menggunakan textarea, biasanya cukup membuat tag pembuka dan tag penutup seperti berikut (contoh: <textarea> </textarea>). Pada contoh dalam kurung tersebut merupakan penginputan textarea yang tidak menggunakan fitur editor. Bagaimana jika kita ingin menambahkan fitur editor pada textarea..?.
TinyMCE merupakan editor text website dengan sistem “What You See Is What You Get (WYSIWYG)”atau yang jika diartikan “apa yang anda lihatlah yang anda dapatkan”. Maksud dari istilah tersebut adalah anda dapat membuat teks dengan format sesuai format yang telah ada tanpa perlu lagi mengetikkan script manual. WYSIWYG sangatlah populer dan sering digunakan pada website portal yang berfungsi untuk mengetik sebuah artikel atau halaman berita.
Penempatan TinyMCE pada halaman web dengan script PHP sangatlah mudah, yaitumemanggil file javascript yang terdapat dalam folder TinyMCE pada halaman website anda agar proses pengetikan artikel, berita atau lainnya dapat berlangsung cepat, karena TinyMCE terdapat beberapa fitur yang hampir mirip dengan fitur pengetikan pada microsoft word.
Adapun langkah-langkah penggunaan dan penempatan Membuat Inputan Textarea Dengan Fitur Editor TinyMCE pada PHP yaitu sebagai berikut:- Download Fitur Editor textarea TinyMCE pada halaman website resminya atau klik disini
- Ekstrak TinyMCE.zip yang sudah didownload tersebut kemudian letakan folder hasil ekstrak tadi pada folder dimana anda membuat halaman website
- Ekstrak TinyMCE.zip yang sudah didownload tersebut kemudian letakan folder hasil ekstrak tadi pada folder dimana anda membuat halaman website (contoh:C/xampp/htdoct/berita)
- Apabila folder TinyMCE hasil ekstrak telah berada dalam folder berita (contoh diatas), selanjutnya buat sebuah file PHP (contoh: index.php)
- Selanjutnya ketikan atau copy script berikut:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Input Berita</title>
</head>
<body>
<h2>Tutorial Membuat Inputan Textarea Dengan Fitur Editor Lengkap di PHP</h2>
<textarea name="kontent" id="kontent"> </textarea>
</body>
<script src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
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>
</html>
- Apabila proses berhasil maka, tampilannya akan tampak seperti yang terlihat pada gambar diatas.
**)Catatan:
- Teks yang berwarna merah merupakan javascript TinyMCE yang ditempatkan pada halaman penginputan data dan yang akan mengeksekusi fitur-fitur editor TinyMCE.
- Teks yang berlatar belakang kuning merupakan textarea yang akan menampilkan penginputan teks pada halaman website.
Demikian tutorial Membuat Inputan Textarea Dengan Fitur Editor Lengkap di PHP yang dapat saya bagikan, semoga bermanfaat dan memberi inspirasi buat proses pembuatan source code form penginputan website yang dikerjakan...!
Post a Comment