Cara Menggunakan TinyMCE

Standard

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

saat kita buka di browser akan tampil seperti ini,

tinyMCE

tinyMCE

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

pilihan_download

 
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

extract

 
buka folder tinymce yang sudah di ekstract tersebut, didalamnya akan menemukan file ini

yang_kita_butuhkan

 
copy seluruh file ini kedalam project kita, kalau disini saya masukkan ke folder tinymce, sehingga tampilan project saya seperti ini

my_project

 
setelah itu kita tinggal menambahkan nya kedalam soucecode kita dengan cara menambahkan seperti ini

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

default_tinyMCE

 
apabila anda ingin tampilan editor WYSIWYG yang lebih lengkap anda bisa menambahkan atau merubah konfigurasinya menjadi  seperti ini

 
dan hasilnya akan terlihat seperti ini,

classic_look_tinyMCE

 
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.

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.

My Google+ Account