source: temp/trunk/html/test/nakatest/HTMLArea/examples/2-areas.html @ 1328

Revision 1328, 6.3 KB checked in by naka, 20 years ago (diff)

* empty log message *
  • Property svn:eol-style set to native
  • Property svn:keywords set to Author Date Id Revision
Line 
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        &lt;h3&gt;HTMLArea #1&lt;/h3&gt;
136        &lt;p&gt;This will submit a field named &lt;em&gt;text1&lt;/em&gt;.&lt;/p&gt;
137      </textarea>
138
139      <br />
140
141      <textarea id="text-area-2" name="text2" style="width: 100%; height: 12em">
142        &lt;h3&gt;Second HTMLArea&lt;/h3&gt; &lt;p&gt;&lt;em&gt;text2&lt;/em&gt; 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)&lt;/p&gt;
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>
Note: See TracBrowser for help on using the repository browser.