Nusagatizen

Cara Menggunakan TinyMCE Editor

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:

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:

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:

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:

Demo:



Pencarian Terkait:

Ahmad Budairi

Seorang blogger yang bekerja menjadi freelancer di bidang bahasa pemrograman. Baca biografi Ahmad Budairi atau kunjungi lapaknya di Fiverr. Kontak via email: nusagates@gmail.com. Hubungi via 0822 2500 5825

Tanggapan Kamu?

Back to top button
Close