Di artikel kali ini saya akan mencoba share bagaimana menambahkan editor WYSIWYG TinyMCE kedalam project anda, apa itu WYSIWYG? ini adalah kependekan dari What You See Is What You Get kurang lebih artinya apa yang terlihat sekarang, akan sama hasilnya dengan yang akan ditampilkan di hasil akhirnya, untuk lebih lengkapnya anda bisa baca di wiki aja yah…
ini adalah contoh html nya
|
1 2 3 4 |
<label for="title">Title</label> <input type="text" name="title" placeholder="title" /> <label for="article">Article</label> <textarea id="article" cols="30" name="article" placeholder="article" rows="10"></textarea> |
saat kita buka di browser akan tampil seperti ini,
tentu saja tampilannya kurang menarik, apalagi saat kita misalnya sedang menulis sebuat artikel dimana kita biasanya menulis dengan berbagai style, seperti bold, italic, heading, dan lain sebagainya, oleh karena itulah kita membutuhkan editor WYSIWYG, disini saya akan menggunakan TinyMCE versi terbaru, anda bisa download langsung di situsnya, TinyMCE. masuk ke websinya dan dibagian atas ada link download, klik saja dan akan muncul seperti ini
untuk kali ini kita download pilihan yang pertama, karena paket yang ini sudah cukup untuk kebutuhan kita, setelah di download, kemudian ekstract file menggunakan winrar atau winzip sehingga akan seperti ini
buka folder tinymce yang sudah di ekstract tersebut, didalamnya akan menemukan file ini
copy seluruh file ini kedalam project kita, kalau disini saya masukkan ke folder tinymce, sehingga tampilan project saya seperti ini
setelah itu kita tinggal menambahkan nya kedalam soucecode kita dengan cara menambahkan seperti ini
|
1 2 3 4 5 6 7 |
<script type="text/javascript" src="tinymce/tinymce.min.js"></script> <!-- Konfigurasi Standar --> <script type="text/javascript"> tinymce.init({ selector: "textarea#article" }); </script> |
ini adalah cara menampilkan editor WYSIWYG dari TinyCMCE secara default, artinya dengan script diatas saja anda sudah bisa menpilkan editor WYSIWYG di project kita, dan tampilannya akan berubah menjadi seperti ini
apabila anda ingin tampilan editor WYSIWYG yang lebih lengkap anda bisa menambahkan atau merubah konfigurasinya menjadi seperti ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<script type="text/javascript">// <![CDATA[ tinymce.init({ selector: "textarea", plugins: [ "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker", "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", "table contextmenu directionality emoticons template textcolor paste fullpage textcolor" ], toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect", toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor", toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft", menubar: false, toolbar_items_size: 'small', style_formats: [ {title: 'Bold text', inline: 'b'}, {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}, {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}, {title: 'Example 1', inline: 'span', classes: 'example1'}, {title: 'Example 2', inline: 'span', classes: 'example2'}, {title: 'Table styles'}, {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'} ], templates: [ {title: 'Test template 1', content: 'Test 1'}, {title: 'Test template 2', content: 'Test 2'} ] }); // ]]></script> |
dan hasilnya akan terlihat seperti ini,
semuanya terserah anda mau menggunakan style yang mana, mengkin bisa disesuaikan juga dengan kebutuhan anda, kalau saya sih lebih suka menggunakan tampilan yang classic jika dibandingkan dengan tampilan tinyMCE v.4 atau yang terbaru ini.
dan ini keseluruhan sourcode HTML dan JavaScript saya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html> <head> <title>Tiny MCE</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <form action=""> <label for="title">Title</label><br/> <input type="text" name="title" placeholder="title"><br/> <label for="article">Article</label><br/> <textarea name="article" id="article" cols="30" rows="10" placeholder="article"></textarea> </form> <script type="text/javascript" src="tinymce/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: "textarea", plugins: [ "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker", "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", "table contextmenu directionality emoticons template textcolor paste fullpage textcolor" ], toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect", toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor", toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft", menubar: false, toolbar_items_size: 'small', style_formats: [ {title: 'Bold text', inline: 'b'}, {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}, {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}, {title: 'Example 1', inline: 'span', classes: 'example1'}, {title: 'Example 2', inline: 'span', classes: 'example2'}, {title: 'Table styles'}, {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'} ], templates: [ {title: 'Test template 1', content: 'Test 1'}, {title: 'Test template 2', content: 'Test 2'} ] }); </script> </body> </html> |
Note: JavaScript diatas sengaja saya letakkan dibagian akhir sebelum tag body
ini agar isi website kita bisa ditampilkan dengan cepat oleh web browser tanpa menunggu terlebih dahulu seluruh JavaScript teload oleh browser. biasanya kita kan meload JavaScript di antara tag head.
oh iya, anda juga bisa mendownload contoh project yang saya buat disini.
Sebenarnya dokumentasi cara menggunakan TinyMCE ini sudah cukup lengkap sekali di websitenya TinyMCE, sekali lagi disini saya hanya mencoba untuk sharing aja, semoga bermanfaat. Terimakasih sudah berkunjung dan membaca artikel saya yang sederhana ini.