Ticket #1502: testbed.php

File testbed.php, 8.2 kB (added by gogo, 2 years ago)

Also attaching a testbed.php file, put it in your examples make the examples/images and examples/files folders, you may need to adjust the url path in the testbed.php file for those.

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