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

Last change on this file since 786 was 786, checked in by ray, 12 years ago

updated branch

  • Property svn:keywords set to LastChangedDate LastChangedRevision LastChangedBy HeadURL Id
File size: 8.0 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4<head>
5
6  <!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
7    --  Xinha example usage.  This file shows how a developer might make use of
8    --  Xinha, it forms the primary example file for the entire Xinha project.
9    --  This file can be copied and used as a template for development by the
10    --  end developer who should simply removed the area indicated at the bottom
11    --  of the file to remove the auto-example-generating code and allow for the
12    --  use of the file as a boilerplate.
13    --
14    --  $HeadURL$
15    --  $LastChangedDate$
16    --  $LastChangedRevision$
17    --  $LastChangedBy$
18    --------------------------------------------------------------------------->
19
20  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
21  <title>Example of Xinha</title>
22  <link rel="stylesheet" href="full_example.css" />
23
24  <script type="text/javascript">
25    // You must set _editor_url to the URL (including trailing slash) where
26    // where xinha is installed, it's highly recommended to use an absolute URL
27    //  eg: _editor_url = "/path/to/xinha/";
28    // You may try a relative URL if you wish]
29    //  eg: _editor_url = "../";
30    // in this example we do a little regular expression to find the absolute path.
31    _editor_url  = document.location.href.replace(/examples\/.*/, '')
32    _editor_lang = "de";      // And the language we need to use in the editor.
33  </script>
34
35  <!-- Load up the actual editor core -->
36  <script type="text/javascript" src="../XinhaLoader.js"></script>
37
38  <script type="text/javascript">
39    xinha_editors = null;
40    xinha_init    = null;
41    xinha_config  = null;
42    xinha_plugins = null;
43
44    // This contains the names of textareas we will make into Xinha editors
45    xinha_init = xinha_init ? xinha_init : function()
46    {
47      /** STEP 1 ***************************************************************
48       * First, specify the textareas that shall be turned into Xinhas.
49       * For each one add the respective id to the xinha_editors array.
50       ************************************************************************/
51     
52      xinha_editors = xinha_editors ? xinha_editors :
53      [
54        'myTextArea'
55      ];
56   
57      /** STEP 2 ***************************************************************
58       * Now, what are the plugins you will be using in the editors on this
59       * page. List all the plugins you will need, even if not all the editors
60       * will use all the plugins.
61       ************************************************************************/
62       xinha_plugins = xinha_plugins ? xinha_plugins :
63       [
64         'CharacterMap',
65         'Linker',
66         'Stylist',
67         'SmartReplace'
68       ];
69             // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
70             if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;
71             
72      /** STEP 3 ***************************************************************
73       * We create a default configuration to be used by all the editors.
74       * If you wish to configure some of the editors differently this will be
75       * done in step 4.
76       *
77       * If you want to modify the default config you might do something like this.
78       *
79       *   xinha_config = new Xinha.Config();
80       *   xinha_config.width  = 640;
81       *   xinha_config.height = 420;
82       *
83       *************************************************************************/
84
85       xinha_config = xinha_config ? xinha_config : new Xinha.Config();
86   
87       //  xinha_config.stylistLoadStylesheet(document.location.href.replace(/[^\/]*\.html/, 'stylist.css'));
88         
89      xinha_config.CharacterMap.mode = 'panel';
90xinha_config.stylistLoadStylesheet(document.location.href.replace(/[^\/]*\.html/, 'stylist.css'));
91
92/*
93       // We can load an external stylesheet like this - NOTE : YOU MUST GIVE AN ABSOLUTE URL
94      //  otherwise it won't work!
95      xinha_config.stylistLoadStylesheet(document.location.href.replace(/[^\/]*\.html/, 'stylist.css'));
96
97      // Or we can load styles directly
98      xinha_config.stylistLoadStyles('p.red_text { color:red }');
99
100      // If you want to provide "friendly" names you can do so like
101      // (you can do this for stylistLoadStylesheet as well)
102      xinha_config.stylistLoadStyles('p.pink_text { color:pink }', {'p.pink_text' : 'Pretty Pink'});
103*/
104      /** STEP 3 ***************************************************************
105       * We first create editors for the textareas.
106       *
107       * You can do this in two ways, either
108       *
109       *   xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
110       *
111       * if you want all the editor objects to use the same set of plugins, OR;
112       *
113       *   xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);
114       *   xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']);
115       *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
116       *
117       * if you want to use a different set of plugins for one or more of the
118       * editors.
119       ************************************************************************/
120
121      xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
122
123      /** STEP 4 ***************************************************************
124       * If you want to change the configuration variables of any of the
125       * editors,  this is the place to do that, for example you might want to
126       * change the width and height of one of the editors, like this...
127       *
128       *   xinha_editors.myTextArea.config.width  = 640;
129       *   xinha_editors.myTextArea.config.height = 480;
130       *
131       ************************************************************************/
132
133
134      /** STEP 5 ***************************************************************
135       * Finally we "start" the editors, this turns the textareas into
136       * Xinha editors.
137       ************************************************************************/
138
139      Xinha.startEditors(xinha_editors);
140      window.onload = null;
141    }
142
143    window.onload   = xinha_init;
144    // window.onunload = Xinha.collectGarbageForIE;
145  </script>
146</head>
147
148<body>
149
150  <form action="test_dest.php" id="editors_here" onsubmit="alert(this.myTextArea.value);">
151<input type="checkbox" name="hallo" />
152<select>
153<option>Test</option>
154</select>
155<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
156  <textarea id="myTextArea" name="myTextArea" style="width:100%;height:300px;">
157    <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>
158
159    <input type="submit" /> <input type="reset" /><input type="checkbox" name="hallo" />
160<select>
161<option>Test</option>
162</select>
163  <textarea name="myTextArea" style="width:100%;height:320px;">
164    <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>
165
166    <input type="submit" /> <input type="reset" />
167  </form>
168  <script language="javascript">
169    document.write(document.compatMode);
170  </script>
171  <a href="#" onclick="xinha_editors.myTextArea.hidePanels();">Hide</a>
172  <a href="#" onclick="xinha_editors.myTextArea.showPanels();">Show</a>
173</body>
174</html>
Note: See TracBrowser for help on using the repository browser.