Home > CodeIgniter, PHP > Integrate Xinha WYSIWYG Editor into CodeIgniter

Integrate Xinha WYSIWYG Editor into CodeIgniter

January 2nd, 2009

ci_logo_flameSelama 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… :cry: ), 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.. 8O ), 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.. :mrgreen: ).

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

xinha1

xinha2

xinha3

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.

xinha4

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:

xinha5

Untuk ketiga file diatas (xinha_pi.php, cobaxinha.php dan tampilxinha.php) bisa diunduh disini

Selamat mencoba :wink:

CodeIgniter, PHP , ,

  1. May 9th, 2009 at 11:42 | #1

    halo mas, salam kenal…
    tq banget arahan xinhanya, saya bener2 kebantu.., maklum saya newbie di php apalagi CI :D

    mas bisa tolong jelasin cara masukin post ke databasenya? struktur tablenya seperti apa ya?

    thx… :D :mrgreen:

  2. May 12th, 2009 at 20:26 | #2

    wah…
    article nya bagus banget…
    thanks ya… :D

  3. artzan
    August 2nd, 2009 at 09:23 | #3

    muncul error
    Fatal error: Call to undefined function validation_errors() in C:\AppServ\www\editor\tampilxinha.php on line 15 :D

  4. leni liani
    September 2nd, 2009 at 21:03 | #4

    Om Kurang jelas makulum saya baru tahu pemrograman ksi tahu aku yang lebih jelas dong dengan istilah-istilahnya

  5. leni liani
    September 3rd, 2009 at 12:25 | #5

    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

  1. No trackbacks yet.
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen:
Enter this code