WYSIWYG

Category:Library::External | Category:Library::WYSIWYG

WYSIWYG features

Xinha WYSIWYG editor is a very useful tool to edit and create html;
Image:xinha.jpg

this very useful tool is your Image Manager. It is possible to upload, view, edit and delete all images on the folder server.

Image:xinha2.jpg

Using it in Code Igniter is very easy, but it is necessary to edit some lines of the code of the original tool.

First, download the code from Xinha web site and copy the xinha folder in the root of Code Igniter, as

htdocs
|-----CodeIgniter
   |------xinha
   |------system
    |------- controllers
    |-------- etc

Second, you need to create the plugin code as

<?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_xihna( $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  :)
   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;
}
?>

and save it in the plugins folder as xinha_pi.php. The file uses the data in config file of CodeIgniter to link the javascript and css files at the xinha area.

And finally, add a controller

<?php
class  Editor extends Controller{
 
 function index()
 {
  
  $this->load->plugin('xinha');
  $dati['xinha_java']= javascript_xihna(array('txt')); // this line for the xinha
  $this->load->view('xinha', $dati);
 }
?>

and the view file

<!DOCTYPE BHTML PUBLIC "-//BC//DTD BHTML 3.2 Final//EN">
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Example of Xinha&lt;/title&gt;
&lt;?=$xinha_java;?&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form action="editor/test" method="POST"&gt;

&lt;?
$data = array(
  'name'  => 'txt',
  'id' => 'txt',
  'value' => 'Try',
  'rows' => '30',
  'cols'  => '50',
  'style' => 'width:100%',
   );

echo form_textarea($data);

?&gt;
&lt;input type="Submit"&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Note: you need to activate CI form_helper to use function form_textarea().

In the controller the php $dati['xinha_java']= javascript_xihna(array('txt')); points to txt textarea, but if you need two xinha areas, edit the line as ```php $dati['xinha_java']= javascript_xihna(array('txt1','txt2'));

At this point, configure the Image Manager plug in of Xinha, located at /yourfolder/xinha/plugins/ImageManager/config.inc.php. Modify the lines 59 and 77 as needed for your site.

If the path of the image in the textarea is not set to an absolute url (a full path like: http://www.nnn.com/folderimages/im.jpg), you need to add a simple function in the plugin file. Add this code
```php
/**
 * 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);
}

and use it in the function for retrieve the data, in this mode

$dati['xinha_java']= return_xihna('txt');

where the argument is the name of textarea turned in xinha area.

For download the code and xinha, you go at http://www.andreabersi.com/Saibal/AutoIndex/

That's all! Please excuse my english language! Thank you.