source: branches/unified_backend/examples/full_example-body.html @ 84

Last change on this file since 84 was 84, checked in by yermol, 14 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.

  • Property svn:eol-style set to native
  • Property svn:keywords set to LastChangedDate LastChangedRevision LastChangedBy HeadURL Id
File size: 7.5 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    --  $HeadURL$
13    --  $LastChangedDate$
14    --  $LastChangedRevision$
15    --  $LastChangedBy$
16    --------------------------------------------------------------------------->
17
18  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
19  <title>Example of Xinha</title>
20  <link rel="stylesheet" href="full_example.css" />
21
22  <script type="text/javascript">
23    // You must set _editor_url to the URL (including trailing slash) where
24    // where xinha is installed, it's highly recommended to use an absolute URL
25    //  eg: _editor_url = "/path/to/xinha/";
26    // You may try a relative URL if you wish]
27    //  eg: _editor_url = "../";
28    // in this example we do a little regular expression to find the absolute path.
29    _editor_url  = document.location.href.replace(/examples\/full_example-body\.html.*/, '')
30    _editor_lang = "en";      // And the language we need to use in the editor.
31  </script>
32
33  <!--  load in debug trace message class -->
34
35  <script type="text/javascript" src="../ddt.js"></script>
36
37  <!-- create a global trace message object -->
38
39  <script type="text/javascript">
40   var startupDDT = new DDT( "startup" );
41   startupDDT._ddtOn();
42  </script>
43 
44  <!-- Load up the actual editor core -->
45  <script type="text/javascript" src="../htmlarea.js"></script>
46
47  <script type="text/javascript">
48    xinha_editors = null;
49    xinha_init    = null;
50    xinha_config  = null;
51    xinha_plugins = null;
52
53    // This contains the names of textareas we will make into Xinha editors
54    xinha_init = xinha_init ? xinha_init : function()
55    {
56      /** STEP 1 ***************************************************************
57       * First, what are the plugins you will be using in the editors on this
58       * page.  List all the plugins you will need, even if not all the editors
59       * will use all the plugins.
60       ************************************************************************/
61
62      xinha_plugins = xinha_plugins ? xinha_plugins :
63      [
64       'CharacterMap',
65       'ContextMenu',
66       'FullScreen',
67       'ListType',
68       'SpellChecker',
69       'Stylist',
70       'SuperClean',
71       'TableOperations'
72      ];
73             // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
74             if(!HTMLArea.loadPlugins(xinha_plugins, xinha_init)) return;
75
76      /** STEP 2 ***************************************************************
77       * Now, what are the names of the textareas you will be turning into
78       * editors?
79       ************************************************************************/
80
81      xinha_editors = xinha_editors ? xinha_editors :
82      [
83        'myTextArea',
84        'anotherOne'
85      ];
86
87      /** STEP 3 ***************************************************************
88       * We create a default configuration to be used by all the editors.
89       * If you wish to configure some of the editors differently this will be
90       * done in step 4.
91       *
92       * If you want to modify the default config you might do something like this.
93       *
94       *   xinha_config = new HTMLArea.Config();
95       *   xinha_config.width  = 640;
96       *   xinha_config.height = 420;
97       *
98       *************************************************************************/
99
100       xinha_config = xinha_config ? xinha_config : new HTMLArea.Config();
101
102      /** STEP 3 ***************************************************************
103       * We first create editors for the textareas.
104       *
105       * You can do this in two ways, either
106       *
107       *   xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
108       *
109       * if you want all the editor objects to use the same set of plugins, OR;
110       *
111       *   xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config);
112       *   xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']);
113       *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
114       *
115       * if you want to use a different set of plugins for one or more of the
116       * editors.
117       ************************************************************************/
118
119      xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
120
121      /** STEP 4 ***************************************************************
122       * If you want to change the configuration variables of any of the
123       * editors,  this is the place to do that, for example you might want to
124       * change the width and height of one of the editors, like this...
125       *
126       *   xinha_editors.myTextArea.config.width  = 640;
127       *   xinha_editors.myTextArea.config.height = 480;
128       *
129       ************************************************************************/
130
131
132      /** STEP 5 ***************************************************************
133       * Finally we "start" the editors, this turns the textareas into
134       * Xinha editors.
135       ************************************************************************/
136
137      HTMLArea.startEditors(xinha_editors);
138    }
139
140    window.onload = xinha_init;
141  </script>
142</head>
143
144<body onload="xinha_init()">
145
146  <form id="editors_here">
147    <textarea id="myTextArea" name="myTextArea" rows="10" cols="80" style="width:100%"></textarea>
148    <textarea id="anotherOne" name="anotherOne" rows="10" cols="80" style="width:100%"></textarea>
149  </form>
150
151
152  <!----------------------------------------------------------------------------
153    -                            !! IMPORTANT !!
154    -  The html and javascript below is the code used to create the example page.
155    -  It renders a lot of the above unused because it pre-fills xinha_editors,
156    -  xinha_config and xinha_plugins for you, and creates new textareas in place
157    -  of the ones above. The items above are not used while the example is being
158    -  used!
159    -
160    -  If you are going to take the code in this file to form the basis of your
161    -  own, then leave out this marked area.
162    --------------------------------------------------------------------------->
163
164        <div id="lipsum" style="display:none">
165          <p>This is an example of a Xinha editor. The two extra
166                         <b>&lt;&gt;</b> buttons on the right of the toolbar
167                         turn on debugging trace messages.</p>
168
169          <p>This branch of Xinha development is called the Unified
170                         Backend branch. It includes a number of changes over the
171                         trunk<p>
172
173          <ul>
174            <li> JSDoc documentation headers on all functions (partially complete)  </li>
175            <li> _ddt() debugging trace messages added to most methods. </li>
176            <li> svn_commit.php front end to svn commit. </li>
177            <li> Configure.php script to generate server side scripts and permissions. </li>
178            <li> makedocs.pl script to generate documentation.</li>
179          </ul>
180
181                         <p>For more information see the README.txt and README_DEVELOPERS.txt
182                         file from the Xinha_ub branch.</p>
183        </div>
184        <script src="full_example.js"></script>
185
186  <!--------------------------------------------------------------------------->
187
188
189</body>
190</html>
Note: See TracBrowser for help on using the repository browser.