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.

Masuk ke folder vendor/js lalu edit file main.js
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"])',
```
Dalam contoh kasus ini saya tidak menambahkan id, melainkan class, karena id yang ada di toolbar icon ckeditor berbeda – beda

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.

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

7 Responses to "Mengatasi Masalah CKEditor dan Animsition Pada Templates CoolAdmin"

sufyan YaanDecember 19, 2019 at 6:40 AM

Mantul, gan. Ternyata hanya di tambahkan : :not([class^="cke_button"])',
Hanila PendarBintangDecember 21, 2019 at 10:34 AM

Permasalahan cukup besar yang bisa diselesaikan dengan begitu saja....
Sering bikin kita yang baru tahu bilang "Oala....begitu"
Mbul KecilDecember 21, 2019 at 10:16 PM

Sekalian bisa belajar istilah pemrograman nih, lumayan nambah ilmu
Agus WartegDecember 23, 2019 at 1:39 PM

Kurang paham kalo masalah bahasa pemrograman website, tapi makasih banyak infonya kang, siapa tahu di masa depan butuh info tersebut.
Ikrom ZainDecember 24, 2019 at 8:32 AM

lama enggak kemari
saya simpan dulu makasih sharingnya mas...
UnknownFebruary 3, 2020 at 6:55 PM

Thank you, kang. Saya juga baru ngalamin. Coba cari2 ga nemu. Akhirnya disabled satu per satu. Ketemu bentrok antara ckeditor dengan animsition.

Tadinya udah mau di disabled juga animsition-nya. Untungnya ketemu sama postingan ini.

Thank you.
UnknownFebruary 3, 2020 at 7:08 PM

Tambahan, saya menggunakan :not([class^="cke_toolbox"]) supaya semua toolbar berfungsi dengan benar

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin