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.
To try it in a Code Igniter environment , go to [url=http://www.andreabersi.com/CodeIgniter/index.php/editor/index/4]http://www.andreabersi.com/CodeIgniter/index.php/editor/index/4[/url]
[b]First[/b], download the code from [url=http://xinha.python-hosting.com/]Xinha wed 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(); ?>
_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> <link rel="StyleSheet" href="<?=$base?>xinha/skins/titan/skin.css" type="text/css"> //change the ref to css for other style
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.
If the path of the image 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.