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

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

work-in-progress commit to Unified Backend branch.

added devutils directory for server side convenience scripts

svn_commit.pl front-end to svn commit to update about.html on submit.
makedocs.pl to generates JSDoc and PHPDoc documentation.

added Configure.php script to generate cli script paths and to set perms.
added index.html
added README, INSTALL, README_DEVELOPERS
added examples/simple_example.html
added ddt.js debug trace message to text area class.
htmlarea.js reworked

  • reorganized to group related pieces together.
  • JSDoc headers added to all methods
  • debugging trace messages added to entry points of most methods.
File size: 7.3 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  // uncomment the following if you would like to trace out the
43  // startup functions. This only works in the debugging version
44  // of Xinha_ub, not the runtime.
45  //
46
47  // var startupDDT = new DDT( "startup_trace" );
48  // startupDDT._ddtOnPopup();
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    xinha_init = xinha_init ? xinha_init : function()
72    {
73      /** STEP 1 ***************************************************************
74       * First, what are the plugins you will be using in the editors on this
75       * page.  List all the plugins you will need, even if not all the editors
76       * will use all the plugins.
77       ************************************************************************/
78
79                // a minmal list of plugins.
80
81      xinha_plugins_minimal =
82      [
83       'ContextMenu',
84       'Stylist'
85      ];
86
87      // This loads the plugins. Note that we're using the minimal list
88                // by default.
89
90      if ( !HTMLArea.loadPlugins( xinha_plugins_minimal, xinha_init)) return;
91
92      /** STEP 2 ***************************************************************
93       * Now, what are the names of the textareas you will be turning into
94       * editors?
95       ************************************************************************/
96
97      xinha_editors = xinha_editors ? xinha_editors :
98      [
99        'TextArea1',
100        'TextArea2'
101      ];
102
103      /** STEP 3 ***************************************************************
104       * We create a default configuration to be used by all the editors.
105       * If you wish to configure some of the editors differently this will be
106       * done in step 4.
107       *
108       * If you want to modify the default config you might do something like this.
109       *
110       *   xinha_config = new HTMLArea.Config();
111       *   xinha_config.width  = 640;
112       *   xinha_config.height = 420;
113       *
114       *************************************************************************/
115
116       xinha_config = xinha_config ? xinha_config : new HTMLArea.Config();
117
118      /** STEP 3 ***************************************************************
119       * We first create editors for the textareas.
120       *
121       * You can do this in two ways, either
122       *
123       *   xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
124       *
125       * if you want all the editor objects to use the same set of plugins, OR;
126       *
127       *   xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config);
128       *   xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']);
129       *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
130       *
131       * if you want to use a different set of plugins for one or more of the
132       * editors.
133       ************************************************************************/
134
135      xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins_minimal);
136
137      /** STEP 4 ***************************************************************
138       * If you want to change the configuration variables of any of the
139       * editors,  this is the place to do that, for example you might want to
140       * change the width and height of one of the editors, like this...
141       *
142       *   xinha_editors.myTextArea.config.width  = 640;
143       *   xinha_editors.myTextArea.config.height = 480;
144       *
145       ************************************************************************/
146
147
148      /** STEP 5 ***************************************************************
149       * Finally we "start" the editors, this turns the textareas into
150       * Xinha editors.
151       ************************************************************************/
152
153      HTMLArea.startEditors(xinha_editors);
154
155    }  // end of xinha_init()
156
157    window.onload = xinha_init;
158  </script>
159</head>
160
161<body onload="xinha_init()">
162
163  <h1>Xinha Simple Example</h1>
164
165  <p>This file demonstrates a simple integration of the Xinha editor with a minimal
166  set of plugins.</p>
167  <br>
168
169  <a href="../index.html">Back to Index</a>
170
171  <br>
172  <hr>
173  <br>
174
175  <form id="editors_here">
176
177    <textarea id="TextArea1" name="TextArea1" rows="10" cols="80" style="width:100%">
178         This is the content of TextArea1 from xinha_ub/examples/simple_example.html.<br>
179         The two extra <b>&lt;&gt;</b> buttons on the toolbars are to turn on two sections of
180         debugging trace messages. The first turns on trace messages in the HTMLArea
181         object which appear in a text area below. The second turns on trace messages in the
182         HTMLArea static methods which appear in a popup box. <br><br>
183         These trace messages can also be turned on from the simple_example.html file or
184         from within htmlarea.js
185         </textarea>
186         <br>
187         <br>
188    <textarea id="TextArea2" name="TextArea2" rows="10" cols="80" style="width:100%">
189         This is the content of TextArea2 from xinha_ub/examples/simple_example.html.
190         </textarea>
191
192  </form>
193
194</body>
195</html>
Note: See TracBrowser for help on using the repository browser.