WYSIWYG merupakan singkatan dari What You See Is What You Get yang mana biasanya berarti suatu editor yang digunakan oleh suatu aplikasi untuk menggambarkan bahwa konten yang sedang disunting akan terlihat sama persis dengan hasil akhirnya.
Text editor WYSIWYG sangat ramah dengan penggunanya jika dibandingkan dengan text editor yang lain. Hal itu karena kemampuan yang dimiliki oleh software atau program aplikasi yang sudah dioperasikan serta sejumlah kemampuan lain yang dimilikinya. Bahkan bagi pemula sekalipun dengan menggunakan text editor ini, tidak akan mengalami banyak kesukaran untuk mengoperasikan sebuah program aplikasi.
Dalam penggunaannya, text editor ini tidak memerlukan penulisan sintaks seperti pada text editor yang lain karena sudah dilengkapi dengan icon-icon dimana kita hanya perlu mengklik salah satu dari icon yang akan digunakan dan secara otomatis akan terformat.
Selain itu, text editor ini juga mempunyai keuntungan lain seperti mampu menampilkan teks satu halaman, integrasi dengan grafik, speadsheet, foto dalam satu dokumen, auto correct, hypermedia, hypertext, dan masih banyak lagi.
TinyMCE merupakan salah satu WYSIWYG (What You See Is What You Get) Editor yang dapat memberikan fitur manajemen data yang dimasukkan ke dalam sebuah form. Jadi misalkan kita ingin memberikan cetak tebal, miring, rata kiri dan kanan atau yang lainnya, maka TinyMCE ini dapat membantu kita dalam mewujudkannya.
Berikut langkah-langkah penggunaan TinyMCE :
- Dowonload file TinyMCE, masuk ke website resminya di https://www.tiny.cloud/.
- Pilih menu Products, kemudian pilih submenu Get TinyMCE dan download TinyMCE Open Source Community atau langsung klik di link https://download.tiny.cloud/tinymce/community/tinymce_6.8.3.zip, pada tutorial ini menggunakan TinyMCE versi 6.8.3, silahkan simpan file download TinyMCE tersebut.
- Setelah berhasil mendownload, extract file tinymce_6.8.3.zip.
- Setelah extract copy/pindahkan folder tinymce yang ada dalam folder js ke dalam folder project kita.
- Paste di dalam folder project yang kita buat, misal pada tutorial ini dengan nama folder belajar_tinymce
- Buat file HTML baru misal dengan nama halaman_tinymce.html
dengan sintak seperti berikut :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Belajar TinyMCE</title> <script type="text/javascript" src="tinymce/tinymce.min.js"></script> </head> <body> <form method="post" action="tambah.php"></form> <table> <tr> <td>Judul Berita</td> <td><input type="text" id="judulberita" name="judulberita"></td> </tr> <tr> <td>Isi Berita</td> <td><textarea type="text" id="isiberita" name="isiberita"></textarea></td> </tr> <tr> <td>Penulis</td> <td><input type="text" id="penulisberita" name="penulisberita"></td> </tr> <tr> <td>Tanggal</td> <td><input type="date" id="tanggalberita" name="tanggalberita"></td> </tr> </table> </form> <script> tinymce.init({ selector: '#isiberita' }); </script> </body> </html>perhatikan sintak di atas :
<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
Pada baris 8 kita memanggil javascript yang bernama tinymce.min.js yang berada dalam folder tinymce.
<td><textarea type="text" id="isiberita" name="isiberita"></textarea></td>
Pada baris 19 kita membuat input dengan textarea, karena TinyMCE akan bekerja pada input textarea, text area tersebut dengan id=”isiberita”.
<script> tinymce.init({ selector: '#isiberita' }); </script>Pada baris 32 sd 36 kita memanggil TinyMCE dengan fungsi init() ke dalam textarea dengan id isiberita.
- Hasilnya seperti berikut :
Demikian tutorial cara menggunakan TinyMCE, semoga bermanfaat. Jika ada pertanyaan silahkan tuliskan di kolom komentar.
Be the first to comment