WYSIWYG
[h2]WYSIWYG features[/h2]
[url=http://xinha.python-hosting.com/]Xinha WYSIWYG editor[/url] is a very useful tool for edit and create html;
Image:xinha.jpg
the 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
Use it in Code Igniter is very easy, but it is necessary to edit some line of the code of the original tool.
[b]First[/b], download the code from [url=http://xinha.python-hosting.com/]Xinha web site[/url] and copy the xinha folder in the root of Code Igniter, as
[code] htdocs |-----CodeIgniter |------xinha |------system |------- controllers |-------- etc [/code]
[b]Second[/b], you need to create the plugin code as
[code] <?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; } ?> [/code] and save it in the plugins folder as xinha_pi.php. The file use the data in config file of CodeIgniter for link the javascript and css files at the xinha area.
And finaly, add a controller
[code] <?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);
}
?> [/code]
and the view file
[code]
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Example of Xinha</title> <?=$xinha_java;?> </head> <body> <form action="editor/test" method="POST">
<? $data = array( 'name' => 'txt', 'id' => 'txt', 'value' => 'Try', 'rows' => '30', 'cols' => '50', 'style' => 'width:100%', );
echo form_textarea($data);
?> <input type="Submit"> </form> </body> </html> [/code]
In the controller the [code]$dati['xinha_java']= javascript_xihna(array('txt')); [/code] point to txt textarea, but if you need two xinha area, edit the line as [code]$dati['xinha_java']= javascript_xihna(array('txt1','txt2')); [/code] and modify the view.
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 you need for your site.
If the path of the image in the textarea is not set to absolute url (it is needed a path as http://www.xxx.com/folderimages/im.jpg), you need to add a simple function in the plugin file. Add this code [code]/**
- 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); } [/code] and use it in the function for retrieve the data, in this mode
[code]$dati['xinha_java']= return_xihna('txt');[/code] where the argument is the name of textarea turned in xinha area.
For download the code and xinha, you go at [url=http://www.andreabersi.com/Saibal/AutoIndex/]http://www.andreabersi.com/Saibal/AutoIndex/[/url]
That's all!Please excuse my english language! Thank you.