Kamis, 27 September 2012

Integrasi Text Editor TinyMCE di Codeigniter

Text Editor merupakan salah satu fitur penting yang wajib Anda buat ketika berhubungan dengan pembuatan aplikasi web. Jika Anda sudah terbiasa dengan CMS Joomla atau Blog, ketika kita hendak menulis artikel akan disertai fitur text editor untuk mempermudah user melakukan styling terhadap teks yang akan ditulis. Bayangkan saja, jika Anda hanya dihadapkan dengan form textarea untuk menuliskan suatu artikel yang tentu saja akan erat kaitannya dengan penambahan link, gambar, video, flash atau lainnya.

Sebenarnya, ada bermacam-macam texteditor WYSIWYG(What You See Is What You Get) sebagai plugin dalam aplikasi web. Untuk postingan kali ini, saya hendak mencoba berbagi pengalaman dalam integrasi texteditor TinyMCE ke dalam framework favorit saya, yaitu Codeigniter. Andai saja Anda pernah melakukan integrasi TinyMCE ke dalam aplikasi web tanpa framework, pengaturan-pengaturannya tidak terlalu berbeda ketika hendak kita integrasikan dengan Codeigniter.

Pertama, tentu saja harus download terlebih dahulu plugin TinyMCE-nya di sini. Pilih versi stable saja. Pastikan Anda sudah memiliki project Codeigniter di dalam server lokal. Buat folder ‘js’ di dalam root aplikasi. Extract tinyMCE hasil download terlebih dahulu. Copy-kan folder tiny_mce dari folder tinymce/jscripts/ ke dalam folder js yang telah dibuat sebelumnya.

Buat sebuah file view di dalam folder views, misalkan editor_view.php. Ketikkan script berikut ini.





Tiny MCE












Simpan, dan buat file controller untuk memanggil view di atas. Misalkan saya membuat controller dengan nama post.php. Pastikan Anda membuat aturan-aturan penulisan controller sesuai aturan yang ada di codeigniter. Buat fungsi index dan isikan kode di bawah ini:



class Post extends Controller {

function Post()
{
parent::Controller();
}

function index()
{
$this->load->view('editor_view');
}
}


Semoga bermanfaat ... ^_^



Sumber : http://www.catatankaki.com
               http://muhammadfarid.net

Tidak ada komentar:

Poskan Komentar

 

Design By:
SkinCorner