Website Sekolah CodeIgniter VI : Menambahkan Editor TinyMce pada Admin

Hello CodeIgniter Mania.. :D

Kali ini aku akan menuliskan tutorial sederhana untuk menambahkan Editor TinyMce pada CodeIgniter. Editor ini akan memudahkan bagi pengelola (admin) website untuk mengupdate konten website  karena bisa dikatakan Editor ini sebagai “Office” dalam website.  Pada kesempatan kali ini kita akan menambahkan Editor ini pada modul Admin Pages yang pembuatannya telah dibahas pada postingan terdahulu. Berikut ini adalah langkah-langkah untuk menambahkan Editor TinyMce pada CodeIgniter 2.0.2 :

1. Download master TinyMce pada websitenya => http://www.tinymce.com/download/download.php

2. Ekstrak file zip dari hasil download tersebut

3. Kopikan folder tiny_mce yang terletak pada  tinymce/jscripts ke dalam  public/js pada folder project CodeIgniter Anda. Sehingga struktur foldernya menjadi seperti berikut:

Struktur Folder Editor TinyMce

Struktur Folder Editor TinyMce

4. Membuat helper dengan nama tinymce_helper.php dan disimpan pada folder application/helpers dan tuliskan kode program berikut pada file/ helper tersebut:

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
function initialize_tinymce() {
$tinymce = '<script type="text/javascript" src="' . base_url() . 'public/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas",
theme_advanced_toolbar_location : "top",
convert_urls : false,
height: 300,
width:700
});
</script>';
return $tinymce;

}

5.  Panggil helper tersebut melalui autoload pada file application/config/autoload.php sehingga pada pemanggilan helper menjadi seperti berikut:


$autoload['helper'] = array('url','form','tinymce');

6. Kita akan mencoba menambahkan editor ini ada modul Add Pages yang telah kita buat sebelumnya. Oleh karena itu sekarang buka file application/views/admin/pages/add.php kemudian tambahkan kode program (pemanggilan TinyMce)  berikut pada baris paling atas:


<?php
echo initialize_tinymce();
?>

 

7. Uji  Coba. Jika berjalan dengan baik , ketika kita akan menambah Page maka tampilan form isian utk body akan tampil editor TinyMce sperti berikut:

Tampilan Editor TinyMce Pada Modul Pages

Tampilan Editor TinyMce Pada Modul Pages

Sekian dan selamat mencoba. Terima kasih :)

DOWNLOAD FULL SOURCE CODE | ONLINE DEMO

username : admin

password : admin


  • Arief Wicaksono

    Tutorial yg bermanfaat, muangstab mastah jadi semangat belajar ni…

    • gieart

      Makasih mas arif.. semoga bermanfaat.. n semoga bisa segera melanjutkan tutorial ini *sok sibuk* :) )

  • Irfan

    nice artikel dan berjalan dengan baik, makasih mas artikelnya sangat membantu..

Plugin from the creators of Brindes :: More at Plulz Wordpress Plugins