Bootstrap – CKEDITOR Tidak Muncul Pada Modal

By , April 7, 2017,

CKEDITOR Tidak Muncul Pada Modal – ckeditor adalah form yang didesain yang mempunyai fungsi untuk menginputkan berita. Kenapa berguna untuk menginputkan berita, karena pada form tersebut terdapat beberapa fungsi atau menu-menu format text yang dapat digunakan untuk membuat text menjadi lebih menarik.

Pada dasarnya ckeditor ini fungsi tambahan pada plugin bootstrap yang penempatannya include dalam form textarea pada form html. Untuk menampilkannya mengkombinasikan dengan script jquery. Script jquer tersebutlah yang memanggil fungsi ckeditor pada plugin bootstrap tersebut.

Sebelum sharing ini saya tulis, saya mengalami masalah kenapa popup modal pada bootstrap tidak dapat menampilkan ckeditor tersebut setetelah di klik fungsi modalnya. Kondisi yang ada, modal popup tetap muncul, form textarea juga muncul namun fungsi untuk format-format text pada text areanya tidak muncul.

Cek permasalahan mulai script modal, source plugin ckeditor hingga script pemanggilnya. Akhirnya setelah beberapa hari, barulah ketemu apa permasalahannya. Masalah ini muncul karena memang modal yang saya buat tidak saya tempatkan pada satu halaman dengan fungsi klik modalnya, dengan kata lain, modal saya kumpulkan pada satu tempat. Nah berikut ini pemecahan masalah kenapa ckeditor tidak muncul pada popup modal saya.

CKEDITOR Tidak Muncul Pada Modal

Ketika Belum Muncul

Berikut penempatan script pemanggilan ckeditor pada template bootstrap saya sebelum masalah ini terselesaikan. Script pemanggilan ini sudah saya cek dengan script pemanggilan jquery lainya tidak ada mengalami bentrok, namun modal dengan ckeditor tidak mau tampil.

sebelum ckeditor berhasil

sebelum ckeditor berhasil

Setelah ckeditor tampil / berhasil

Dan akhirnya solusipun di dapat, saya pindahkan pemanggilan ckedito tersebut yang sebelumnya berada pada bagian bawah dari html template saya. Langsung saya pindahkan ke bawah modal di mana saya tempatkan. Dan akhirnya ckeditor dengan modal muncul.

Setelah ckeditor tampil / berhasil

Setelah ckeditor tampil / berhasil

Hasil ckeditor modal

Berikut tampilan bagaimana ckeditor berada pada popup modal yang scriptna tidak satu halaman dengan halaman utama atau index.

Hasil ckeditor modal

Hasil ckeditor modal

Dan seperti gambar diataslah yang saya maksud. Form diatas saya gunakan untuk form menginput berita pada sebuah projek web pemerintah. Demikian sharing cara menampilkan ckeditor yang bermasalah pada modal popup bootstrap seperti kasus saya diatas.

 

 

Category: Artikel

Tentang: Abdul Rohman Wahid, ST

Programmer yang Bekerja menjadi tenaga ahli IT di Instansi Pemerintah Provinsi Riau. Saya biasanya menulis di blog ini terkait pemrograman. Selain itu Saya juga aktif mengelola web searti.com, aplikasikan.com dan kasitau.com. TLP/WA: 082285417494. Profil Lengkap.

Leave a Reply

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