wiki:Documentation/Plugins/ImageManager

Version 1 (modified by gogo, 14 years ago) (diff)

--

Plugin: ImageManager

Back To Plugins

The 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.

ImageManager presently requires PHP.

Brief Usage :

(first see the NewbieGuide)

Insert the ImageManager into xinha_plugins just like normal

  xinha_plugins = xinha_plugins ? xinha_plugins :
      [
        'FullScreen', 'ImageManager'
      ];

Now 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...

      <?php
        $IMConfig = array();
        $IMConfig['images_dir'] = '/full/path/to/images/';
        $IMConfig['images_url'] = '/url/to/images/';
        $IMConfig = serialize($IMConfig);
        if(!isset($_SESSION['Xinha:ImageManager'])) 
        {
          $_SESSION['Xinha:ImageManager'] = uniqid('secret_');
        }        
       ?>

And finally configure the client side...

  xinha_config.ImageManager.backend_config      
    = '<?php echo jsaddslashes($IMConfig)?>';
  xinha_config.ImageManager.backend_config_hash 
    = '<?php echo sha1($IMConfig . $_SESSION['Xinha:ImageManager'])?>';

Complete Example

Here is a complete example of the xinha_init (see the NewbieGuide if you don't know what this is!).

    xinha_init = xinha_init ? xinha_init : function()
    {
      /** STEP 1 ***************************************************************
       * First, what are the plugins you will be using in the editors on this
       * page.  List all the plugins you will need, even if not all the editors
       * will use all the plugins.
       ************************************************************************/

      xinha_plugins = xinha_plugins ? xinha_plugins :
      [
        'FullScreen', 'ImageManager'
      ];
             // 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 :
      [
        'myTextArea'
      ];

      /** STEP 3 ***************************************************************
       * We create a default configuration to be used by all the editors.
       * If you wish to configure some of the editors differently this will be
       * done in step 4.
       *
       * If you want to modify the default config you might do something like this.
       *
       *   xinha_config = new HTMLArea.Config();
       *   xinha_config.width  = 640;
       *   xinha_config.height = 420;
       *
       *************************************************************************/

       xinha_config = xinha_config ? xinha_config : new HTMLArea.Config();

       <?php
        $IMConfig = array();
        $IMConfig['images_dir'] = '/full/path/to/images/';
        $IMConfig['images_url'] = '/url/to/images/';
        $IMConfig = serialize($IMConfig);
        if(!isset($_SESSION['Xinha:ImageManager'])) 
        {
          $_SESSION['Xinha:ImageManager'] = uniqid('secret_');
        }
               
       ?>

       xinha_config.ImageManager.backend_config      
         = '<?php echo jsaddslashes($IMConfig)?>';
       xinha_config.ImageManager.backend_config_hash 
         = '<?php echo sha1($IMConfig . $_SESSION['Xinha:ImageManager'])?>';

      /** STEP 4 ***************************************************************
       * We first create editors for the textareas.
       *
       * You can do this in two ways, either
       *
       *   xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
       *
       * if you want all the editor objects to use the same set of plugins, OR;
       *
       *   xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config);
       *   xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']);
       *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
       *
       * if you want to use a different set of plugins for one or more of the
       * editors.
       ************************************************************************/

      xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);

      /** STEP 5 ***************************************************************
       * If you want to change the configuration variables of any of the
       * editors,  this is the place to do that, for example you might want to
       * change the width and height of one of the editors, like this...
       *
       *   xinha_editors.myTextArea.config.width  = 640;
       *   xinha_editors.myTextArea.config.height = 480;
       *
       ************************************************************************/


      /** STEP 5 ***************************************************************
       * Finally we "start" the editors, this turns the textareas into
       * Xinha editors.
       ************************************************************************/

      HTMLArea.startEditors(xinha_editors);
      window.onload = null;
    }

jsaddslashes

The 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.

<?php
        function jsaddslashes($s)
        {
         $o="";
         $l=strlen($s);
         for($i=0;$i<$l;$i++)
         {
          $c=$s[$i];
          switch($c)
          {
           case '<': $o.='\\x3C'; break;
           case '>': $o.='\\x3E'; break;
           case '\'': $o.='\\\''; break;
           case '\\': $o.='\\\\'; break;
           case '"':  $o.='\\"'; break;
           case "\n": $o.='\\n'; break;
           case "\r": $o.='\\r'; break;
           default:
           $o.=$c;
          }
         }
         return $o;
        }
?>