04 February 2017

Cara Menggunakan CKEDITOR Pada Modal Bootstrap

Assalamualaikum.
Sudah lama rasanya saya jarang bertemu dengan barisan kode PHP, dikarenakan sudah hampir tidak pernah lagi dapat job hehehe. Kebetulan Job terakhir saya adalah tentang SIGAP ternyata masih bermasalah. Maklum saya waktu buatnya tidak begitu serius, karena banyaknya kesibukan di dunia nyata sehingga saya tidak sempat memeriksa secara detail kesalahan-kesalahan yang ada pada Program tersebut

Baru saja saya dikabari, bahwa ada salah satu fungsi yang tidak berfungsi pada program tersebut, yaitu Texteditor yang pada halaman administrator tidak berfungsi sebagaimana mestinya. Texteditor yang saya gunakan pada Program tersebut adalah TinyMce. Dan detail masalahnya, Menu-menu toolbar pada Texteditor memang tampil normal namun tidak berfungsi. Contohnya saat tombol Link diklik maka akan muncul sebuah Form Popup baru, namun textbox untuk mengisi Link tidak bisa diklik seolah-olah Textbox tersebut mempunyai atribut Read Only

Dugaan awal saya, kemungkinan ada script yang Konflik, tapi setelah saya coba hapus beberapa javascript yang saya duga adalah penyebabnya ternyata hasilnya sama saja. Alhasil saya putuskan untuk mengganti Texteditor TinyMce dengan Texteditor lain yaitu CKEDITOR

Pada halaman Example, CKEDITOR memang lebih menarik desainya daripada TinyMce, dan setelah saya gunakan pada program tersebut. Ternyata hasilnya masih tetap sama seperti sebelumnya waktu masih menggunakan TinyMce.

Saya pun mencoba menelusuri hal ini di Forum Ckeditor untuk mencari solusi, dari Sana saya mendapati informasi bahwa memang hal ini dialami oleh banyak orang bukan hanya saya saja sendiri. karena memang Hampir semua Texteditor mengalami masalah ketika digunakan dalam Modal Milik Bootstrap.

Tapi akhirnya saya mendapati solusinya yaitu dengan membuat sebuah javascript baru dengan isi script sebagai berikut :
Lalu Simpan script tersebut dengan ekstensi js contohnya Fix.js
nah File fix.js tadi di panggil dihalaman index atau pada halaman tempat anda memanggil javascript bootstrap dan Jquery. Namun yang perlu diingat adalah Tempatkan file fix.js ini setelah baris script bootstrap dan Jquery
Cara Menggunakan CKEDITOR Pada Modal Bootstrap

Nah itu dia solusi yang saya dapati untuk mengatasi masalah penggunaan CKEDITOR pada Modal Bootstrap.

Sekian dan Terima kasih
Wassalam


EmoticonEmoticon