source: trunk/examples/simple_example.html @ 836

Last change on this file since 836 was 836, checked in by gogo, 12 years ago

A few more remaining instances of attempts to use FullScreen? as a
plugin in the examples.

  • Property svn:keywords set to LastChangedDate LastChangedRevision LastChangedBy HeadURL Id
File size: 6.8 KB
RevLine 
[534]1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5<title>Simple example of Xinha</title>
6<script type="text/javascript">
7/************************************************************************
8 * Please refer to http://xinha.python-hosting.com/wiki/NewbieGuide
9 ************************************************************************
10 * You must set _editor_url to the URL (including trailing slash) where
11 * where xinha is installed, it's highly recommended to use an absolute URL
12 *  eg: _editor_url = "/path/to/xinha/";
13 * You may try a relative URL if you wish]
[649]14 *  eg: _editor_url = "../"; 
[534]15 * in this example we do a little regular expression to find the absolute path.
16 ************************************************************************/
17var _editor_url  = document.location.href.replace(/examples\/simple_example\.html.*/, '')
18// And the language we need to use in the editor.
19var _editor_lang = "en";
20</script>
21<!-- Load up the actual editor core -->
[649]22<script type="text/javascript" src="../XinhaCore.js"></script>
[534]23<script type="text/javascript">
24/************************************************************************
25 * Plugins you will be using in the editors on this page.
26 * List all the plugins you will need, even if not all the editors will
27 * use all the plugins.
28 ************************************************************************
29 * Please refer to http://xinha.python-hosting.com/wiki/Plugins for the
30 * list of availables plugins
31 ************************************************************************/
32var xinha_plugins =
33[
34 'CharacterMap',
[835]35 'ContextMenu',
[534]36 'ListType',
37 'SpellChecker',
38 'Stylist',
39 'SuperClean',
40 'TableOperations'
41];
42/************************************************************************
43 * Names of the textareas you will be turning into editors
44 ************************************************************************/
45var xinha_editors =
46[
47  'myTextArea',
48  'anotherOne'
49];
50/************************************************************************
51 * Initialisation function
52 ************************************************************************/
53function xinha_init()
54{
55  // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
[649]56  if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;
[534]57  /*************************************************************************
58   * We create a default configuration to be used by all the editors.
59   * If you wish to configure some of the editors differently this will be
60   * done later after editors are initiated.
61   ************************************************************************
62   * Please refer to http://xinha.python-hosting.com/wiki/Documentation/Customise
63   * for the configuration parameters
64   ************************************************************************/
[649]65  var xinha_config = new Xinha.Config();
[534]66  /************************************************************************
67   * We first create editors for the textareas.
68   * You can do this in two ways, either
69   *
[649]70   *   xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
[534]71   *
72   * if you want all the editor objects to use the same set of plugins, OR;
73   *
[649]74   *   xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);
[836]75   *   xinha_editors['myTextArea'].registerPlugins(['Stylist']);
[534]76   *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
77   *
78   * if you want to use a different set of plugins for one or more of the
79   * editors.
80   ************************************************************************/
[649]81  xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
[534]82  /************************************************************************
83   * If you want to change the configuration variables of any of the
84   * editors,  this is the place to do that, for example you might want to
85   * change the width and height of one of the editors, like this...
86   ************************************************************************/
87  xinha_editors.myTextArea.config.width = '640px';
88  xinha_editors.myTextArea.config.height = '480px';
89  /************************************************************************
90   * Or remove the statusbar on the other one, like this...
91   * For every possible configuration, please refer to
92   * http://xinha.python-hosting.com/wiki/Documentation/ConfigVariablesList
93   ************************************************************************/
94  xinha_editors.anotherOne.config.statusBar = false;
95  /************************************************************************
96   * Finally we "start" the editors, this turns the textareas into
97   * Xinha editors.
98   ************************************************************************/
[649]99  Xinha.startEditors(xinha_editors);
[534]100}
101window.onload = xinha_init;
102</script>
103<link type="text/css" rel="stylesheet" title="blue-look" href="../skins/blue-look/skin.css">
104<link type="text/css" rel="alternate stylesheet" title="green-look" href="../skins/green-look/skin.css">
105<link type="text/css" rel="alternate stylesheet" title="xp-blue" href="../skins/xp-blue/skin.css">
106<link type="text/css" rel="alternate stylesheet" title="xp-green" href="../skins/xp-green/skin.css">
107<link type="text/css" rel="alternate stylesheet" title="inditreuse" href="../skins/inditreuse/skin.css">
108<link type="text/css" rel="alternate stylesheet" title="blue-metallic" href="../skins/blue-metallic/skin.css">
109</head>
110
111<body>
112
113<form onsubmit="alert(this.myTextArea.value); alert(this.anotherOne.value); return false;">
114<textarea id="myTextArea" name="myTextArea" rows="10" cols="80" style="width:100%">
115&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
116Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
117velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
118ante elementum turpis. Aliquam nisl. Nulla posuere neque non
119tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis
120parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
121Curabitur pharetra bibendum lectus.&lt;/p&gt;
122</textarea>
123<textarea id="anotherOne" name="anotherOne" rows="10" cols="80" style="width:100%">
124&lt;ul&gt;
125&lt;li&gt; Phasellus et massa sed diam viverra semper.  &lt;/li&gt;
126&lt;li&gt; Mauris tincidunt felis in odio.              &lt;/li&gt;
127&lt;li&gt; Nulla placerat nunc ut pede.                 &lt;/li&gt;
128&lt;li&gt; Vivamus ultrices mi sit amet urna.           &lt;/li&gt;
129&lt;li&gt; Quisque sed augue quis nunc laoreet volutpat.&lt;/li&gt;
130&lt;li&gt; Nunc sit amet metus in tortor semper mattis. &lt;/li&gt;
131&lt;/ul&gt;
132</textarea>
133<input type="submit">
134</form>
135
136</body>
137</html>
Note: See TracBrowser for help on using the repository browser.