Cara Mengatasi Bug Fullscreen Pada TinyMCE

09 September 2020 by Zed

Cara Mengatasi Bug Fullscreen Pada TinyMCE - Bagaimana cara mengatasi bug fullscreen pada text editor tinymce?

Tutorial ini saya buat karena mungkin sewaktu-waktu saya akan membutuhkannya lagi. Bug ini terjadi pada sebagian template dimana text editor tinymce ketika di pilih fullscreen yang terjadi malah tertutup menu navbar, jadi terlihat tidak fullscreen. Ini terjadi karena pengaruh z-index yang ada di css navbar. Setelah browsing sana-sini akhirnya saya menemukan pencerahan.

Berikut ini langkah-langkahnya : 

Langkah-langkah

Disini saya menggunakan template baseadmin inspinia, dan yang terjadi seperti ini ketika saya click fullscreen

Jadi, tinymce tidak menutupi menu sidebar dan header.

Lalu, setelah saya korek-korek pluginsnya, akhirnya saya menemukan script untuk mengatasi bug tersebut.

  1. Pertama kamu bisa edit z-index pada css menu sidebar dan header
  2. Menggunakan script pada tinymce

Disini saya menggunakan opsi yang kedua.

Script yang saya gunakan adalah seperti berikut :

 tutorial tinycme

Di code setup ada action FulscreenStateChanged. Nah disitu saya menggunakan attribut nav karena di menu sidebar dan header saya menggunakan tag nav.

Kamu bisa mengedit actionnya dengan hide atau fadeOut, show atau fadeIn.

Hasilnya seperti berikut :

tutorial tinymce

Kesimpulan

Tidak semua template akan ada bug seperti itu. Saya menemukan bug tersebut karena saya menggunakan template baseadmin INSPINIA. Fitur Fullscreen ini juga sangat berguna jika kamu mengetik ribuan baris.

 

Itulah tutorial mengenai Bug Fullscreen TinyMCE. Sampai jumpa di artikel selanjutnya...

Komentar