source: branches/MootoolsFileManager-Update/examples/mootools-file-manager.php @ 1307

Last change on this file since 1307 was 1300, checked in by gogo, 9 years ago

Update the MootoolsFileManager? to the latest cpojer with some modifications.
Add a demo for the MFM examples/mootools-file-manager.php
Change the default config for ImageManager? and ExtendedFileManager? for added security.

File size: 9.4 KB
Line 
1<?php require_once('require-password.php'); ?>
2<!DOCTYPE html
3     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
4    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
5<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6<head>
7
8  <!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
9    --  Xinha example usage.  This file shows how a developer might make use of
10    --  Xinha, it forms the primary example file for the entire Xinha project.
11    --  This file can be copied and used as a template for development by the
12    --  end developer who should simply removed the area indicated at the bottom
13    --  of the file to remove the auto-example-generating code and allow for the
14    --  use of the file as a boilerplate.
15    --
16    --  $HeadURL: http://svn.xinha.org/trunk/examples/testbed.html $
17    --  $LastChangedDate: 2009-11-08 17:36:46 +1300 (Sun, 08 Nov 2009) $
18    --  $LastChangedRevision: 1197 $
19    --  $LastChangedBy: gogo $
20    --------------------------------------------------------------------------->
21
22  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
23  <title>Example of Xinha</title>
24  <link rel="stylesheet" href="files/full_example.css" />
25
26  <script type="text/javascript">
27    // You must set _editor_url to the URL (including trailing slash) where
28    // where xinha is installed, it's highly recommended to use an absolute URL
29    //  eg: _editor_url = "/path/to/xinha/";
30    // You may try a relative URL htmlif you wish]
31    //  eg: _editor_url = "../";
32    // in this example we do a little regular expression to find the absolute path.
33    _editor_url  = document.location.href.replace(/examples\/.*/, '')
34    _editor_lang = "en";      // And the language we need to use in the editor.   
35    _editor_skin = 'blue-look';
36   
37    <?php
38      if(@$_REQUEST['NoFlash'])
39      {
40        ?>__MFM_USE_FLASH__ = false;<?php
41      }
42      else
43      {
44        ?>__MFM_USE_FLASH__ = true;<?php
45      }
46    ?>
47  </script>
48
49  <!-- Load up the actual editor core -->
50  <script type="text/javascript" src="../XinhaCore.js"></script>
51
52  <script type="text/javascript">
53    xinha_editors = null;
54    xinha_init    = null;
55    xinha_config  = null;
56    xinha_plugins = null;
57
58    // This contains the names of textareas we will make into Xinha editors
59    xinha_init = xinha_init ? xinha_init : function()
60    {
61      /** STEP 1 ***************************************************************
62       * First, what are the plugins you will be using in the editors on this
63       * page.  List all the plugins you will need, even if not all the editors
64       * will use all the plugins.
65       ************************************************************************/
66
67      xinha_plugins = xinha_plugins ? xinha_plugins :
68      [
69        'MootoolsFileManager','Linker'
70      ];
71             // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
72             if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;
73
74      /** STEP 2 ***************************************************************
75       * Now, what are the names of the textareas you will be turning into
76       * editors?
77       ************************************************************************/
78
79      xinha_editors = xinha_editors ? xinha_editors :
80      [
81        'myTextArea'
82      ];
83
84      /** STEP 3 ***************************************************************
85       * We create a default configuration to be used by all the editors.
86       * If you wish to configure some of the editors differently this will be
87       * done in step 4.
88       *
89       * If you want to modify the default config you might do something like this.
90       *
91       *   xinha_config = new Xinha.Config();
92       *   xinha_config.width  = 640;
93       *   xinha_config.height = 420;
94       *
95       *************************************************************************/
96
97       xinha_config = xinha_config ? xinha_config : new Xinha.Config();
98       xinha_config.fullPage = true;
99       with (xinha_config.MootoolsFileManager)
100        {
101          <?php
102            require_once('../contrib/php-xinha.php');
103            xinha_pass_to_php_backend
104            (       
105              array
106              (
107                'images_dir' => getcwd() . '/images',
108                'images_url' => preg_replace('/\/examples.*/', '', $_SERVER['REQUEST_URI']) . '/examples/images',
109                'allow_images_upload' => true,
110                'allow_images_delete' => true,
111               
112                'files_dir' => getcwd() . '/downloads',
113                'files_url' => preg_replace('/\/examples.*/', '', $_SERVER['REQUEST_URI']) .'/examples/downloads',
114                'allow_files_upload' => true,
115                'max_files_upload_size' => '4M',
116              )
117            )
118          ?>
119        }
120       
121       with (xinha_config.Linker)
122        {
123          <?php
124            require_once('../contrib/php-xinha.php');
125            xinha_pass_to_php_backend
126            (       
127              array
128              (
129                'dir' => getcwd(),
130                'url' => '/examples',               
131              )
132            )
133          ?>
134        }
135      /** STEP 3 ***************************************************************
136       * We first create editors for the textareas.
137       *
138       * You can do this in two ways, either
139       *
140       *   xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
141       *
142       * if you want all the editor objects to use the same set of plugins, OR;
143       *
144       *   xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);
145       *   xinha_editors['myTextArea'].registerPlugins(['Stylist']);
146       *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
147       *
148       * if you want to use a different set of plugins for one or more of the
149       * editors.
150       ************************************************************************/
151
152      xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
153
154      /** STEP 4 ***************************************************************
155       * If you want to change the configuration variables of any of the
156       * editors,  this is the place to do that, for example you might want to
157       * change the width and height of one of the editors, like this...
158       *
159       *   xinha_editors.myTextArea.config.width  = 640;
160       *   xinha_editors.myTextArea.config.height = 480;
161       *
162       ************************************************************************/
163
164
165      /** STEP 5 ***************************************************************
166       * Finally we "start" the editors, this turns the textareas into
167       * Xinha editors.
168       ************************************************************************/
169
170      Xinha.startEditors(xinha_editors);
171      window.onload = null;
172    }
173
174    window.onload   = xinha_init;
175  </script>
176</head>
177
178<body>
179  <h1> Demonstration of MootoolsFileManager with Xinha integration </h1>
180  <p>  Click into the WYSIWYG area and then click the insert image button in the tool bar. </p>
181  <p>  Highlight some text and click the insert file link button (folder with a link on it).</p>
182  <p>  This demo also includes the Linker plugin (for creating normal links). </p>
183  <?php
184    if(!isset($_REQUEST['NoFlash']))
185    {
186      ?>
187      <p>You are using the Flash version of MFM, <a href="mootools-file-manager.php?NoFlash=1">switch to NoFlash.</a></p>
188      <?php
189    }
190    else
191    {
192      ?>
193      <p>You are using the NoFlash version of MFM, <a href="mootools-file-manager.php">switch to Flash.</a></p>
194      <?php
195    }
196  ?>
197  <form action="javascript:void(0);" id="editors_here" onsubmit="alert(this.myTextArea.value);">
198     <div>
199     <textarea id="myTextArea" name="myTextArea" style="width:100%;height:320px;">
200      &lt;html&gt;
201      &lt;head&gt;
202        &lt;title&gt;Hello&lt;/title&gt;
203        &lt;style type="text/css"&gt;
204          li { color:red; }
205        &lt;/style&gt;
206      &lt;/head&gt;
207      &lt;body&gt;&lt;span style="color:purple"&gt;
208
209      &lt;p&gt;
210        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
211        Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
212        velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
213        ante elementum turpis.  &lt;span style="color:green"&gt;Aliquam &lt;/span&gt; nisl. Nulla posuere neque non
214        tellus. Morbi vel nibh. &lt;font face="Arial"&gt;&lt;font color="#009933"&gt;Cum  sociis natoque&lt;/font&gt;&lt;/font&gt; penatibus et magnis dis
215        parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
216        Curabitur pharetra bibendum lectus.
217      &lt;/p&gt;
218
219      &lt;ul&gt;
220        &lt;li style="color:green"&gt; Phasellus et massa sed diam viverra semper.  &lt;/li&gt;
221        &lt;li&gt; Mauris tincidunt felis in odio.              &lt;/li&gt;
222        &lt;li&gt; Nulla placerat nunc ut pede.                 &lt;/li&gt;
223        &lt;li&gt; Vivamus ultrices mi sit amet urna.           &lt;/li&gt;
224        &lt;li&gt; Quisque sed augue quis nunc laoreet volutpat.&lt;/li&gt;
225        &lt;li&gt; Nunc sit amet metus in tortor semper mattis. &lt;/li&gt;
226      &lt;/ul&gt;
227      &lt;/span&gt;&lt;/body&gt;
228      &lt;/html&gt;
229    </textarea>
230
231    <input type="submit" /> <input type="reset" />
232    </div>
233  </form>
234
235  <p>
236    <script type="text/javascript">
237      document.write('Browser Compatability Mode: ' + document.compatMode);
238    </script>
239  </p>
240</body>
241</html>
Note: See TracBrowser for help on using the repository browser.