source: trunk/examples/testbed.html @ 186

Last change on this file since 186 was 177, checked in by gogo, 14 years ago
  • Minor comment changes.
  • Refactor events for form submit, reset and window unload
  • Fix reset handler to properly use the original textarea content
  • Minor changes to setHTML etc
  • Use onload for iframe to determine when to initIframe, instead of a timeout
  • Remove overlooked debugging statement in loadPlugins
  • Change some event registrations to use addDom0Event rather than element.onxxx = something
  • Add HTMLArea.flushEvents() as an implementation of #30 - sadly, doesn't work. This is not enabled in the full_example, use examples/testbed.html to test it out.
  • Added methods HTMLArea.addDom0Event and HTMLArea.prependDom0Event which are to be used instead of element.onxxxxx = something;
File size: 6.7 KB
RevLine 
[177]1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[166]2<html>
3<head>
4
5  <!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
6    --  Xinha example usage.  This file shows how a developer might make use of
7    --  Xinha, it forms the primary example file for the entire Xinha project.
8    --  This file can be copied and used as a template for development by the
9    --  end developer who should simply removed the area indicated at the bottom
10    --  of the file to remove the auto-example-generating code and allow for the
11    --  use of the file as a boilerplate.
12    --
13    --  $HeadURL: svn://gogo@xinha.gogo.co.nz/repository/trunk/examples/full_example-body.html $
14    --  $LastChangedDate: 2005-03-05 21:42:32 +1300 (Sat, 05 Mar 2005) $
15    --  $LastChangedRevision: 35 $
16    --  $LastChangedBy: gogo $
17    --------------------------------------------------------------------------->
18
19  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
20  <title>Example of Xinha</title>
21  <link rel="stylesheet" href="full_example.css" />
22
23  <script type="text/javascript">
24    // You must set _editor_url to the URL (including trailing slash) where
25    // where xinha is installed, it's highly recommended to use an absolute URL
26    //  eg: _editor_url = "/path/to/xinha/";
27    // You may try a relative URL if you wish]
28    //  eg: _editor_url = "../";
29    // in this example we do a little regular expression to find the absolute path.
30    _editor_url  = document.location.href.replace(/examples\/.*/, '')
31    _editor_lang = "en";      // And the language we need to use in the editor.
32  </script>
33
34  <!-- Load up the actual editor core -->
35  <script type="text/javascript" src="../htmlarea.js"></script>
36
37  <script type="text/javascript">
38    xinha_editors = null;
39    xinha_init    = null;
40    xinha_config  = null;
41    xinha_plugins = null;
42
43    // This contains the names of textareas we will make into Xinha editors
44    xinha_init = xinha_init ? xinha_init : function()
45    {
46      /** STEP 1 ***************************************************************
47       * First, what are the plugins you will be using in the editors on this
48       * page.  List all the plugins you will need, even if not all the editors
49       * will use all the plugins.
50       ************************************************************************/
51
52      xinha_plugins = xinha_plugins ? xinha_plugins :
53      [
[177]54        'FullScreen'
[166]55      ];
56             // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
57             if(!HTMLArea.loadPlugins(xinha_plugins, xinha_init)) return;
58
59      /** STEP 2 ***************************************************************
60       * Now, what are the names of the textareas you will be turning into
61       * editors?
62       ************************************************************************/
63
64      xinha_editors = xinha_editors ? xinha_editors :
65      [
66        'myTextArea'
67      ];
68
69      /** STEP 3 ***************************************************************
70       * We create a default configuration to be used by all the editors.
71       * If you wish to configure some of the editors differently this will be
72       * done in step 4.
73       *
74       * If you want to modify the default config you might do something like this.
75       *
76       *   xinha_config = new HTMLArea.Config();
77       *   xinha_config.width  = 640;
78       *   xinha_config.height = 420;
79       *
80       *************************************************************************/
81
82       xinha_config = xinha_config ? xinha_config : new HTMLArea.Config();
83
84      /** STEP 3 ***************************************************************
85       * We first create editors for the textareas.
86       *
87       * You can do this in two ways, either
88       *
89       *   xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
90       *
91       * if you want all the editor objects to use the same set of plugins, OR;
92       *
93       *   xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config);
94       *   xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']);
95       *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
96       *
97       * if you want to use a different set of plugins for one or more of the
98       * editors.
99       ************************************************************************/
100
101      xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
102
103      /** STEP 4 ***************************************************************
104       * If you want to change the configuration variables of any of the
105       * editors,  this is the place to do that, for example you might want to
106       * change the width and height of one of the editors, like this...
107       *
108       *   xinha_editors.myTextArea.config.width  = 640;
109       *   xinha_editors.myTextArea.config.height = 480;
110       *
111       ************************************************************************/
112
113
114      /** STEP 5 ***************************************************************
115       * Finally we "start" the editors, this turns the textareas into
116       * Xinha editors.
117       ************************************************************************/
118
119      HTMLArea.startEditors(xinha_editors);
[177]120      window.onload = null;
[166]121    }
122
[177]123    window.onload   = xinha_init;
124    window.onunload = HTMLArea.flushEvents;
[166]125  </script>
126</head>
127
128<body>
129
130  <form action="javascript:var x = document.getElementById('editors_here');alert(x.myTextArea.value);" id="editors_here" onsubmit="alert(this.myTextArea.value);">
[177]131    <textarea id="myTextArea" name="myTextArea" style="width:100%;height:320px;">
[166]132      &lt;p&gt;
133        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
134        Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
135        velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
136        ante elementum turpis. Aliquam nisl. Nulla posuere neque non
137        tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis
138        parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
139        Curabitur pharetra bibendum lectus.
140      &lt;/p&gt;
141
142      &lt;ul&gt;
143        &lt;li&gt; Phasellus et massa sed diam viverra semper.  &lt;/li&gt;
144        &lt;li&gt; Mauris tincidunt felis in odio.              &lt;/li&gt;
145        &lt;li&gt; Nulla placerat nunc ut pede.                 &lt;/li&gt;
146        &lt;li&gt; Vivamus ultrices mi sit amet urna.           &lt;/li&gt;
147        &lt;li&gt; Quisque sed augue quis nunc laoreet volutpat.&lt;/li&gt;
148        &lt;li&gt; Nunc sit amet metus in tortor semper mattis. &lt;/li&gt;
149      &lt;/ul&gt;
150    </textarea>
151
[177]152    <input type="submit" /> <input type="reset" />
[166]153  </form>
154</body>
155</html>
Note: See TracBrowser for help on using the repository browser.