Editor Visual Halaman Website dengan TinyMCE

Saat ini rata-rata aplikasi yang dibangun sudah berbasis visual semua. Tidak hanya aplikasinya, Editor-editor juga sudah banyak yang menawarkan fitur WYSIWYG (What You See Is What You Get) artinya semua serba visual. Hasil yang terlihat di editor begitulah yang akan kita dapatkan sebagai outputnya; dalam hal ini sebut saja contohnya seperti editor Dreamwaver.

Selain itu, Pada aplikasi website yang kita bangun juga dapat kita tanamkan Editor Visual dengan TinyMCE atau CKEditor. Kedua Editor tersebut memiliki fitur-fitur seperti yang ada pada microsoft office (word) yang banyak bermain klik untuk melakukan proses dan tentunya akan semakin memanjakan kita. Kabar baiknya lagi kedua editor tersebut bersifat free artinya kita bebas menggunakannya tanpa perlu membayar lisensi. Tapi yang akan saya bahas hanya TinyMCE karena saya lebih suka menggunakannya.

Editor Visual Pada Halaman Website dengan TinyMCE

Pada saat postingan ini saya tulis TinyMCE telah merilis versi ke 4 dengan pembaruan dan penambahan beberapa fitur pada versi sebelumnya. Sebelum kita mulai, silahkan Donwload dulu tinymCE disini.

Cara Memasang TinyMCE dan Responsive File Manager

1. Sebelum kita mulai, Agar Hasilnya lebih maksimal, sebaiknya anda juga mendownload master Responsive File Manager yang akan kita gunakan sebagai file manager di TinyMCE nantinya. Cek disini.

2. Selanjutnya silahkan Ekstrak dan sejajarkan kedua Tools tersebut (TinyMCE dan Responsive File Manager) didalam folder projek anda sehingga tampilannya akan menjadi seperti berikut ini.

Editor Visual Pada Halaman Website dengan TinyMCE

3. Langkah Terakhir, Buat sebuah file yang akan menampilkan editor tinyMCE pada contoh (gambar diatas) saya menggunakan file index.php yang isinya bisa anda download disini. Hasil yang akan anda peroleh nantinya kurang lebih seperti dua gambar dibawah ini. Selamat Mencoba. Happy Coding. :)

Editor Visual Pada Halaman Website dengan TinyMCE

Editor Visual Pada Halaman Website dengan TinyMCE

Jangan Lupa Untuk Mengedit File Config file manager yang ada di folder filemanager/filemanager/config/config.php. Happy Coding Guys. :)

Post a Comment

5 Comments

  1. Min, bisa sekalian kasih source lengkapnya gak,soalnya punya ane gak jalan ini..

    Terima kasih

    ReplyDelete
  2. Gan, bisa kasih tau gak cara esit file config.php nya gimana ? Thanks

    ReplyDelete
  3. Gan, bagi link download tyinymce nya dong yang udah fix. gagal mulu cobanya

    ReplyDelete
  4. maaf gan link mati ..

    keep ngoding gan

    ReplyDelete

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.