Integrate Xinha WYSIWYG Editor into CodeIgniter
Selama 2 hari nonstop aku googling sana sini karena penasaran bagaimana cara mengintegrasikan WYSIWYG(What You See Is What You Get) HTML Editor kedalam CodeIgniter. Hasil googling ternyata aku punya 3 kandidat yaitu TinyMCE, FCKEditor dan Xinha.
Untuk TinyMCE bisa direview di http://tinymce.moxiecode.com/, FCKEditor di http://www.fckeditor.net/ dan Xinha di http://trac.xinha.org/ .
Setelah aku unduh dan aku oprek ketiga editor tadi aku punya kesimpulan, untuk TiyMCE merupakan WYSIWYG Editor yang sangat elegan dan mudah sekali untuk digunakan dan diintegrasikan pada CodeIgniter namun sayangnya fitur Image Manager (MCImage Manager) dan File Manager(MCFile Manager) kita harus merogoh kocek lagi (maklumlah anak kost dompetnya tipis hehehe…
), karena tidak bisa diunduh secara bebas :roll: akhirnya aku mengurungkan niat untuk menggunakan editor yang satu ini, walaupun sebenarnya ada yang telah menyediakan Ibrowser plugin dan Imanager plugin untuk TinyMCE (bisa direview disini)namun ukurannya sangat besar (Ibrowser 652KB dan Imanager 4MB(zipped), weleh weleh gede banget yach..
), lagipula aku juga males melakukan konfigurasi ini dan itu buat integrasikan plugin tersebut :P . Sedangkan FCKEditor sudah menyertakan Image Manager namun masih minim fitur dan untuk tampilan tidak seelegan TinyMCE, Image Manager untuk FCKEditor juga belum diperkuat dengan fitur editing gambar dan thumbnail.
Dan yang terakhir Xinha mempunyai fitur yang lumayan lengkap dan customizable, Xinha juga telah menyertakan plugin Image Manager dengan fitur editing gambar dan thumbnail yang sudah terintegrasi dengan baik, namun untuk plugin File Manager belum disertakan sehingga kita tidak bisa mengunggah file-file selain gambar ke dalam server walaupun begitu aku akhirnya memilih editor ini (karena aku suka ama Image Manager dan jenis-jenis emoticonnya banyak). Namun untuk proses integrasi ke dalam CodeIgniter agak rumit (hehehe gak sebegitunya kaleee..
).
Baiklah aku akan berikan langkah-langkah cara mengintegrasikan Xinha WYSIWYG Editor kedalam CodeIgniter. Sebenarnya langkah-langkah ini bersumber dari url http://codeigniter.com/wiki/WYSIWYG/ namun pada langkah yang akan aku berikan ini ada sedikit modifikasi kode.
Screenshot dari Xinha WYSIWYG Editor
Pertama-tama unduh terlebih dahulu Xinha WYSIWYG Editor dari url
http://trac.xinha.org/wiki/DownloadsPage
kemudian ekstrak ke dalam folder dengan nama xinha dan tempatkan folder tersebut dan buat juga sebuah folder dengan nama imagemanager dengan struktur sebagai berikut pada CodeIgniter:
htdocs
|
|_ base_directory_anda
|
|_ imagemanager
|
|_ xinha
|
|_ system
|
|_ dst…
Jangan lupa ubah directory permission imagemanager menjadi 777 (writeable) karena direktori tersebut yang akan menjadi basis penempatan gambar dari plugin ImageManager
Sekedar mengingatkan, jika Anda menerapkan Friendly URL agar memodifikasi file .htaccess menjadi
RewriteEngine on RewriteCond $1 !^(index.php|<strong>xinha</strong>|<strong>imagemanager</strong>|robots.txt) RewriteRule ^(.*)$ /<strong>base_directory_anda</strong>/index.php/$1 [L]
Untuk emoticon Xinha Anda bisa unduh disini, emoticon editor ini bisa dikatakan sangat lengkap yang terdiri dari 580 jenis (banyak banget yach..). Setelah itu ekstrak file smileys.zip ke lokasi folder
base_directory_anda/xinha/plugins/InsertSmiley
Kemudian unduh juga 2 buah file insert-smiley.js dan insertsmiley.html disini kemudian tempatkan insert-smiley.js dan timpa/ganti yang lama pada lokasi
base_directory_anda/xinha/plugins/InsertSmiley
dan insertsmiley.html pada lokasi
base_directory_anda/xinha/plugins/InsertSmiley/popups
Kedua file diatas merupakan versi fix dari bagian utama plugin InsertSmiley.
Lakukan modifikasi file config.inc.php yang terletak pada lokasi
base_directory_anda/xinha/plugins/ImageManager/
Ubah nilai variabel array $IMConfig['images_dir'] menjadi
$IMConfig['images_dir'] = "../../../imagemanager";
Variabel array diatas yang berfungsi sebagai acuan lokasi untuk menampilkan konten gambar pada plugin ImageManager.
Tambahkan sebuah variabel $base_url pada baris sebelum variabel array $IMConfig['images_url'] dan Ubah nilai dari variabel array tersebut sehingga menjadi
$base_url = 'http://domain_anda/base_directory_anda/'; $IMConfig['images_url'] = $base_url."imagemanager";
Variabel array diatas yang berfungsi sebagai acuan lokasi untuk menampilkan gambar yang akan diimplementasikan sebagai output. Misal : Ketika kita melakukan insert gambar dari plugin ImageManager dan meletakkannya pada editor, gambar yang kita insert tadi akan muncul dan acuan lokasi untuk memunculkan gambar tersebut adalah variabel array tersebut.
Buat sebuah plugin dengan nama xinha_pi.php dan letakkan file tersebut pada lokasi
base_directory_anda/system/plugins/
Dan ketikkan kode berikut
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | <?php if (!defined(‘BASEPATH’)) exit(‘No direct script access allowed’); /** * Menampikan Javascript dari proses pemuatan Xinha WYSIWYG Editor * * @param string $textarea Merupakan Array yang menampung nama dari textarea yang akan diterapkan pada xinha editor * * @param string $plugin Merupakan Array yang menampung nama dari jenis plugin yang akan diterapkan pada xinha editor * * @param string $skin Merupakan nama dari jenis skin yang akan diterapkan pada xinha editor * @return script Javascript */ function javascript_xinha( $textarea, $plugins = array(), $skin=NULL ) { $obj =& get_instance(); $base = $obj->config->slash_item(‘base_url’); ob_start(); ?> <script type="text/javascript"> _editor_url = "<?=$base?>xinha/"; //Menentukan path Xinha WYSIWYG Editor _editor_lang = "en"; //Jenis bahasa yang diterapkan pada Xinha WYSIWYG Editor </script> <!— Bagian ini penting dan wajib di ikutsertakan karena berperan juga dalam proses pemuatan editor —> <script type="text/javascript" src="<?=$base?>xinha/htmlarea.js"></script> <?php if($skin != NULL) { ?> <!— Bagian ini untuk menentukan skin/tampilan dari Xinha WYSIWYG Editor —> <link rel="stylesheet" href="<?=$base?>xinha/skins/<?=$skin?>/skin.css" type="text/css"> <?php } ?> <script type="text/javascript"> xinha_editors = null; xinha_init = null; xinha_config = null; xinha_plugins = null; //Bagian Utama Pendefinisian dan Pemuatan Komponen Editor xinha_init = xinha_init ? xinha_init : function() { /* Mendefinisikan jenis-jenis plugin yang akan diterapkan pada Xinha WYSIWYG editor */ xinha_plugins = xinha_plugins ? xinha_plugins : [ <?php $plugin_names=”; foreach ($plugins as $plugin){ $plugin_names.= "’$plugin’,"; } $plugin_names = substr($plugin_names,0,-1); echo $plugin_names; ?> ]; //Bagian ini akan memuat plugin yang telah didefinisikan if(!HTMLArea.loadPlugins(xinha_plugins, xinha_init)) return; /* Mendefinisikan nama dari textarea yang akan diterapkan pada Xinha WYSIWYG editor (bisa lebih dari satu nama dan otomatis textarea bisa lebih dari satu) */ xinha_editors = xinha_editors ? xinha_editors : [ <?php $area=”; foreach ($textarea as $item){ $area.= "’$item’,"; } $area=substr($area,0,-1); echo $area; ?> ]; xinha_config = xinha_config ? xinha_config() : new HTMLArea.Config(); xinha_config.pageStyle = ‘body { font-family: verdana,arial,sans-serif; font-size: .9em; }’; xinha_editors = HTMLArea.makeEditors( xinha_editors, xinha_config, xinha_plugins); HTMLArea.startEditors(xinha_editors); } window.onload = xinha_init; </script> <?php $r = ob_get_contents(); ob_end_clean(); return $r; } ?> |
Untuk menerapkan plugin diatas kita buat sebuah Controller dengan nama file cobaxinha.php dan ketikkan kode
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’); class CobaXinha extends Controller { function CobaXinha() { parent::Controller(); $this->load->helper(array(‘form’,‘url’)); $this->load->library(‘form_validation’); } /** * Menampilkan halaman awal */ function index() { $this->load->plugin(‘xinha’); $data[‘xinha_inclusion’] = javascript_xinha( array(‘teks’), array(‘ImageManager’,‘InsertSmiley’),"blue-look"); $data[‘hasil’] = NULL; $this->load->view(‘tampilxinha’, $data); } /** * Menangani aksi dari pengguna ketika menekan button "Kirim" */ function send() { $this->load->plugin(‘xinha’); $data[‘xinha_inclusion’] = javascript_xinha( array(‘teks’), array(‘ImageManager’,‘InsertSmiley’),"blue-look"); $data[‘hasil’] = NULL; $this->form_validation->set_error_delimiters(”,‘<br>’); $this->form_validation->set_rules( ‘teks’, ‘Inputan’, ‘trim|required’ ); if($this->form_validation->run()==FALSE) { $this->load->view(‘tampilxinha’,$data); } else { $data[‘hasil’] = $this->input->post(‘teks’); $this->load->view(‘tampilxinha’,$data); } } } ?> |
Jika Anda ingin menerapkan lebih dari satu textarea cukup menambahkan nilai array pada parameter pertama sbb:
$data[‘xinha_inclusion’] = javascript_xinha(array(‘teks1′, ‘teks2′, ‘teks3′), array(‘ImageManager’,‘InsertSmiley’),"blue-look");
Paramter kedua merupakan jenis plugin dan parameter ketiga jenis skin yang akan diterapkan pada xinha editor.
Berikut ini daftar jenis-jenis plugin dan skin pada Xinha WYSIWYG Editor :
Plugin :
- Abbreviation
- BackgroundImage
- CSS
- CharCounter
- CharacterMap
- ClientsideSpellcheck
- ContextMenu
- DefinitionList
- DoubleClick
- DynamicCSS
- EditTag
- Equation
- ExtendedFileManager
- Filter
- FindReplace
- FormOperations
- Forms
- FullPage
- GenericPlugin
- GetHtml
- HorizontalRule
- HtmlEntities
- HtmlTidy
- ImageManager
- InsertAnchor
- InsertMarquee
- InsertPagebreak
- InsertPicture
- InsertSmiley
- InsertSnippet
- InsertWords
- LangMarks
- Linker
- ListType
- NoteServer
- PasteText
- PreserveScripts
- QuickTag
- SaveSubmit
- SetId
- SmartReplace
- SpellChecker
- Stylist
- SuperClean
- TableOperations
- Template
- UnFormat
Skin :
- blue-look
- blue-metallic
- green-look
- inditreuse
- silva
- titan
- xp-blue
- xp-green
Kemudian buat sebuah View dengan nama file tampilxinha.php dan ketikkan kode
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <html>
<head>
<title>Coba Xinha WYSIWYG Editor</title>
<?=$xinha_inclusion?>
</head>
<body>
<table width="621" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>
<? echo validation_errors(); ?>
<?
if($hasil != NULL)
echo ‘<h1>Output : </h1>’.$hasil.‘<br><br>’;
?>
<form action="<?=site_url(’cobaxinha/send’)?>" method="POST">
<textarea id="teks" name="teks" rows="20" cols="40" style="width: 100%">
<?=set_value(‘teks’)?>
</textarea>
<?php
echo form_submit(‘kirim’,‘Kirim’);
echo form_reset(‘reset’,‘Reset’);
?>
</form>
</td>
</tr>
</table>
</body>
</html> |
Output dari kode tersebut sebagai berikut:
Untuk ketiga file diatas (xinha_pi.php, cobaxinha.php dan tampilxinha.php) bisa diunduh disini
Selamat mencoba





halo mas, salam kenal…
tq banget arahan xinhanya, saya bener2 kebantu.., maklum saya newbie di php apalagi CI
mas bisa tolong jelasin cara masukin post ke databasenya? struktur tablenya seperti apa ya?
thx…
wah…
article nya bagus banget…
thanks ya…
muncul error
Fatal error: Call to undefined function validation_errors() in C:\AppServ\www\editor\tampilxinha.php on line 15
Om Kurang jelas makulum saya baru tahu pemrograman ksi tahu aku yang lebih jelas dong dengan istilah-istilahnya
om setelah aku coba buka tampilxinha.php hasilnya
“Fatal error: Call to undefined function validation_errors() in C:\xampp\htdocs\latxinha\tampilxinha.php on line 15″ alamat ini mengarah pada “”
dan saya mencoba merun cobaxinha.php hasilnya “No direct script access allowed”
dan saya masih bingung dengan
htdocs
|
|_ base_directory_anda (latxinha)
|
|_ imagemanager (imagemanager)
|
|_ xinha
| |_contrib
| |_examples
| |_plugins
| |_skin
| |_dll
|
|_ system (ini Folder Apa Bukan?…….)
|
|_ dst
1. diletakan di mana file cobaxinha.php,tampilxinha.php dan xinha_pi.php ?
2. Sekedar mengingatkan, jika Anda menerapkan Friendly URL agar memodifikasi file .htaccess menjadi
RewriteEngine on
RewriteCond $1 !^(index.php|xinha|imagemanager|robots.txt)
RewriteRule ^(.*)$ /base_directory_anda/index.php/$1 [L]
Maksudya apa ?
Saya Menggunakan XAMPP.
Terima kasih atas pencerahannya