1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
---|
2 | <html> |
---|
3 | <head> |
---|
4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
---|
5 | <title>Example with 2 HTMLAreas in the same form</title> |
---|
6 | <script type="text/javascript"> |
---|
7 | // the _editor_url is REQUIRED! don't forget to set it. |
---|
8 | _editor_url = "../"; |
---|
9 | // implicit language will be "en", but let's set it for brevity |
---|
10 | _editor_lang = "en"; |
---|
11 | </script> |
---|
12 | <script type="text/javascript" src="../htmlarea.js"></script> |
---|
13 | <script type="text/javascript"> |
---|
14 | // load the plugins that we will use |
---|
15 | // loading is necessary ONLY ONCE, regardless on how many editors you create |
---|
16 | // basically calling the following functions will load the plugin files as if |
---|
17 | // we would have wrote script src="..." but with easier and cleaner code |
---|
18 | HTMLArea.loadPlugin("TableOperations"); |
---|
19 | HTMLArea.loadPlugin("SpellChecker"); |
---|
20 | HTMLArea.loadPlugin("CSS"); |
---|
21 | |
---|
22 | // this function will get called at body.onload |
---|
23 | function initDocument() { |
---|
24 | // cache these values as we need to pass it for both editors |
---|
25 | var css_plugin_args = { |
---|
26 | combos : [ |
---|
27 | { label: "Syntax", |
---|
28 | // menu text // CSS class |
---|
29 | options: { "None" : "", |
---|
30 | "Code" : "code", |
---|
31 | "String" : "string", |
---|
32 | "Comment" : "comment", |
---|
33 | "Variable name" : "variable-name", |
---|
34 | "Type" : "type", |
---|
35 | "Reference" : "reference", |
---|
36 | "Preprocessor" : "preprocessor", |
---|
37 | "Keyword" : "keyword", |
---|
38 | "Function name" : "function-name", |
---|
39 | "Html tag" : "html-tag", |
---|
40 | "Html italic" : "html-helper-italic", |
---|
41 | "Warning" : "warning", |
---|
42 | "Html bold" : "html-helper-bold" |
---|
43 | }, |
---|
44 | context: "pre" |
---|
45 | }, |
---|
46 | { label: "Info", |
---|
47 | options: { "None" : "", |
---|
48 | "Quote" : "quote", |
---|
49 | "Highlight" : "highlight", |
---|
50 | "Deprecated" : "deprecated" |
---|
51 | } |
---|
52 | } |
---|
53 | ] |
---|
54 | }; |
---|
55 | |
---|
56 | //--------------------------------------------------------------------- |
---|
57 | // GENERAL PATTERN |
---|
58 | // |
---|
59 | // 1. Instantitate an editor object. |
---|
60 | // 2. Register plugins (note, it's required to have them loaded). |
---|
61 | // 3. Configure any other items in editor.config. |
---|
62 | // 4. generate() the editor |
---|
63 | // |
---|
64 | // The above are steps that you use to create one editor. Nothing new |
---|
65 | // so far. In order to create more than one editor, you just have to |
---|
66 | // repeat those steps for each of one. Of course, you can register any |
---|
67 | // plugins you want (no need to register the same plugins for all |
---|
68 | // editors, and to demonstrate that we'll skip the TableOperations |
---|
69 | // plugin for the second editor). Just be careful to pass different |
---|
70 | // ID-s in the constructor (you don't want to _even try_ to create more |
---|
71 | // editors for the same TEXTAREA element ;-)). |
---|
72 | // |
---|
73 | // So much for the noise, see the action below. |
---|
74 | //--------------------------------------------------------------------- |
---|
75 | |
---|
76 | |
---|
77 | //--------------------------------------------------------------------- |
---|
78 | // CREATE FIRST EDITOR |
---|
79 | // |
---|
80 | var editor1 = new HTMLArea("text-area-1"); |
---|
81 | |
---|
82 | // plugins must be registered _per editor_. Therefore, we register |
---|
83 | // plugins for the first editor here, and we will also do this for the |
---|
84 | // second editor. |
---|
85 | editor1.registerPlugin(TableOperations); |
---|
86 | editor1.registerPlugin(SpellChecker); |
---|
87 | editor1.registerPlugin(CSS, css_plugin_args); |
---|
88 | |
---|
89 | // custom config must be done per editor. Here we're importing the |
---|
90 | // stylesheet used by the CSS plugin. |
---|
91 | editor1.config.pageStyle = "@import url(custom.css);"; |
---|
92 | |
---|
93 | // generate first editor |
---|
94 | editor1.generate(); |
---|
95 | //--------------------------------------------------------------------- |
---|
96 | |
---|
97 | |
---|
98 | //--------------------------------------------------------------------- |
---|
99 | // CREATE SECOND EDITOR |
---|
100 | // |
---|
101 | var editor2 = new HTMLArea("text-area-2"); |
---|
102 | |
---|
103 | // we are using the same plugins |
---|
104 | editor2.registerPlugin(TableOperations); |
---|
105 | editor2.registerPlugin(SpellChecker); |
---|
106 | editor2.registerPlugin(CSS, css_plugin_args); |
---|
107 | |
---|
108 | // import the CSS plugin styles |
---|
109 | editor2.config.pageStyle = "@import url(custom.css);"; |
---|
110 | |
---|
111 | // generate the second editor |
---|
112 | // IMPORTANT: if we don't give it a timeout, the first editor will |
---|
113 | // not function in Mozilla. Soon I'll think about starting to |
---|
114 | // implement some kind of event that will fire when the editor |
---|
115 | // finished creating, then we'll be able to chain the generate() |
---|
116 | // calls in an elegant way. But right now there's no other solution |
---|
117 | // than the following. |
---|
118 | setTimeout(function() { |
---|
119 | editor2.generate(); |
---|
120 | }, 500); |
---|
121 | //--------------------------------------------------------------------- |
---|
122 | }; |
---|
123 | </script> |
---|
124 | </head> |
---|
125 | |
---|
126 | <body onload="initDocument()"> |
---|
127 | <h1>Example with 2 HTMLAreas in the same form</h1> |
---|
128 | |
---|
129 | <form action="2-areas.cgi" method="post" target="_blank"> |
---|
130 | |
---|
131 | <input type="submit" value=" Submit " /> |
---|
132 | <br /> |
---|
133 | |
---|
134 | <textarea id="text-area-1" name="text1" style="width: 100%; height: 12em"> |
---|
135 | <h3>HTMLArea #1</h3> |
---|
136 | <p>This will submit a field named <em>text1</em>.</p> |
---|
137 | </textarea> |
---|
138 | |
---|
139 | <br /> |
---|
140 | |
---|
141 | <textarea id="text-area-2" name="text2" style="width: 100%; height: 12em"> |
---|
142 | <h3>Second HTMLArea</h3> <p><em>text2</em> submission. Both are |
---|
143 | located in the same FORM element and the script action is |
---|
144 | 2-areas.cgi (see it in the examples directory)</p> |
---|
145 | </textarea> |
---|
146 | |
---|
147 | <br /> |
---|
148 | <input type="submit" value=" Submit " /> |
---|
149 | |
---|
150 | </form> |
---|
151 | |
---|
152 | <hr> |
---|
153 | <address><a href="http://dynarch.com/mishoo/">Mihai Bazon</a></address> |
---|
154 | <!-- Created: Fri Oct 31 09:37:10 EET 2003 --> |
---|
155 | <!-- hhmts start --> Last modified: Wed Jan 28 11:10:40 EET 2004 <!-- hhmts end --> |
---|
156 | <!-- doc-lang: English --> |
---|
157 | </body> |
---|
158 | </html> |
---|