Website Sekolah CodeIgniter VI : Menambahkan Editor TinyMce pada Admin

Website Sekolah CodeIgniter VI : Menambahkan Editor TinyMce pada Admin

Hello CodeIgniter Mania.. 😀

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]
<?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;

}
[/php]

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

[php]

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

[/php]

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]

<?php
echo initialize_tinymce();
?>

[/php]

 

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


About the author

gieart administrator

14 Comments so far

Arief WicaksonoPosted on5:40 am - Apr 13, 2012

Tutorial yg bermanfaat, muangstab mastah jadi semangat belajar ni…

AnonymousPosted on2:23 am - Jun 12, 2012

saya coba kok tiny mce nya ga muncul kenapa yah, tidak ada pesan error cuman tiny mcenya ga muncul yg kurang dimana nya? mohon bantuannya

    Gie ArtPosted on4:35 am - May 21, 2013

    Coba di cek di bagian <script type="text/javascript" src="' . base_url() . 'public/js/tiny_mce/tiny_mce.js"></script> mungkin ada kesalahan alamat file tiny_mce.js nya 🙂

Arya HrylabsPosted on8:58 pm - Aug 28, 2012

kug g muncul ea,, solusinya gmana gan.

    Gie ArtPosted on4:35 am - May 21, 2013

    Coba di cek di bagian <script type="text/javascript" src="' . base_url() . 'public/js/tiny_mce/tiny_mce.js"></script> mungkin ada kesalahan alamat file tiny_mce.js nya 🙂

Benedictus Erwin PranataPosted on2:45 am - Nov 28, 2012

Makasih tutorialnya Gan, work fine 🙂

Suhardi YusufPosted on4:12 pm - Dec 24, 2012

gan gi mana cara download source.
code nya.

IrfanPosted on1:45 pm - Apr 7, 2013

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

ariesPosted on3:44 am - May 21, 2013

kok gak muncul gan ??

radyta mugglePosted on3:47 pm - Jun 7, 2013

mas..punya saya juga gak tampil..kenapa ya?
letak tiny_mce nya punya saya
nyoba-di dalamnya ada folder application,public dll.

di dalam folder public ada folder js,css
d folder css ada folder tiny_mce
di dalam folder tiny_mce ada tiny_mce.js dkk
saya nulis syntax nya: $tinymce = ‘

saya udah ganti ./pubic tidak bisa. public/js juga tdk bisa

u/ yg d view/add.php
itu dibagian atas sendiri kan manggilnya?bukan d bawahnya body:?

mohon yang tahu share.soalnya lgi ngerjain buat tugas kampus.makasih

Chung ThaPosted on6:15 am - Aug 22, 2013

sy udah nyoba dan udah muncul tapi ketika di simpan di database kok tag htmnya jadi kode biasa.

Sachroni Gugum MilarPosted on3:23 pm - Oct 2, 2013

eh ya itu kan posisi toolsnya center,cara buat left gimana ya ?

Leave a Reply