1 | <html> |
---|
2 | <head> |
---|
3 | |
---|
4 | <!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:-- |
---|
5 | -- Xinha example usage. This file shows how a developer might make use of |
---|
6 | -- Xinha, it forms the primary example file for the entire Xinha project. |
---|
7 | -- This file can be copied and used as a template for development by the |
---|
8 | -- end developer who should simply removed the area indicated at the bottom |
---|
9 | -- of the file to remove the auto-example-generating code and allow for the |
---|
10 | -- use of the file as a boilerplate. |
---|
11 | -- |
---|
12 | -- $HeadURL: svn://gogo@xinha.gogo.co.nz/repository/trunk/examples/full_example-body.html $ |
---|
13 | -- $LastChangedDate: 2005-03-05 21:42:32 +1300 (Sat, 05 Mar 2005) $ |
---|
14 | -- $LastChangedRevision: 35 $ |
---|
15 | -- $LastChangedBy: gogo $ |
---|
16 | ---------------------------------------------------------------------------> |
---|
17 | |
---|
18 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
---|
19 | <title>Example of Xinha</title> |
---|
20 | <link rel="stylesheet" href="full_example.css" /> |
---|
21 | |
---|
22 | <script type="text/javascript"> |
---|
23 | // You must set _editor_url to the URL (including trailing slash) where |
---|
24 | // where xinha is installed, it's highly recommended to use an absolute URL |
---|
25 | // eg: _editor_url = "/path/to/xinha/"; |
---|
26 | // You may try a relative URL if you wish] |
---|
27 | // eg: _editor_url = "../"; |
---|
28 | // in this example we do a little regular expression to find the absolute path. |
---|
29 | _editor_url = document.location.href.replace(/examples\/.*/, '') |
---|
30 | _editor_lang = "en"; // And the language we need to use in the editor. |
---|
31 | </script> |
---|
32 | |
---|
33 | <!-- Load up the actual editor core --> |
---|
34 | <script type="text/javascript" src="../htmlarea.js"></script> |
---|
35 | |
---|
36 | <script type="text/javascript"> |
---|
37 | xinha_editors = null; |
---|
38 | xinha_init = null; |
---|
39 | xinha_config = null; |
---|
40 | xinha_plugins = null; |
---|
41 | |
---|
42 | // This contains the names of textareas we will make into Xinha editors |
---|
43 | xinha_init = xinha_init ? xinha_init : function() |
---|
44 | { |
---|
45 | /** STEP 1 *************************************************************** |
---|
46 | * First, what are the plugins you will be using in the editors on this |
---|
47 | * page. List all the plugins you will need, even if not all the editors |
---|
48 | * will use all the plugins. |
---|
49 | ************************************************************************/ |
---|
50 | |
---|
51 | xinha_plugins = xinha_plugins ? xinha_plugins : |
---|
52 | [ |
---|
53 | 'FullScreen', |
---|
54 | 'TableOperations' |
---|
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); |
---|
120 | } |
---|
121 | |
---|
122 | window.onload = xinha_init; |
---|
123 | </script> |
---|
124 | </head> |
---|
125 | |
---|
126 | <body> |
---|
127 | |
---|
128 | <form action="javascript:var x = document.getElementById('editors_here');alert(x.myTextArea.value);" id="editors_here" onsubmit="alert(this.myTextArea.value);"> |
---|
129 | <textarea id="myTextArea" name="myTextArea" style="width:100%;height:320"> |
---|
130 | <p> |
---|
131 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
---|
132 | Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis |
---|
133 | velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique |
---|
134 | ante elementum turpis. Aliquam nisl. Nulla posuere neque non |
---|
135 | tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis |
---|
136 | parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi. |
---|
137 | Curabitur pharetra bibendum lectus. |
---|
138 | </p> |
---|
139 | |
---|
140 | <ul> |
---|
141 | <li> Phasellus et massa sed diam viverra semper. </li> |
---|
142 | <li> Mauris tincidunt felis in odio. </li> |
---|
143 | <li> Nulla placerat nunc ut pede. </li> |
---|
144 | <li> Vivamus ultrices mi sit amet urna. </li> |
---|
145 | <li> Quisque sed augue quis nunc laoreet volutpat.</li> |
---|
146 | <li> Nunc sit amet metus in tortor semper mattis. </li> |
---|
147 | </ul> |
---|
148 | </textarea> |
---|
149 | |
---|
150 | <input type="submit" /> |
---|
151 | </form> |
---|
152 | |
---|
153 | </body> |
---|
154 | </html> |
---|