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]
|
---|
14 | * eg: _editor_url = "../";
|
---|
15 | * in this example we do a little regular expression to find the absolute path.
|
---|
16 | ************************************************************************/
|
---|
17 | var _editor_url = document.location.href.replace(/examples\/simple_example\.html.*/, '')
|
---|
18 | // And the language we need to use in the editor.
|
---|
19 | var _editor_lang = "en";
|
---|
20 | </script>
|
---|
21 | <!-- Load up the actual editor core -->
|
---|
22 | <script type="text/javascript" src="../XinhaCore.js"></script>
|
---|
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 | ************************************************************************/
|
---|
32 | var xinha_plugins =
|
---|
33 | [
|
---|
34 | 'CharacterMap',
|
---|
35 | 'ContextMenu',
|
---|
36 | 'ListType',
|
---|
37 | 'SpellChecker',
|
---|
38 | 'Stylist',
|
---|
39 | 'SuperClean',
|
---|
40 | 'TableOperations'
|
---|
41 | ];
|
---|
42 | /************************************************************************
|
---|
43 | * Names of the textareas you will be turning into editors
|
---|
44 | ************************************************************************/
|
---|
45 | var xinha_editors =
|
---|
46 | [
|
---|
47 | 'myTextArea',
|
---|
48 | 'anotherOne'
|
---|
49 | ];
|
---|
50 | /************************************************************************
|
---|
51 | * Initialisation function
|
---|
52 | ************************************************************************/
|
---|
53 | function xinha_init()
|
---|
54 | {
|
---|
55 | // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING :)
|
---|
56 | if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;
|
---|
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 | ************************************************************************/
|
---|
65 | var xinha_config = new Xinha.Config();
|
---|
66 | /************************************************************************
|
---|
67 | * We first create editors for the textareas.
|
---|
68 | * You can do this in two ways, either
|
---|
69 | *
|
---|
70 | * xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
|
---|
71 | *
|
---|
72 | * if you want all the editor objects to use the same set of plugins, OR;
|
---|
73 | *
|
---|
74 | * xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);
|
---|
75 | * xinha_editors['myTextArea'].registerPlugins(['Stylist']);
|
---|
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 | ************************************************************************/
|
---|
81 | xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
|
---|
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 | ************************************************************************/
|
---|
99 | Xinha.startEditors(xinha_editors);
|
---|
100 | }
|
---|
101 | window.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 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
---|
116 | Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
|
---|
117 | velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
|
---|
118 | ante elementum turpis. Aliquam nisl. Nulla posuere neque non
|
---|
119 | tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis
|
---|
120 | parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
|
---|
121 | Curabitur pharetra bibendum lectus.</p>
|
---|
122 | </textarea>
|
---|
123 | <textarea id="anotherOne" name="anotherOne" rows="10" cols="80" style="width:100%">
|
---|
124 | <ul>
|
---|
125 | <li> Phasellus et massa sed diam viverra semper. </li>
|
---|
126 | <li> Mauris tincidunt felis in odio. </li>
|
---|
127 | <li> Nulla placerat nunc ut pede. </li>
|
---|
128 | <li> Vivamus ultrices mi sit amet urna. </li>
|
---|
129 | <li> Quisque sed augue quis nunc laoreet volutpat.</li>
|
---|
130 | <li> Nunc sit amet metus in tortor semper mattis. </li>
|
---|
131 | </ul>
|
---|
132 | </textarea>
|
---|
133 | <input type="submit">
|
---|
134 | </form>
|
---|
135 |
|
---|
136 | </body>
|
---|
137 | </html> |
---|