Mengatasi Masalah CKEditor dan Animsition Pada Templates CoolAdmin

Beberapa waktu yang lalu saya mengalami masalah dimana saya menemukan perilaku yang aneh pada ckeditor yang saya tambahkan pada templates cooladmin. Maksud perilaku yang aneh disini adalah ketika saya mecoba mengklik salah satu icon / button yang ada di tool bar ckeditor, halam web seperti membacanya sebagai sebuah link sehingga saya selalu mendapatkan error 404 ketika salah satu icon ckeditor di klik.  

Setelah diperiksa ternyata hal ini disebabkan oleh plugins Animsition, saya menyadarinya ketika saya mencoba menghapus plugins tersebut. Kendati demikian, hal ini bagi saya bukan solusi, karena saya membutuhkannya untuk membuat loading halaman terlihat lebih lembut, dan akhirnya saya menemukan cara bagaimana mengatasi masalah tersebut dengan cara – cara berikut ini.

1. Masuk ke folder vendor/js lalu edit file main.js
2. Pada line 1211 tepatnya pada bagian linkelement, Anda bisa menambahkan id/class ckeditor supaya tidak dibatasi / tidak di eksekusi oleh Animsition
   

    linkElement: 'a:not([target="_blank"]):not([href^="#"]):not([class^="chosen-single"])',

3. Dalam contoh kasus ini saya tidak menambahkan id, melainkan class, karena id yang ada di toolbar icon ckeditor berbeda – beda
4. Sehingga nanti linkelement yang ada bisa terlihat dengan script berikut
   

   linkElement: 'a:not([target="_blank"]):not([href^="#"]):not([class^="chosen-single"]):not([class^="cke_button"])',

Menurut saya, Plugins tersebut membaca icon pada toolbar ckeditor sebagai sebuah link sehingga hal tersebutlah yang membuat saya selalu diarahkan ke halaman error 404. Dengan menambahkan class/ id untuk dibatasi pada plugins animsition, maka masalah ini bisa diatasi.

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple