TinyMCE Editor merupakan librari untuk mengubah tampilan elemen HTML sendandar menjadi sebuah editor yang memiliki beberapa fitur seperti perataan halaman, heading, bullet numbering, insert ling, insert gambar, dan lain sebagainya.
Ada beberapa cara untuk menggunakan TinyMCE editor di dalam project website kita. Pertama, kita bisa menggunakan CDN TinyMCE yang telah disediakan oleh situs resmi TinyMCE. Kedua, kita bisa download librari TinyMCE dan menyertakan ke dalam paket projek kita.
TinyMCE bisa digunakan dengan gratis dengan fitur setandar. Namun, jika ingin menggunakan fitur-fitur yang lebih banyak, kita bisa upgrade ke paket premium dengan harga $0.40/bulan, paket pro seharga $1.0/bulan, dan paket enterprise sesuai kebutuhan.
Cara Menggunakan TinyMCE Editor
Pertama, kita harus menyertakan librari TinyMCE ke dalam dokumen yang akan menggunakannya. Pada tutorial ini digunakan librari dari CDN. Tambahkan kode di bawah ini di dalam kode <head> atau sebelum penutupnya </head>
<script src="//cloud.tinymce.com/stable/tinymce.min.js"></script>
Kedua, buat sebuah input atau textarea yang akan diubah menjadi TinyMCE Editor. Contoh:
<textarea id="editor">Contoh yang akan dirubah menjadi Editor TinyMCE</textarea>
Ketiga, menerapkan editor kedalam textarea. Buat Javascript dan masukkan kode seperti di bawah ini:
<script>tinymce.init({ selector:'textarea' });</script>Penerapan editor dengan kode javascript di atas akan merubah semua textarea yang ada di dalam halaman tersebut berubah menjadi editor TinyMCE. Jika ingin menerapkannya hanya di editor tertentu, kita bisa mengganti selector dengan id. contoh:
<script>tinymce.init({ selector:'#editor' });</script>Contoh script di atas akan mengubah textarea yang memiliki id editor saja yang diterapkan TinyMCE.
Cara Menghilangkan Menubar TinyMCE
Secara default, TinyMCE menampilkan menubar File, Edit, View, dan Format beserta sub menunya. Jika kita ingin menghilangkan menubar tersebut caranya cukup mudah, tinggal menambahkan opsi menubar: false di dalam kode java script yang kita gunakan. Contoh:
<script>
tinymce.init(
{
selector:'#editor2',
menubar: false
}
);
</script>Hasil eksekusi kode di atas akan tampak seperti demo di bawah ini:
Cara Menambahkan Plugin di TinyMCE
Secara default, plugin yang dipanggil oleh TinyMCE adalah undo, redo, pemformatan (Format), Perataan (Text Align), dan Indentasi. Jika kita ingin menambahkan plugin lainnya maka harus menambahkan opsi plugin beserta value nama pluginnya dipisah dengan spasi. Contoh:
<script>
tinymce.init(
{
selector: '#editor3',
menubar: false,
plugins: 'advlist autolink link image lists charmap print preview'
}
);
</script>Hasil eksekusi kode di atas akan tampak seperti demo di bawah ini:
Cara Mengubah Bahasa TinyMCE
Secara default, TinyMCE akan ditampilkan dalam bahasa Inggris (EN_US). Jika kita ingin menampilkan editor dalam bahasa Indonesia maka harus menambahkan opsi language di dalam konfigurasi TinyMCE tersebut.
Contoh:
<script>
tinymce.init(
{
selector: '#editor4',
menubar: false,
plugins: 'advlist autolink link image lists charmap print preview',
language: 'id'
}
</script>Hasil eksekusi kode di atas akan mengubah bahasa Editor menjadi bahasa Indonesia dan tampak seperti di bawah ini.
Cara Mengambil kontent dari TinyMCE
Cara mengambil konten dari editor TinyMCE adalah sebagai berikut:
<script>
tinymce.init(
{
selector: '#editor5',
menubar: false,
plugins: 'advlist autolink link image lists charmap print preview',
language: 'id'
});
var data = tinyMCE.editors[$('#editor5').attr('id')].getContent({format: 'html'})
jQuery(function(){
jQuery("#ambil").click(function(){
alert(data)
});
});
</script>Demo:
