Thursday, June 1, 2017

Cara Menggunakan TinyMCE 4.6.3

Di artikel kali ini saya akan mencoba share bagaimana menambahkan editor WYSIWYG TinyMCE versi 4.6.3 kedalam suatu project, 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. 

Ok, untuk menerapkannya kita buat sebuah halaman PHP seperti berikut : 

<html>
    <head>
        <title>Tanpa Editor TinyMCE</title>
    </head>

    <body>
        <form method="post" action="">
            Isi Berita : <br/>
            <textarea name="isi" cols="30" rows="10"></textarea><br/>
            <input type="submit" value="simpan"/>
        </form>
    </body>
</html>

 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, https://www.tinymce.com/download/
atau download di sini 

Setelah file tinymce_4.6.3_dev selesai didownload, ekstrak file tersebut, di dalamnya berisi seperti gambar berikut :  
copy seluruh file tersebut kedalam project kita, kalau disini saya masukkan ke folder C:\xampp\htdocs\tiny\tinymce.

setelah itu kita tinggal menambahkan nya kedalam soucecode kita yang sudah kita buat dengan cara menambahkan seperti ini :

<html>
    <head>
        <title>Dengan Editor TinyMCE</title>
        <script type="text/javascript" src="tinymce/js/tinymce/tinymce.min.js"></script>
        <!-- Konfigurasi Standar -->
        <script type="text/javascript">
            tinymce.init({        
                selector: "textarea#isi"
            });
        </script>
    </head>

    <body>
        <form method="post" action="">
            Isi Berita : <br/>
            <textarea id="isi" cols="30" rows="10"></textarea><br/>
            <input type="submit" value="simpan"/>
        </form>
    </body>
</html>

ini adalah cara menampilkan editor WYSIWYG dari TinyCMCE 4.6.3 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 kita bisa menambahkan atau merubah konfigurasinya menjadi  seperti ini :
<html>
    <head>
        <title>Dengan Editor TinyMCE</title>
        <script type="text/javascript" src="tinymce/js/tinymce/tinymce.min.js"></script>
<!-- Konfigurasi Standar -->
<script type="text/javascript">
tinymce.init({        
        selector: "textarea#isi"
    });
</script>
    </head>

    <body>
        <form method="post" action="">
            Isi Berita : <br/>
            <textarea id="isi" cols="30" rows="10"></textarea><br/>
            <input type="submit" value="simpan"/>
        </form>

        <script type="text/javascript" src="tinymce/js/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>

dan hasilnya akan terlihat seperti ini,

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.





0 comments:

Post a Comment

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Lady Gaga, Salman Khan