Integrasi Xinha WYSIWYG editor dengan CodeIgniter

Oke, untuk integrasi Xinha WYSIWYG ini, silahkan download dulu xinha nya. Kemudian letakkanlah di base_direktori / xinha.

Pertama-tama kita tentukan lokasi untuk menyimpan image yang akan kita upload nantinya. Saya memilih folder assets yang akan saya jadikan folder target untuk dijadikan tempat menyimpan gambar yang diupload. Caranya editlah file config.inc.php yang terletak di folder xinha / plugins / ImageManager / config.inc.php

$IMConfig['images_dir'] = "J:/xampp-baru/xampp/htdocs/base_direktori/assets/";

$IMConfig['images_url'] =   "http://localhost/base_direktori/assets";

Langkah selanjutnya, kita buat helper terlebih dahulu yang nanti akan disimpan di system / helpers

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

/**

 * Print the javascript

 *

 * @param  string  $textarea  Arry with the name of textareas to turn in xinha area

 * @return  script javascript for enable xinha text area

 */

function javascript_xinha( $textarea )

{

    $obj =& get_instance();

    $base = $obj->config->item('base_url', 1);

    ob_start();

?>

    <script type="text/javascript">

    _editor_url  = "<?=$base?>xinha/"  // (preferably absolute) URL (including trailing slash) where Xinha is installed

    _editor_lang = "it";      // And the language we need to use in the editor.

    </script>

    <script type="text/javascript" src="<?=$base?>xinha/htmlarea.js"></script>

    <link rel="StyleSheet" href="<?=$base?>xinha/skins/titan/skin.css" type="text/css">

    <script type="text/javascript" >

        xinha_editors = null;

        xinha_init    = null;

        xinha_config  = null;

        xinha_plugins = null;

        // This contains the names of textareas we will make into Xinha editors

        xinha_init = xinha_init ? xinha_init : function()

        {

          xinha_plugins = xinha_plugins ? xinha_plugins :

          [

           'CharacterMap',

           'ContextMenu',

           'FullScreen',

           'ListType',

           'ImageManager',

           'TableOperations'

          ];

         // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  <img src="http://s0.wp.com/wp-includes/images/smilies/icon_smile.gif?m=1129645325g" alt=":)" class="wp-smiley"> 

         if(!HTMLArea.loadPlugins(xinha_plugins, xinha_init)) return;

          /** STEP 2 ***************************************************************

           * Now, what are the names of the textareas you will be turning into

           * editors?

           ************************************************************************/

          xinha_editors = xinha_editors ? xinha_editors :

          [

            <?

            $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>

<?

    $r = ob_get_contents();

    ob_end_clean();

    return $r;

}

/**

 * Return the content of xinha with the absolute path of the image

 *

 * @param  string  $textarea  Name of textarea to turn in xinha area

 * @return  the content of xinha with the absolute path of the image

 */

function return_xihna( $textarea ){

    $obj =& get_instance();

    $baseurl = $obj->config->item('base_url', 1);

    return str_replace('src=\"','src=\"'.$baseurl,$textarea);

}

?>

Kemudian simpanlah dengan nama xinha_helper.php
Langkah selanjutnya kita akan membuat controllernya

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Xinha_editor extends CI_Controller

{

    function __construct()

    {

        parent::__construct();

        $this->load->helper('xinha');

    }

    function index()

    {

       $data['xinha_inclusion'] = javascript_xinha(array('teks'),

                                                   array('ImageManager',

                            'InsertSmiley'),

                            "blue-look");

       $this->load->view('view_xinha', $data);

    }

}

?>

Simpan dengan nama xinha_editor.php
Langkah terakhir kita akan buat viewnya :

<html>

<head>

<title>Xinha WYSIWYG Editor</title>

<style>

.wysiwyg-editor{

width:50%;

height:auto;

padding:10px;

margin:100px auto;

box-shadow:0 0 80px #aaa;

-moz-box-shadow: 0 0 80px #aaa;

border-radius: 4px;

-moz-border-radius: 4px;

border: 1px solid #bbb;

}

</style>

    <?=$xinha_inclusion?>

</head>

<body>

<div class="wysiwyg-editor">

    <textarea id="teks" name="teks" rows="20" cols="40" style="width: 100%"></textarea>

</div>

</body>

</html>