source: branches/unified_backend/examples/simple_example.html @ 85

Last change on this file since 85 was 85, checked in by yermol, 15 years ago

Fixed exceptions on closed trace window.
each domain now opens it's own trace window.
updated README files and index.html

File size: 7.7 KB
Line 
1<html>
2<head>
3
4  <!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
5    --  Xinha example usage.  This file shows how a developer might make use of
6    --  Xinha, it forms the primary example file for the entire Xinha project.
7    --  This file can be copied and used as a template for development by the
8    --  end developer who should simply removed the area indicated at the bottom
9    --  of the file to remove the auto-example-generating code and allow for the
10    --  use of the file as a boilerplate.
11    --
12         --  This is a simplified, minimal, example without the fancy on-demand
13         --  plugin loadeer from the full_example.html example.
14         --
15    --  $HeadURL: http://svn.xinha.python-hosting.com/branches/unified_backend/examples/full_example-body.html $
16    --  $LastChangedDate: 2005-03-05 03:42:32 -0500 (Sat, 05 Mar 2005) $
17    --  $LastChangedRevision: 35 $
18    --  $LastChangedBy: gogo $
19    --------------------------------------------------------------------------->
20
21  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
22  <title>Simple Example of Xinha</title>
23  <link rel="stylesheet" href="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 if 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\/simple_example\.html.*/, '')
33    _editor_lang = "en";      // And the language we need to use in the editor.
34  </script>
35
36  <!--  load in debug trace message class -->
37
38  <script type="text/javascript" src="../ddt.js"></script>
39
40  <script type="text/javascript">
41
42  var startupDDT = new DDT( "startup" );
43
44  // uncomment the following if you would like to trace out the
45  // startup functions. This only works in the debugging version
46  // of Xinha_ub, not the runtime.
47
48  startupDDT._ddtOn();
49  </script>
50 
51  <!-- Load up the actual editor core -->
52  <script type="text/javascript" src="../htmlarea.js"></script>
53
54  <script type="text/javascript">
55
56    xinha_editors = null;
57    xinha_init    = null;
58    xinha_config  = null;
59    xinha_plugins = null;
60
61    // This contains the names of textareas we will make into Xinha editors
62         //
63         // If xinha_init() is already defined then we copy it onto itself; this
64         // might occur if you define another xinha_init() in some other file.
65         //
66         // (see the full_example.html where this is done. In that example, there's
67         // another xinha_init defined in a full_example.js file that gets included
68         // at the end.)
69
70   startupDDT._ddt( "simple_example.html", "71", "Setting up xinha_init()" );
71
72    xinha_init = xinha_init ? xinha_init : function()
73    {
74
75           startupDDT._ddt( "simple_example.html", "76", "xinha_init called from window.onload handler for simple_example.html" );
76
77      /** STEP 1 ***************************************************************
78       * First, what are the plugins you will be using in the editors on this
79       * page.  List all the plugins you will need, even if not all the editors
80       * will use all the plugins.
81       ************************************************************************/
82
83                // a minmal list of plugins.
84
85      xinha_plugins_minimal =
86      [
87       'ContextMenu',
88       'Stylist'
89      ];
90
91      // This loads the plugins. Note that we're using the minimal list
92                // by default.
93
94           startupDDT._ddt( "simple_example.html", "92", "calling HTMLArea.loadplugins()" );
95
96      if ( !HTMLArea.loadPlugins( xinha_plugins_minimal, xinha_init)) return;
97
98      /** STEP 2 ***************************************************************
99       * Now, what are the names of the textareas you will be turning into
100       * editors? For this example we're only loading 1 editor.
101       ************************************************************************/
102
103      xinha_editors = xinha_editors ? xinha_editors :
104      [
105        'TextArea1'
106      ];
107
108      /** STEP 3 ***************************************************************
109       * We create a default configuration to be used by all the editors.
110       * If you wish to configure some of the editors differently this will be
111       * done in step 4.
112       *
113       * If you want to modify the default config you might do something like this.
114       *
115       *   xinha_config = new HTMLArea.Config();
116       *   xinha_config.width  = 640;
117       *   xinha_config.height = 420;
118       *
119       *************************************************************************/
120
121            startupDDT._ddt( "simple_example.html", "119", "calling HTMLArea.Config()" );
122
123       xinha_config = xinha_config ? xinha_config : new HTMLArea.Config();
124
125      /** STEP 3 ***************************************************************
126       * We first create editors for the textareas.
127       *
128       * You can do this in two ways, either
129       *
130       *   xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
131       *
132       * if you want all the editor objects to use the same set of plugins, OR;
133       *
134       *   xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config);
135       *   xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']);
136       *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
137       *
138       * if you want to use a different set of plugins for one or more of the
139       * editors.
140       ************************************************************************/
141
142      startupDDT._ddt( "simple_example.html", "140", "calling HTMLArea.makeEditors()" );
143
144      xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins_minimal);
145
146      /** STEP 4 ***************************************************************
147       * If you want to change the configuration variables of any of the
148       * editors,  this is the place to do that, for example you might want to
149       * change the width and height of one of the editors, like this...
150       *
151       *   xinha_editors.myTextArea.config.width  = 640;
152       *   xinha_editors.myTextArea.config.height = 480;
153       *
154       ************************************************************************/
155
156       xinha_editors.TextArea1.config.width  = 700;
157       xinha_editors.TextArea1.config.height = 350;
158
159      /** STEP 5 ***************************************************************
160       * Finally we "start" the editors, this turns the textareas into
161       * Xinha editors.
162       ************************************************************************/
163
164      startupDDT._ddt( "simple_example.html", "160", "calling HTMLArea.startEditors()" );
165
166      HTMLArea.startEditors(xinha_editors);
167
168    }  // end of xinha_init()
169
170    // window.onload = xinha_init;
171
172  </script>
173</head>
174
175<body onload="xinha_init()">
176
177  <h1>Xinha Simple Example</h1>
178
179  <p>This file demonstrates a simple integration of the Xinha editor with a minimal
180  set of plugins.</p>
181  <br>
182
183  <a href="../index.html">Back to Index</a>
184
185  <br>
186  <hr>
187  <br>
188
189  <form id="editors_here">
190
191    <textarea id="TextArea1" name="TextArea1" rows="10" cols="80" style="width:100%">
192         This is the content of TextArea1 from xinha_ub/examples/simple_example.html.<br>
193         In order to see the new debugging trace messages you will need to turn off
194         popup blockers for this site.<br>
195         These trace messages can also be turned on/off from within simple_example.html by
196         commenting out or uncomments the _ddtOn() line. The same applies to the trace
197         messages inside the HTMLArea object in htmlarea.js.
198         </textarea>
199
200  </form>
201
202</body>
203</html>
Note: See TracBrowser for help on using the repository browser.