Integrasi Teks Editor NicEdit Pada View CodeIgniter

NicEdit

Adalah JavaScript teks editor yang memudahkanmu memformat teks langsung pada halaman browsermu.

Download dan Extract

Buatlah folder bernama testing

Download NicEdit dari http://nicedit.com dan simpan pada folder testing.

Lalu extractlah hasil downloadannya maka akan menghasilkan seperti terlihat pada gambar dibawah ini:

Integrasi pada Aplikasi CodeIgniter

Diketahui:

Document root saya adalah xampp/htdocs

Aplikasi CodeIgniter saya berada di folder  pegawai

Peletakkan NicEdit pada Aplikasi CodeIgniter

Buatlah folder js dan folder images dalam folder pegawai sehingga terlihat seperti gambar dibawah ini:

Lalu copy file nicEdit. js dan masukkan ke dalam folder js

Copy juga gambar nicEditorIcons.gif ke dalam folder images

Penggunaan Pada View CodeIgniter

Buatlah satu file View bernama testing.php dengan isi seperti dibawah ini

<html>
<head>
<title>File View CodeIgniter</title><script type=”text/javascript”>

var base_url=”<?php echo base_url();?>”

</script>

<script type=”text/javascript” src=”<?php echo base_url();?>/js/nicEdit/nicEdit.js” ></script>

<script type=”text/javascript”>

bkLib.onDomLoaded(function() {

new nicEditor({fullPanel : true}).panelInstance(‘pertanyaan’);

});

</script>

</head>

<body>

<textarea ¬†id=”pertanyaan”></textarea>

</body>

</html>

Keterangan:

  • var base_url=”<?php echo base_url();?>”, kode ini berarti kita membuat variabel base_url yang berisi base_url() dari aplikasi CodeIgniter kita, pembuatan variabel base_url pada JavaScript ini berguna sekali karena variabel ini akan kita gunakan dalam file nicEdit.js
  • panelInstance(‘pertanyaan’), kode javascript ini akan mencari id dari elemen form yang mempunyai id=”pertanyaan”

Untuk fungsi-fungsi lainnya dari NicEdit, silahkan baca artikel ini.

Perubahan pada file nicEdit.js

Buka file nicEdit.js dan editlah kode dibawah ini:

iconsPath : ‘../nicEditorIcons.gif’

Menjadi

iconsPath : base_url + ‘images/nicEditorIcons.gif’

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura‘.

You may also like...

Leave a Reply

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