source: trunk/examples/mootools-file-manager.php @ 1406

Last change on this file since 1406 was 1406, checked in by gogo, 21 months ago

A little quick tidy up of examples.

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