Cara Penggunaan TinyMCE sebagai WYSIWYG Editor

09/01/2018    Ekky Ridyanto    706     Website

Pada bagian ini kita akan belajar tentang bagaimana cara penggunaan TinyMCE pada PHP. TinyMCE ini merupakan sebuah Content editor WYSIWYG Javascript yang berbasis Web. WYSIWYG sendiri singkatan dari What You See Is What You Get. Artinya apa yang kamu lihat itulah yang kamu dapatkan. Jadi dengan adanya TinyMCE kita dapat memiliki kemampuan untuk mengubah field textarea HTML atau elemen HTML lainnya sebagai content editor dan sangat mudah untuk diintegrasikan ke dalam Content Management Systemsnya. Nah jika teman teman pernah menggunakan CMS Wordpress yang dimana kita bisa memodifikasi format tulisan seperti menebalkan atau memiringkan tulisan dengan sangat mudah tanpa harus melakukan CSS atau apapun dan WYSIWYG editor ini sangatlah cocok untuk mengelola content website. Langkah pertama kita download terlebih dahulu plugin dari website resminya https://www.tinymce.com/

Nanti ada opsi yang bisa teman teman gunakan. Opsi yang pertama teman teman bisa gunakan embed dari internet dengan melakukan copy paste link embednya sebagai berikut

Cara-Penggunaan-TinyMCE-sebagai-WYSIWYG-Editor-1

atau kita gunakan file download TinYmCE yang disimpan dilocal servernya. Jadi dua duanya tetap bisa kita gunakan dan tidak masalah. Setelah teman teman download file tinyMCEnya lalu file downloadnya diextract dan pindahkan kedalam folder khusus untuk menerapkan editor dari tinyMCEnya. Katakanlah kita buat sebuah folder dihtdocs dengan membuat file baru dengan nama index.php didalam folder tersebut. Kemudian kita buat struktur HTML seperti biasa lalu ini bagian terpenting kita butuh embed script dari file tinymce.min.jsnya

Cara-Penggunaan-TinyMCE-sebagai-WYSIWYG-Editor-2

Lalu menyediakan tag <textarea> sebagai editor contentnya yang dibungkus dengan tag <form> dengan method POST

Cara-Penggunaan-TinyMCE-sebagai-WYSIWYG-Editor-3

Selanjutnya kita akan mulai melakukan konfigurasi elemennya dengan tinymce.init() dalam bentuk object dengan menentukan pasangan key dan value

Cara-Penggunaan-TinyMCE-sebagai-WYSIWYG-Editor-4

Key/opsi yang pertama adalah selector: yaitu nama elemen HTML yang akan dijadikan sebagai content editornya katakanlah elemennya adalah textarea

Cara-Penggunaan-TinyMCE-sebagai-WYSIWYG-Editor-5

Atau teman bisa menggunakan id untuk elemen <textarea> ataupun class. Tentu bila gunakan id kita gunakan (#) sedangkan class gunakan (.) dan bila tidak kesalahan maka teman teman bisa lihat dengan sangat mudah kita sudah berhasil mendapatkan full feature web editing yang sangat powerfull seperti ini

Cara-Penggunaan-TinyMCE-sebagai-WYSIWYG-Editor-6

Itu dia cara bagaimana menggunakan atau melakukan instalasi plugins tinymCe pada halaman websitenya. Terima kasih

Artikel, PHP, Web Design, Javascript, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More