Cara Membuat Text Editor WYSIHTML5 pada PHP dengan TinyMCE

Cara Membuat Text Editor WYSIHTML5 pada PHP dengan TinyMCE – Setelah sebelumnya saya memposting tentang memasang Text Editor menggunakan CKEditor pada aplikasi kita, sekarang saya akan memposting tentang Teks Editor yang lainnya yaitu TinyMCE. Plugin ini lebih mirip dengan Word menurut saya, sobat bisa bandingkan dengan CKEditor dengan mendownload projectnya pada akhir postingan.

 

Baca Juga :

Memasang Text Editor CKEditor WYSIHTML5 pada PHP dengan Mudah

Memasang Text Editor Summernote WYSIHTML5 dengan Mudah

 

Membuat TinyMCE Default

Penggunaan plugin TinyMCE juga sangat mudah dan fiturnya juga lengkap. Sobat bisa menggunakan bawaannya atau bisa juge mengcustomnya. Caranya adalah sebagai berikut

1. Download plugin tinymce pada situs resminya disini atau sobat bisa mendownloadnya di akhir postingan ini.

 

2. Setelah itu masukkan librari tinymce pada tag <body> paling bawah di file index.php seperti contoh berikut

 

3. Kemudian membuat file textarea seperti contoh dibawah

 

4. Tambahkan tag <script> dibawah file javascript tinymce.js dengan kode dibawah

 

5. Jika sobat jalankan project sobat maka tampilanya akan menghasilkan seperti gambar dibawah

 

Membuat Custom pada TinyMCE

Menu pada plugin TinyMCE juga sangat banyak, dan sobat bisa mengkostumnya juga ingin menampilkan yang mana saja seperti pada CKEditor. Caranya adalah sebagai berikut :

1. Buat textareanya seperti contoh berikut

 

2. Kemudian tambahkan tag <script> dengan kode dibawah

 

3. Jika sobat jalankan project sobat maka pada textarea akan menjadi seperti dibawah

Namun Jika upload images akan menjadi seperti dibawah dan kita bisa membuat customnya untuk upload images pada TinyMCE dari Local Storage

Membuat Upload Foto pada TinyMCE

Jika sobat menggunakan default, TinyMCE tidak menyediakan upload Images/Foto oleh karena itu kita harus membuatnya sendiri. Berikut adalah cara membuat upload foto/gambar pada TinyMCE :

1. Buat textarea seperti berikut

 

2. Pada tag <script> tambahkan kode berikut

Penggunaanya mirip seperti custom pertama namun sobat perlu menambahkan baris

Untuk menambahkan action upload maka sobat perlu juga menambahkan kode seperti dibawah

 

3. Seperti yang tertulis uploadtiny.php yang berarti kita perlu membuat file uploadtiny.php kemudian isikan dengan kode dibawah

 

4. Jika sobat jalankan maka pada upload images akan muncul tabĀ  upload images seperti gambar dibawah

Jika sobat klik Browse dan pilih foto maka secara otomatis akan membuat folder upload dan akan terisi gambar yang tadi sobat upload.

 

Sekian postingan saya tentang Cara Membuat Text Editor WYSIHTML5 pada PHP dengan TinyMCE. Jika ada pertanyaan silahkan sobat tinggalkan pada kolom komentar dibawah. Jika ada kesalahan saya mohon maaf.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

 

 

 

2 thoughts on “Cara Membuat Text Editor WYSIHTML5 pada PHP dengan TinyMCE

Leave a Reply

Your email address will not be published. Required fields are marked *

seventeen − 5 =