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

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

_ddt() trace system now writes to a popup window resulting in much faster execution.
_ddt() messages now identifiy file, line and source of trace message.
_ddt() popup window has "add hr" link
ddtpreprop.php script added to patch in file and line numbers.
full_example-body.html and simple_example.html bugfix to not double-call xinha-init.
simple_example.html now only loads a single Xinha instance.

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
50  </script>
51 
52  <!-- Load up the actual editor core -->
53  <script type="text/javascript" src="../htmlarea.js"></script>
54
55  <script type="text/javascript">
56
57    xinha_editors = null;
58    xinha_init    = null;
59    xinha_config  = null;
60    xinha_plugins = null;
61
62    // This contains the names of textareas we will make into Xinha editors
63         //
64         // If xinha_init() is already defined then we copy it onto itself; this
65         // might occur if you define another xinha_init() in some other file.
66         //
67         // (see the full_example.html where this is done. In that example, there's
68         // another xinha_init defined in a full_example.js file that gets included
69         // at the end.)
70
71   startupDDT._ddt( "simple_example.html", "71", "Setting up xinha_init()" );
72
73    xinha_init = xinha_init ? xinha_init : function()
74    {
75
76           startupDDT._ddt( "simple_example.html", "76", "xinha_init called from window.onload handler for simple_example.html" );
77
78      /** STEP 1 ***************************************************************
79       * First, what are the plugins you will be using in the editors on this
80       * page.  List all the plugins you will need, even if not all the editors
81       * will use all the plugins.
82       ************************************************************************/
83
84                // a minmal list of plugins.
85
86      xinha_plugins_minimal =
87      [
88       'ContextMenu',
89       'Stylist'
90      ];
91
92      // This loads the plugins. Note that we're using the minimal list
93                // by default.
94
95           startupDDT._ddt( "simple_example.html", "92", "calling HTMLArea.loadplugins()" );
96
97      if ( !HTMLArea.loadPlugins( xinha_plugins_minimal, xinha_init)) return;
98
99      /** STEP 2 ***************************************************************
100       * Now, what are the names of the textareas you will be turning into
101       * editors? For this example we're only loading 1 editor.
102       ************************************************************************/
103
104      xinha_editors = xinha_editors ? xinha_editors :
105      [
106        'TextArea1'
107      ];
108
109      /** STEP 3 ***************************************************************
110       * We create a default configuration to be used by all the editors.
111       * If you wish to configure some of the editors differently this will be
112       * done in step 4.
113       *
114       * If you want to modify the default config you might do something like this.
115       *
116       *   xinha_config = new HTMLArea.Config();
117       *   xinha_config.width  = 640;
118       *   xinha_config.height = 420;
119       *
120       *************************************************************************/
121
122            startupDDT._ddt( "simple_example.html", "119", "calling HTMLArea.Config()" );
123
124       xinha_config = xinha_config ? xinha_config : new HTMLArea.Config();
125
126      /** STEP 3 ***************************************************************
127       * We first create editors for the textareas.
128       *
129       * You can do this in two ways, either
130       *
131       *   xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
132       *
133       * if you want all the editor objects to use the same set of plugins, OR;
134       *
135       *   xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config);
136       *   xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']);
137       *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
138       *
139       * if you want to use a different set of plugins for one or more of the
140       * editors.
141       ************************************************************************/
142
143      startupDDT._ddt( "simple_example.html", "140", "calling HTMLArea.makeEditors()" );
144
145      xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins_minimal);
146
147      /** STEP 4 ***************************************************************
148       * If you want to change the configuration variables of any of the
149       * editors,  this is the place to do that, for example you might want to
150       * change the width and height of one of the editors, like this...
151       *
152       *   xinha_editors.myTextArea.config.width  = 640;
153       *   xinha_editors.myTextArea.config.height = 480;
154       *
155       ************************************************************************/
156
157       xinha_editors.TextArea1.config.width  = 700;
158       xinha_editors.TextArea1.config.height = 350;
159
160      /** STEP 5 ***************************************************************
161       * Finally we "start" the editors, this turns the textareas into
162       * Xinha editors.
163       ************************************************************************/
164
165      startupDDT._ddt( "simple_example.html", "160", "calling HTMLArea.startEditors()" );
166
167      HTMLArea.startEditors(xinha_editors);
168
169    }  // end of xinha_init()
170
171    // window.onload = xinha_init;
172
173  </script>
174</head>
175
176<body onload="xinha_init()">
177
178  <h1>Xinha Simple Example</h1>
179
180  <p>This file demonstrates a simple integration of the Xinha editor with a minimal
181  set of plugins.</p>
182  <br>
183
184  <a href="../index.html">Back to Index</a>
185
186  <br>
187  <hr>
188  <br>
189
190  <form id="editors_here">
191
192    <textarea id="TextArea1" name="TextArea1" rows="10" cols="80" style="width:100%">
193         This is the content of TextArea1 from xinha_ub/examples/simple_example.html.<br>
194         In order to see the new debugging trace messages you will need to turn off
195         popup blockers for this site.<br>
196         These trace messages can also be turned on/off from within simple_example.html by
197         commenting out or uncomments the _ddtOn() line. The same applies to the trace
198         messages inside the HTMLArea object in htmlarea.js.
199         </textarea>
200
201  </form>
202
203</body>
204</html>
Note: See TracBrowser for help on using the repository browser.