Skip to content

WYSIWYG

Jump to bottom Edit New page
World Wide Web Server edited this page Jul 4, 2012 · 31 revisions

Category: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 :
   [
     
     &lt;?
     $area='';
     foreach ($textarea as $item){
         $area.= "'$item',";
     }
     $area=substr($area,0,-1);
     echo $area;
     ?&gt;
   ];
  
        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.

Add a custom footer

Getting started»

Contributions»

Tutorials»

Community»

Clone this wiki locally