Integrasi CKEditor ke dalam Codeigniter

Selamat Pagi / Siang / Sore / Petang / Malem semuaa nya 😄

Kali ini sy akan berbagi tips cara integrasi CKEditor ke dalam framework Codeigniter.

Terkadang kebutuhan akan Text editor dalam suatu sistem menjadi keharusan apalagi website yang berhubungan dengan perkontenan. Langsung saja gass biar tidak lama-lama. 

Persiapkan sesajennya :

  1. Codeigniter v3.11, download disini
  2. Bootstrap 4, download disini
  3. Plugin CKEditor, bisa di download disini, kalian bebas mau pilih yg versi minimal, standar, apa full package, yang penting ngak bebanin total size program kalian kedepannya aja.

Setelah semua sesajennya telah disiapkan, selanjutnya mari kita racik semua perlengkapan yang sudah didownload tadi. 

Disini sy tidak akan menjelaskan tutorial dasar integrasi Codeigniter & boostrap karena sudah banyak yg ngasi tutorialnya 😆

Langkah 1 :

Silahkan buka Sublime Text, Visual Studio Code, Atom, Notepad ++ atau apalah yang penting bisa buat ngoding.

lalu kalian copy kan library CKEditor nya seperti tampilan berikut ini :

disini sy menggunakan CKEditor versi 4.9.2

Langkah 2 :

Untuk belajaran, kita bisa memodifikasi tampilan dari file welcome_message.php yang ada di folder application/views biar bisa langsung praktek

 Include kan bootstrap, Jquery, dan CKEditornya seperti gambar tersebut

Langkah 3 :

kita buat objek html nya yaitu textarea yang nantinya sebagai tempat untuk CKEditor melakukan permak tampilan dari standar menjadi textarea yang kaya akan fitur

 Keterangan :
  1. Textarea sy kasih nama / name tulisan 
  2. Kemudian kita panggil method dari CKEDITOR untuk mereplace tampilan dari textarea yang sudah kita buat dengan nama tulisan, CKEDITOR.replace('tulisan);
Setelah itu, jangan lupa disimpan untuk melihat perubahan yang terjadi, langsung saja buka browser kalian. Kalau berhasil, seharusnya tampil seperti ini :
Cukup mudah, kan?? 😃😃. Oh iya, apabila kalian tidak ingin menampilkan semua fitur, bisa kalian lihat contohnya dari website CKEDITOR disini. Biar lebih afdhol, kita praktekkan saja salah satu contohnya 😁

Dan outputnya seperti ini : 

* Mungkin ada fitur yang tidak tampil pada saat menerapkan contoh syntax diatas, dikarenakan versi download CKEditor yang dipilih berbeda-beda, ada versi minimal, standar dan full fitur.


Sekian tips singkat dari sy mengenai integrasi CKEditor dengan Codeigniter, apabila ada yg perlu ditanyakan, tinggalkan komentar dibawah yaa. Terima kasih 😉

Artikel Terkait


EmoticonEmoticon