Editor Visual Halaman Website dengan TinyMCE

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
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. :)
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

5 comments

comments
Anonymous
7 October 2014 at 13:49 delete

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

Terima kasih

Reply
avatar
24 November 2014 at 20:40 delete

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

Reply
avatar
19 February 2016 at 00:56 delete

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

Reply
avatar
19 October 2016 at 13:02 delete

maaf gan link mati ..

keep ngoding gan

Reply
avatar

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.