Cara Memasang CKEditor Pada Codeigniter
Muh. Ashhar Bustan

Cara Memasang CKEditor Pada Codeigniter

CKEditor merupakan salah satu teks editor WYSIWYG yang biasa digunakan dalam aplikasi berbasis web. CKEditor memiliki fasilitas yang hampir sama dengan Microsoft Office sehingga penggunaannya begitu mudah. CKEditor akan sangat berguna ketika kita akan menulis artikel pada web/blog, cukup dengan mengetik artikel seperti ketika kita mengetik pada Microsoft Word tanpa perlu menggunakan tag-tag HTML. Salah satu kelebihan CKEditor adalah tersedia versi free dengan fasilitas yang lengkap serta memiliki banyak plugin gratis yang bisa dimanfaatkan.

Download versi terbaru CKEditor versi standar disini. Untuk menambah beberapa plugin (customize) bisa melalui link ini dan anda tinggal pilih plugin yang dibutuhkan.

Baca Juga: Mengenal Bahasa Pemrograman Java


Halaman Download CKEditor

 

Sekarang bagaimana caranya memasang CKEditor pada Codeigniter?

1. Download CKEditor dan kemudian ekstrak.
2. Copy folder CKEditor ke folder web atau aplikasi agan, contohnya di sini saya meletakkan folder CKEditor pada folder asset\template\js\plugins
Folder CKEditor

3. Kemudian sertakan ckeditor.js pada halaman View

<script type='text/javascript' src='<?php echo base_url(); ?>asset/template/js/plugins/ckeditor/ckeditor.js'></script>  

4. Selanjutnya pasang CKEditor pada View, misalnya pada file editor.php. Berikut script pada file editor.php

Baca Juga: Cara Membuat Rowspan Dinamis Pada Tabel Dengan PHP



<form>
<h2>CKEditor</h2>
<textarea id="ckeditor" name="isi" style="height: 800px;"><?php echo $isi;?></textarea>
</form>   

5. Kemudian untuk confg CKEditor, letakkan script javascript berikut pada file view yang sama (editor.php). Agan bisa melakukan modifikasi sesuai kebutuhan agan.

<script>
var ckeditor = CKEDITOR.replace('isi',{
			height:'600px'
});

CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('editable');
</script>

Perhatikan tulisan berwarna merah pada baris perintah dibawah:
var ckeditor = CKEDITOR.replace('id_textarea',{
            height:'600px'
});
sesuaikan dengan id <textarea> yang akan dijadikan editor contohnya: <textarea id="id_textarea"  name="namatextarea"></textarea>

Hasilnya seperti ini:

 

6. Selamat Mencoba :)

Baca Juga: Struktur Program Aplikasi Java


YANG LAIN:

Komentar

Cari Artikel Lainnya Disini