Thursday, December 18, 2014

Membuat Halaman Text editor HTML PHP dengan TINY MCE

Website,Blog,Portal pada saat ini sudah semakin banyak dimiliki oleh perusahaan ataupun perorangan. Hal ini dikarenakan pembuatan website sangat mudah dilakukan dan tidak membutuhkan waktu yang lama. Ketersediaan tools yang semakin banyak dan bagus mendorong orang untuk membuat website. Biaya yang dikeluarkan pun cukup murah untuk membuat website, bahkan jika mau membuat sendiri seseorang tidak membutuhkan biaya sama sekali. Orang awam yang tidak mengerti kode HTML pun bisa membuat website sendiri, sudah banyak web template yang dapat digunakan secara gratis misalnya Wordpress,joomla, dll. Biaya yang timbul nantinya hanya untuk menyewa hosting dan membeli nama domain nya. 

Dalam sebuah website,Blog, atau portal tentunya akan ada tulisan atau artikel dan juga gambar didalamnya. Bila seseorang menggunakan template seperti wordpress atau joomla sudah disediakan halaman admin untuk melakukan editing artikel yang akan di posting pada websitenya. Namun bagaimana jika seseorang membuat websitenya sendiri, tentunya mereka membutuhkan sebuah tools untuk membantu dalam penulisan artikel yang akan di post pada websitenya. Mungkin saja seseorang akan menghafal setiap tag HTML untuk mengedit artikelnya seperti tag bold,italic,underline,create table, insert picture dll. tapi hal itu tentunya sangat tidak praktis dan menyita waktu. 

Pada kesempatan ini mari kita belajar untuk memasang sebuah tools editor html, sehingga kita dimudahkan dalam penulisan artikel website kita. Tools yang digunakan bernama TinyMCE, bisa langsung kita kunjungi dan download di : http://www.tinymce.com/  . TinyMCE menyediakan secara cuma-cuma tools editor nya sehingga kita dapat mendownloadnya dengan gratis. Contoh dari tampilan TinyMCE adalah seperti berikut.

TinyMCE menyedikan beberapa contoh penggunaan editor ini, bisa kita lihat di : http://www.tinymce.com/tryit/basic.php dihalaman tersebut ada beberapa contoh penggunaan editor ini mulai dari yang sederhana sampai yang kompleks.

Nah, berikut ini langkah-langkah jika kita ingin menginstal editor tersebut pada website kita :
  1. Download Paket editor pada website TinyMCE  http://www.tinymce.com/download/download.php
  2. Setelah itu letakkan pada folder root tempat dimana website anda di upload
  3. Selanjutnya buatlah sebuah Halaman web, bisa HTML atau PHP misalnya dengan nama buat_artikel.php
  4. Letakkan script berikut ini pada script buat_artikel.php sebelum Tag </head>
  5. 
    < script type="text/javascript" src="<your installation path>/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 moxiemanager"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
    });
    < / script >
    - Perhatikan pada bagian : <your installation path>/tinymce/tinymce.min.js arahkan path tepat pada tinymce.min.js. sesuaikan dengan folder dimana anda letakkan paket TinyMCE yang sudah anda download pada langkah 1.
  6. Kemudian buatlah Form dengan text area sebagai tempat menulis artikel, atau copy paste script berikut ini di dalamTag body
  7. 
    < form method="post" action="somepage" >
        < textarea name="content" style="width:100%" >< / textarea >
    < / form >
    
    
    
  8. Selanjutnya cobalah halaman yang sudah di buat tadi.
  9. Jika belum jalan coba periksa kembali bagian script TinyMCE pada langkah 4.
Nah cukup mudah bukan, silahkan mencoba.. semoga bermanfaat..

4 comments:

  1. nah cukup mudah,, tetapi ga lengkap... cara ngeliatin postting di mana? code buat agar postingan mucul di artikel mana? lo ngetik kalo ga muncul sama saja oon

    ReplyDelete
  2. Terima kasih atas infonya, gan. Nanti lain waktu akan saya coba memakai library TinyMCE nya.

    Kunjungi blog saya ya: https://tedsu.mahasiswa.atmaluhur.ac.id
    dan website kampus saya: http://www.atmaluhur.ac.id

    ReplyDelete