Changes between Initial Version and Version 1 of Documentation/Plugins/ImageManager


Ignore:
Timestamp:
07/10/05 06:05:31 (15 years ago)
Author:
gogo
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • Documentation/Plugins/ImageManager

    v1 v1  
     1= Plugin: ImageManager = 
     2 
     3[wiki:Plugins Back To Plugins] 
     4 
     5The ImageManager plugin provides a means for users to upload, manipulate (resize, rotate, crop etc), delete and organise (into directories) images, and then insert them into the HTML being edited. 
     6 
     7ImageManager presently requires PHP. 
     8 
     9== Brief Usage : == 
     10(first see the NewbieGuide) 
     11 
     12Insert the ImageManager into xinha_plugins just like normal 
     13{{{ 
     14 
     15  xinha_plugins = xinha_plugins ? xinha_plugins : 
     16      [ 
     17        'FullScreen', 'ImageManager' 
     18      ]; 
     19 
     20}}} 
     21 
     22Now we configure the PHP, because we are passing this through javascript we have to have a "secret" key so we know it hasn't been tampered with... 
     23{{{ 
     24      <?php 
     25        $IMConfig = array(); 
     26        $IMConfig['images_dir'] = '/full/path/to/images/'; 
     27        $IMConfig['images_url'] = '/url/to/images/'; 
     28        $IMConfig = serialize($IMConfig); 
     29        if(!isset($_SESSION['Xinha:ImageManager']))  
     30        { 
     31          $_SESSION['Xinha:ImageManager'] = uniqid('secret_'); 
     32        }         
     33       ?> 
     34}}} 
     35 
     36And finally configure the client side... 
     37{{{  
     38  xinha_config.ImageManager.backend_config       
     39    = '<?php echo jsaddslashes($IMConfig)?>'; 
     40  xinha_config.ImageManager.backend_config_hash  
     41    = '<?php echo sha1($IMConfig . $_SESSION['Xinha:ImageManager'])?>'; 
     42}}} 
     43 
     44 
     45 
     46 
     47== Complete Example == 
     48Here is a complete example of the xinha_init (see the NewbieGuide if you don't know what this is!). 
     49{{{ 
     50    xinha_init = xinha_init ? xinha_init : function() 
     51    { 
     52      /** STEP 1 *************************************************************** 
     53       * First, what are the plugins you will be using in the editors on this 
     54       * page.  List all the plugins you will need, even if not all the editors 
     55       * will use all the plugins. 
     56       ************************************************************************/ 
     57 
     58      xinha_plugins = xinha_plugins ? xinha_plugins : 
     59      [ 
     60        'FullScreen', 'ImageManager' 
     61      ]; 
     62             // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :) 
     63             if(!HTMLArea.loadPlugins(xinha_plugins, xinha_init)) return; 
     64 
     65      /** STEP 2 *************************************************************** 
     66       * Now, what are the names of the textareas you will be turning into 
     67       * editors? 
     68       ************************************************************************/ 
     69 
     70      xinha_editors = xinha_editors ? xinha_editors : 
     71      [ 
     72        'myTextArea' 
     73      ]; 
     74 
     75      /** STEP 3 *************************************************************** 
     76       * We create a default configuration to be used by all the editors. 
     77       * If you wish to configure some of the editors differently this will be 
     78       * done in step 4. 
     79       * 
     80       * If you want to modify the default config you might do something like this. 
     81       * 
     82       *   xinha_config = new HTMLArea.Config(); 
     83       *   xinha_config.width  = 640; 
     84       *   xinha_config.height = 420; 
     85       * 
     86       *************************************************************************/ 
     87 
     88       xinha_config = xinha_config ? xinha_config : new HTMLArea.Config(); 
     89 
     90       <?php 
     91        $IMConfig = array(); 
     92        $IMConfig['images_dir'] = '/full/path/to/images/'; 
     93        $IMConfig['images_url'] = '/url/to/images/'; 
     94        $IMConfig = serialize($IMConfig); 
     95        if(!isset($_SESSION['Xinha:ImageManager']))  
     96        { 
     97          $_SESSION['Xinha:ImageManager'] = uniqid('secret_'); 
     98        } 
     99                
     100       ?> 
     101 
     102       xinha_config.ImageManager.backend_config       
     103         = '<?php echo jsaddslashes($IMConfig)?>'; 
     104       xinha_config.ImageManager.backend_config_hash  
     105         = '<?php echo sha1($IMConfig . $_SESSION['Xinha:ImageManager'])?>'; 
     106 
     107      /** STEP 4 *************************************************************** 
     108       * We first create editors for the textareas. 
     109       * 
     110       * You can do this in two ways, either 
     111       * 
     112       *   xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins); 
     113       * 
     114       * if you want all the editor objects to use the same set of plugins, OR; 
     115       * 
     116       *   xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config); 
     117       *   xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']); 
     118       *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']); 
     119       * 
     120       * if you want to use a different set of plugins for one or more of the 
     121       * editors. 
     122       ************************************************************************/ 
     123 
     124      xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins); 
     125 
     126      /** STEP 5 *************************************************************** 
     127       * If you want to change the configuration variables of any of the 
     128       * editors,  this is the place to do that, for example you might want to 
     129       * change the width and height of one of the editors, like this... 
     130       * 
     131       *   xinha_editors.myTextArea.config.width  = 640; 
     132       *   xinha_editors.myTextArea.config.height = 480; 
     133       * 
     134       ************************************************************************/ 
     135 
     136 
     137      /** STEP 5 *************************************************************** 
     138       * Finally we "start" the editors, this turns the textareas into 
     139       * Xinha editors. 
     140       ************************************************************************/ 
     141 
     142      HTMLArea.startEditors(xinha_editors); 
     143      window.onload = null; 
     144    } 
     145 
     146}}} 
     147 
     148== jsaddslashes == 
     149The PHP code above uses a function called jsaddslashes() to escape characters that are special within javascript strings.  Here is a suitable function if you do not have one in your collection already. 
     150 
     151{{{ 
     152<?php 
     153        function jsaddslashes($s) 
     154        { 
     155         $o=""; 
     156         $l=strlen($s); 
     157         for($i=0;$i<$l;$i++) 
     158         { 
     159          $c=$s[$i]; 
     160          switch($c) 
     161          { 
     162           case '<': $o.='\\x3C'; break; 
     163           case '>': $o.='\\x3E'; break; 
     164           case '\'': $o.='\\\''; break; 
     165           case '\\': $o.='\\\\'; break; 
     166           case '"':  $o.='\\"'; break; 
     167           case "\n": $o.='\\n'; break; 
     168           case "\r": $o.='\\r'; break; 
     169           default: 
     170           $o.=$c; 
     171          } 
     172         } 
     173         return $o; 
     174        } 
     175?> 
     176}}}