Integrasi Editor WYSIWYG
Diunggah oleh
Boy BolangHak Cipta
Format Tersedia
Bagikan dokumen Ini
Apakah menurut Anda dokumen ini bermanfaat?
Apakah konten ini tidak pantas?
Laporkan Dokumen IniHak Cipta:
Format Tersedia
Integrasi Editor WYSIWYG
Diunggah oleh
Boy BolangHak Cipta:
Format Tersedia
BAB 10
Integrasi Editor WYSIWYG
Istilah WYSIWYG, mempunyai kepanjangan dari What You See Is What You
Get. Jika bahasa gaulnya dapat diartikan “Apa yang loe lihat, itu yang loe
dapatkan”.. gitu ^^..
Editor WYSIWYG sangat populer, karena tampilan dan kegunaannya yang user
friendly.. mengapa Friendly?.. karena tampilan dan kerjanya bak mesin
pengolah kata, seperti Microsoft Office ataupun Open Office.
Disini penulis akan memberikan trik-trik dalam meng-integrasikan Editor
WYSIWYG tersebut ke dalam Codeigniter. Tak tanggung-tanggung.. penulis
beberkan 3 jenis editor, diantaranya TinyMce, Xinha, dan juga CKEditor.
Supaya Anda bisa memilah-milih ke-3 editor tersebut. dan tentunya beda orang
pasti beda selera
10.1 Integrasi TinyMCE
TinyMCE, merupakan salah satu editor terbaik saat ini. Karena editor ini sudah
teruji pada CMS-CMS dunia sekelas Joomla dan Wordpress. Banyak yang
menggunakan editor tersebut, untuk itulah penulis hadirkan untuk Anda.
Editor TinyMCE dapat Anda temukan dan download melalui situsnya di
http://tinymce.moxiecode.com. Atau untuk mempermudah Anda, penulis telah
menyertakannya pada CD terlampir, yaitu pada folder wysiwyg.
Buat kembali root project Codeigniter yang baru. Dan kali ini rename dengan
nama wysiwyg. Untuk konfigurasinya ikuti langkah-langkah berikut :
- Buka file config.php yang terdapat dalam folder
system/application/config. Kemudian lakukan konfigurasi berikut :
Semula :
$config['rewrite_short_tags'] = FALSE;
Ubah menjadi :
1
$config['rewrite_short_tags'] = TRUE;
Digunakan untuk mengaktifkan penulisan kode singkat. Contoh :
<?php echo $halo; ?>
Maka dapat dituliskan dengan kode :
<?=$halo;?>
- Buka file autoload.php yang terdapat dalam folder
system/application/config, kemudian lakukan konfigurasi pada helper
berikut :
$autoload['helper'] = array('url','form');
Lakukan ekstraksi pada file tiny_mce.zip sehingga menghasilkan folder
tiny_mce. Letakkan folder tersebut sejajar dengan folder system Anda dalam
root project. Lihat susunan folder berikut :
+ htdocs
-- system
-- application
-- cache
-- codeigniter
-- dan lain-lain
-- tiny_mce
-- user_guide
Buatlah file controller dengan nama ctiny.php dan simpan dalam folder
system/application/controllers. Skripnya sebagai berikut :
<?php
Class Ctiny extends Controller {
function Ctiny(){
parent::Controller();
$this-> tinyMce = '<!-- TinyMCE -->
<script src="'.base_url().'tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple"
});</script>
2
<!-- /TinyMCE -->
';
}
function index(){
$this->load->view('vtiny');
}
}
?>
Penjelasan Kode :
Class Ctiny extends Controller { , deklarasi untuk menciptakan
class controller Ctiny.
function Ctiny() , merupakan constructor, dimana didalam
mengandung pengaturan-pengaturan terkait dengan tinyMce, seperti
pemanggilan file tiny_mce.js pada folder tinyMce, kemudian theme
yang dipakai, yaitu simple.
function index() , membuat function index.
$this->load->view('vtiny'); , me-load file view bernama
vtiny.php.
Langkah terakhir, buatlah file view bernama vtiny.php dan letakkan dalam
folder system/application/views. Adapun skripnya sebagai berikut :
<html>
<head>
<title> Integrasi TinyMCE </title>
</head>
<body>
<?php echo $this->tinyMce; ?>
<?php echo form_open('halo'); ?>
<?php echo form_textarea('keterangan'); ?>
<?php echo form_submit('submit', 'Submit'); ?>
<?php echo form_close(); ?>
</body>
</html>
Pada skrip yang tercetak tebal merupakan akses penting untuk menjalankan
integrasi editor TinyMce dengan Codeigniter.
Untuk menjalankannya, silahkan buka web browser kembali, kemudian Anda
ketikkan pada url http://localhost/wysiwyg/index.php/ctiny, lihat pada gambar
10.1.
3
Gambar 10.1. tinymce dengan theme simple
Jika dipandang-pandang sih lumayan menarik.. tapi kesannya kurang lengkap..
betul tidak.. ya iya.. harus betul.. untuk memperlengkapnya agar tampilan lebih
menarik, kita dapat mengubah theme-nya pada file controller-nya (ctiny.php),
ubah menjadi skrip yang tercetak tebal berikut :
function Ctiny(){
parent::Controller();
$this-> tinyMce = '<!-- TinyMCE -->
<script src="'.base_url().'tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced"
});</script>
<!-- /TinyMCE -->
';
}
Lakukan refresh/reload pada web browser, maka sekarang tampilan themenya
telah berubah.. lebih ciamik boo.. lihat gambar 10.2.
4
Gambar 10.2. tinymce dengan theme advanced
Atau jika Anda menginginkan lebih lagi.. maksudnya lebih lengkap.. seperti
tersedia emotions, button, dll. Anda bisa menambahkan kembali pengaturan-
pengaturan pada file controller ctiny.php berikut :
function Ctiny(){
parent::Controller();
$this-> tinyMce = '<!-- TinyMCE -->
<script src="'.base_url().'tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
theme_advanced_toolbar_location : "top",
convert_urls : false,
plugins : "emotions,flash",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add :
"separator,preview,zoom,separator,forecolor,backcolor,liststyle",
theme_advanced_buttons3_add : "emotions,flash",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom"
});</script>
<!-- /TinyMCE -->
';
}
5
Refresh/reload pada web browser dan lihat hasilnya akan tampil seperti pada
gambar 10.3.
Gambar 10.3. hasil akhir tinymce
10.2 Integrasi Xinha Editor
Xinha merupakan editor yang mempunyai fitur lumayan lengkap dan
customizeable. Dan yang paling penting, yaitu bersifat open source.. Xinha
dapat Anda download pada situs nya di http://xinha.python-hosting.com atau
http://trac.xinha.org/. atau untuk memudahkan Anda, kembali penulis telah
menyediakannya pada CD terlampir, yaitu pada folder wysiwyg.
Ekstrak file xinha.zip sehingga akan menghasilkan folder bernama xinha.
Copykan folder xinha tersebut ke dalam root project, yaitu sejajar dengan folder
system. Lihat gambar 10.4.
6
Gambar 10.4. copykan folder xinha ke dalam root project
Perlu diketahui, Xinha membutuhkan plug-in untuk menampilkan editor.
Sehingga kita buatkan terlebih dahulu plug-innya.. buat file plug-in dengan
nama xinha-pi.php dan simpan dalam folder system/plugins. Adapun skripnya
sebagai berikut:
<?php if (!defined('BASEPATH')) exit('No direct script access
allowed');
function javascript_xinha( $textarea, $skin=NULL )
{
$obj =& get_instance();
$base = $obj->config->slash_item('base_url');
ob_start();
?>
<script type="text/javascript">
_editor_url = "<?php echo $base;?>xinha/";
_editor_lang = "en";
</script>
<!--
Bagian ini penting dan wajib di ikutsertakan
karena berperan juga dalam proses pemuatan editor
-->
<script type="text/javascript" src="<?php echo
$base;?>xinha/htmlarea.js"></script>
<?php
if($skin != NULL)
{
?>
<!-- Bagian ini untuk menentukan skin/tampilan dari Xinha WYSIWYG
Editor -->
<link rel="stylesheet" href="<?php echo $base;?>xinha/skins/<?php
echo $skin;?>/skin.css" type="text/css">
7
<?php
}
?>
<script type="text/javascript">
xinha_editors = null;
xinha_init = null;
xinha_config = null;
xinha_plugins = null;
xinha_init = xinha_init ? xinha_init : function()
{
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;
*/
?>
];
if(!HTMLArea.loadPlugins(xinha_plugins, xinha_init)) return;
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();
8
ob_end_clean();
return $r;
}
?>
Langkah selanjutnya adalah membuat file controller bernama cxinha.php dan
letakkan dalam folder system/applications/controllers. Kemudian isikan
dengan skrip berikut :
<?php
class Cxinha extends Controller{
function index() {
$this->load->plugin('xinha_pi');
$dati['xinha_java']= javascript_xinha(array('txt')); // this
line for the xinha
$this->load->view('xinha', $dati);
}
}
?>
Penjelasan Kode :
class Cxinha extends Controller{ , deklarasi untuk menciptakan
class controller xinha.
function index() , membuat function index.
$this->load->plugin('xinha_pi'); , skrip untuk me-load plugin
xinha_pi yang telah dibuat sebelumnya.
$dati['xinha_java']= javascript_xinha(array('txt')); ,
membuat variabel $dati yang dimana mengandung perubahan textarea
menjadi editor xinha.
$this->load->view('xinha', $dati); , me-load file view bernama
xinha.php yang telah mengandung $dati.
Sisanya adalah membuat file view untuk eksplorasi menampilkan bentuk editor
tersebut. buat file dengan nama xinha.php dan letakkan dalam folder
system/application/views, kemudian ketikkan skrip berikut :
<html>
<head>
<title> Integrasi Xinha </title>
<?php echo $xinha_java; ?>
</head>
<body>
9
<?php echo form_open('cxinha/simpan'); ?>
<?php
$data = array(
'name' => 'txt',
'id' => 'txt',
'rows' => '25',
'cols' => '100'
);
echo form_textarea($data);
?>
<?php echo form_submit('submit', 'Submit'); ?>
<?php echo form_close(); ?>
</form>
</body>
</html>
Buka web browser Anda dengan mengetikkan url
http://localhost/wysiwyg/index.php/cxinha. jika benar maka akan ditampilkan
halaman seperti pada gambar 10.5.
Gambar 10.5. hasil integrasi xinha editor
10
10.3 Integrasi CKEditor
CKEditor merupakan salah satu editor terbaik saat ini. Anda pasti sudah tidak
asing lagi dengan editor yang satu ini. Karena memang editor ini merupakan
salah satu yang paling sering banyak digunakan oleh pengguna.
CKEditor dapat Anda download pada situs http://www.ckeditor.com, dulu
CKEditor bernama FCKEditor. Untuk memudahkan Anda dalam mempelajari
cara integrasi, penulis telah menyediakan juga pada CD terlampir.. baik juga ya
penulisnya semuanya selalu disertakan..
Ekstrak file bernama ckeditor.zip sehingga akan menghasilkan folder bernama
ckeditor. Copykan folder ckeditor tersebut ke dalam root project Anda (sejajar
dengan folder system). Lihat gambar 10.6.
Gambar 10.6. copykan folder ckeditor ke dalam root project
Didalam folder ckeditor terdapat file berikut diantara beberapa file lainnya :
- ckeditor.php
- ckeditor_php4.php
- ckeditor_php5.php
Copykan file tersebut ke dalam folder system/application/libraries.
11
Tahap selanjutnya, buatlah file controller bernama cckeditor.php dan simpan
dalam folder system/application/controllers. Adapun skripnya sebagai berikut
:
<?php
class Cckeditor extends Controller {
function index(){
$this->load->library('ckeditor');
$this->ckeditor->returnOutput = true;
$this->ckeditor->basePath = base_url().'ckeditor/';
$config['height'] = 250;
$config['width'] = '@@screen.width * 0.5';
$config['toolbar'] = array(
array( 'Source', '-', 'Bold', 'Italic', 'Underline',
'Strike' ),
array( 'Link', 'Unlink', 'Anchor' ));
$data['editor'] = $this->ckeditor->editor('editor', 'Tulis
Komentar Anda', $config);
$this->load->view('vckeditor', $data);
}
}
?>
Penjelasan Kode :
class Cckeditor extends Controller { , deklarasi untuk
menciptakan class controller Cckeditor.
function index() , membuat function bernama index.
$this->load->library('ckeditor'); , untuk me-load library
bernama ckeditor.php.
$this->ckeditor->returnOutput = true; , mengatur pengembalian
output menjadi nilai true.
$this->ckeditor->basePath = base_url().'ckeditor/'; , men-
set url folder ckeditor.
$config['height'] = 250; , menentukan tinggi textarea.
$config['width'] = '@@screen.width * 0.5'; , menentukan lebar
textarea.
$config['toolbar'] = array( , menyediakan tools-tools yang akan
ditampilkan pada editor.
$data['editor'] , membuat variabel bernama $data dimana
didalamnya telah mengandung konfigurasi yang telah ditentukan.
12
$this->load->view('vckeditor', $data); , me-load file view
bernama vckeditor.php yang telah mengandung $data.
Buatlah file view bernama vckeditor.php dan letakkan dalam folder
system/application/views. Kemudian isikan skrip berikut :
<html>
<head>
<title> Integrasi CKEditor </title>
</head>
<body>
<?php echo form_open('cckeditor/simpan'); ?>
<?php echo $editor; ?>
<?php echo form_submit('submit', 'Submit'); ?>
<?php echo form_close(); ?>
</body>
</html>
Jika Anda telah mengikuti seluruh instruksi diatas, maka kini saatnya Anda buka
web browser Anda, kemudian ketikkan url
http://localhost/wysiwyg/index.php/cckeditor. maka hasilnya akan terlihat
seperti pada gambar 10.7.
Gambar 10.7. hasil integrasi ckeditor
13
Anda mungkin juga menyukai
- BBDokumen10 halamanBBBoy BolangBelum ada peringkat
- Cara Menggantung SamsakDokumen38 halamanCara Menggantung SamsakBoy BolangBelum ada peringkat
- Daftar Discount Baru (Dealer)Dokumen18 halamanDaftar Discount Baru (Dealer)Boy BolangBelum ada peringkat
- Panduan Hosting Dan Upload File Serta DatabaseDokumen14 halamanPanduan Hosting Dan Upload File Serta DatabaseBoy BolangBelum ada peringkat
- CCDokumen10 halamanCCBoy Bolang0% (1)
