source: branches/ray/examples/testbed.html @ 762

Last change on this file since 762 was 762, checked in by ray, 13 years ago

updated branch

  • Property svn:keywords set to LastChangedDate LastChangedRevision LastChangedBy HeadURL Id
File size: 10.3 KB
Line 
1<!DOCTYPE html
2     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5<head>
6
7  <!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
8    --  Xinha example usage.  This file shows how a developer might make use of
9    --  Xinha, it forms the primary example file for the entire Xinha project.
10    --  This file can be copied and used as a template for development by the
11    --  end developer who should simply removed the area indicated at the bottom
12    --  of the file to remove the auto-example-generating code and allow for the
13    --  use of the file as a boilerplate.
14    --
15    --  $HeadURL$
16    --  $LastChangedDate$
17    --  $LastChangedRevision$
18    --  $LastChangedBy$
19    --------------------------------------------------------------------------->
20
21  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
22  <title>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\/.*/, '')
33    _editor_lang = "en";      // And the language we need to use in the editor.
34  </script>
35
36  <!-- Load up the actual editor core -->
37  <script type="text/javascript" src="../htmlarea.js"></script>
38
39  <script type="text/javascript">
40    xinha_editors = null;
41    xinha_init    = null;
42    xinha_config  = null;
43    xinha_plugins = null;
44
45    // This contains the names of textareas we will make into Xinha editors
46    xinha_init = xinha_init ? xinha_init : function()
47    {
48      /** STEP 1 ***************************************************************
49       * First, what are the plugins you will be using in the editors on this
50       * page.  List all the plugins you will need, even if not all the editors
51       * will use all the plugins.
52       ************************************************************************/
53
54      xinha_plugins = xinha_plugins ? xinha_plugins :
55      [
56        'CharacterMap', 'SpellChecker', 'SmartReplace','PasteText','SuperClean'
57        //'Linker'//,'GetHtml'
58      ];
59             // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
60             if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;
61
62      /** STEP 2 ***************************************************************
63       * Now, what are the names of the textareas you will be turning into
64       * editors?
65       ************************************************************************/
66
67      xinha_editors = xinha_editors ? xinha_editors :
68      [
69      'HAllo', 
70      'myTextArea'
71       
72      ];
73
74      /** STEP 3 ***************************************************************
75       * We create a default configuration to be used by all the editors.
76       * If you wish to configure some of the editors differently this will be
77       * done in step 4.
78       *
79       * If you want to modify the default config you might do something like this.
80       *
81       *   xinha_config = new Xinha.Config();
82       *   xinha_config.width  = 640;
83       *   xinha_config.height = 420;
84       *
85       *************************************************************************/
86
87       xinha_config = xinha_config ? xinha_config : new Xinha.Config();
88   xinha_config.width  = 300;
89   xinha_config.height = 300;
90       xinha_config.fullPage = false;
91       xinha_config.CharacterMap.mode = 'panel';
92       xinha_config.toolbar =
93  [
94    ["popupeditor"],
95    ["separator","formatblock","fontname","fontsize","bold","italic","underline","strikethrough"],
96    ["separator","forecolor","hilitecolor","textindicator"],
97    ["separator","subscript","superscript"],
98    ["linebreak","separator","justifyleft","justifycenter","justifyright","justifyfull"],
99    ["separator","insertorderedlist","insertunorderedlist","outdent","indent"],
100    ["separator","inserthorizontalrule","createlink","insertimage","inserttable"],
101    ["linebreak","separator","undo","redo","selectall","print"], (Xinha.is_gecko ? [] : ["cut","copy","paste","overwrite","saveas"]),
102    ["separator","killword","clearfonts","removeformat","toggleborders","splitblock","lefttoright", "righttoleft"],
103    ["separator","htmlmode","showhelp","about"]
104  ];
105/*
106       // We can load an external stylesheet like this - NOTE : YOU MUST GIVE AN ABSOLUTE URL
107      //  otherwise it won't work!
108      xinha_config.stylistLoadStylesheet(document.location.href.replace(/[^\/]*\.html/, 'stylist.css'));
109
110      // Or we can load styles directly
111      xinha_config.stylistLoadStyles('p.red_text { color:red }');
112
113      // If you want to provide "friendly" names you can do so like
114      // (you can do this for stylistLoadStylesheet as well)
115      xinha_config.stylistLoadStyles('p.pink_text { color:pink }', {'p.pink_text' : 'Pretty Pink'});
116*/
117      /** STEP 3 ***************************************************************
118       * We first create editors for the textareas.
119       *
120       * You can do this in two ways, either
121       *
122       *   xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
123       *
124       * if you want all the editor objects to use the same set of plugins, OR;
125       *
126       *   xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);
127       *   xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']);
128       *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
129       *
130       * if you want to use a different set of plugins for one or more of the
131       * editors.
132       ************************************************************************/
133
134      xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
135
136      /** STEP 4 ***************************************************************
137       * If you want to change the configuration variables of any of the
138       * editors,  this is the place to do that, for example you might want to
139       * change the width and height of one of the editors, like this...
140       *
141       *   xinha_editors.myTextArea.config.width  = 640;
142       *   xinha_editors.myTextArea.config.height = 480;
143       *
144       ************************************************************************/
145
146
147      /** STEP 5 ***************************************************************
148       * Finally we "start" the editors, this turns the textareas into
149       * Xinha editors.
150       ************************************************************************/
151
152      Xinha.startEditors(xinha_editors);
153      window.onload = null;
154    }
155
156    window.onload   = xinha_init;
157    // window.onunload = Xinha.collectGarbageForIE;
158  </script>
159</head>
160
161<body bgcolor="Aqua">
162
163  <form action="test_dest.php" id="editors_here" onsubmit="alert(this.myTextArea.value);">
164<input type="checkbox" name="hallo" />
165<select>
166<option>Test</option>
167</select>
168  <textarea id="myTextArea" name="myTextArea" style="width:100%;height:320px;">
169    <table cellspacing="1" cellpadding="1" border="1" style="width: 100%;"><tbody><tr><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td></tr><tr><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td></tr></tbody></table><br /></textarea>
170
171    <input type="submit" /> <input type="reset" /><input type="checkbox" name="hallo" />
172<select>
173<option>Test</option>
174</select>
175  <textarea name="myTextArea" style="width:100%;height:320px;">
176    <table cellspacing="1" cellpadding="1" border="1" style="width: 100%;"><tbody><tr><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td></tr><tr><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td></tr></tbody></table><br /></textarea>
177
178    <input type="submit" /> <input type="reset" /><input type="checkbox" name="hallo" />
179<select>
180<option>Test</option>
181</select>
182  <textarea name="myTextArea" style="width:100%;height:320px;">
183    <table cellspacing="1" cellpadding="1" border="1" style="width: 100%;"><tbody><tr><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td></tr><tr><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td></tr></tbody></table><br /></textarea>
184
185    <input type="submit" /> <input type="reset" /><input type="checkbox" name="hallo" />
186<select>
187<option>Test</option>
188</select>
189  <textarea id="myTextArea" name="myTextArea" style="width:100%;height:320px;">
190    <table cellspacing="1" cellpadding="1" border="1" style="width: 100%;"><tbody><tr><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td></tr><tr><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td></tr></tbody></table><br /></textarea>
191
192    <input type="submit" /> <input type="reset" /><input type="checkbox" name="hallo" />
193<select>
194<option>Test</option>
195</select>
196  <textarea name="myTextArea" style="width:100%;height:320px;">
197    <table cellspacing="1" cellpadding="1" border="1" style="width: 100%;"><tbody><tr><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td></tr><tr><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td><td style="width: 25%;">&nbsp;</td></tr></tbody></table><br /></textarea>
198
199    <input type="submit" /> <input type="reset" />
200  </form>
201  <script language="javascript">
202    document.write(document.compatMode);
203  </script>
204  <a href="#" onclick="xinha_editors.myTextArea.hidePanels();">Hide</a>
205  <a href="#" onclick="xinha_editors.myTextArea.showPanels();">Show</a>
206</body>
207</html>
Note: See TracBrowser for help on using the repository browser.