source: trunk/examples/fully-loaded.html @ 12

Last change on this file since 12 was 1, checked in by xinha, 15 years ago

Bootstrap

File size: 10.3 KB
Line 
1<html>
2<head>
3<title>Example of HTMLArea 3.0</title>
4
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
7<!-- Configure the path to the editor.  We make it relative now, so that the
8    example ZIP file will work anywhere, but please NOTE THAT it's better to
9    have it an absolute path, such as '/htmlarea/'. -->
10<script type="text/javascript">
11  _editor_url = "../";
12  _editor_lang = "en";
13</script>
14
15<!-- load the main HTMLArea file, this will take care of loading the CSS and
16    other required core scripts. -->
17<script type="text/javascript" src="../htmlarea.js"></script>
18
19<!-- load the plugins -->
20<script type="text/javascript">
21      // WARNING: using this interface to load plugin
22      // will _NOT_ work if plugins do not have the language
23      // loaded by HTMLArea.
24
25      // In other words, this function generates SCRIPT tags
26      // that load the plugin and the language file, based on the
27      // global variable HTMLArea.I18N.lang (defined in the lang file,
28      // in our case "lang/en.js" loaded above).
29
30      // If this lang file is not found the plugin will fail to
31      // load correctly and NOTHING WILL WORK.
32
33      HTMLArea.loadPlugin("TableOperations");
34      HTMLArea.loadPlugin("SpellChecker");
35      HTMLArea.loadPlugin("FullPage");
36      HTMLArea.loadPlugin("CSS");
37      HTMLArea.loadPlugin("ContextMenu");
38      //HTMLArea.loadPlugin("HtmlTidy");
39      HTMLArea.loadPlugin("ListType");
40      HTMLArea.loadPlugin("CharacterMap");
41HTMLArea.loadPlugin("DynamicCSS");
42</script>
43
44<style type="text/css">
45html, body {
46  font-family: Verdana,sans-serif;
47  background-color: #fea;
48  color: #000;
49}
50a:link, a:visited { color: #00f; }
51a:hover { color: #048; }
52a:active { color: #f00; }
53
54textarea { background-color: #fff; border: 1px solid 00f; }
55</style>
56
57<script type="text/javascript">
58var editor = null;
59
60function initEditor() {
61
62  // create an editor for the "ta" textbox
63  editor = new HTMLArea("ta");
64
65  // register the FullPage plugin
66  editor.registerPlugin(FullPage);
67
68  // register the SpellChecker plugin
69  editor.registerPlugin(TableOperations);
70
71  // register the SpellChecker plugin
72  editor.registerPlugin(SpellChecker);
73 
74  // register the HtmlTidy plugin
75  //editor.registerPlugin(HtmlTidy);
76
77  // register the ListType plugin
78  editor.registerPlugin(ListType);
79
80  editor.registerPlugin(CharacterMap);
81editor.registerPlugin(DynamicCSS);
82
83  // register the CSS plugin
84  editor.registerPlugin(CSS, {
85    combos : [
86      { label: "Syntax:",
87                   // menu text       // CSS class
88        options: { "None"           : "",
89                   "Code" : "code",
90                   "String" : "string",
91                   "Comment" : "comment",
92                   "Variable name" : "variable-name",
93                   "Type" : "type",
94                   "Reference" : "reference",
95                   "Preprocessor" : "preprocessor",
96                   "Keyword" : "keyword",
97                   "Function name" : "function-name",
98                   "Html tag" : "html-tag",
99                   "Html italic" : "html-helper-italic",
100                   "Warning" : "warning",
101                   "Html bold" : "html-helper-bold"
102                 },
103        context: "pre"
104      },
105      { label: "Info:",
106        options: { "None"           : "",
107                   "Quote"          : "quote",
108                   "Highlight"      : "highlight",
109                   "Deprecated"     : "deprecated"
110                 }
111      }
112    ]
113  });
114
115  // add a contextual menu
116  editor.registerPlugin("ContextMenu");
117
118  // load the stylesheet used by our CSS plugin configuration
119  editor.config.pageStyle = "@import url(custom.css);";
120
121  editor.generate();
122  return false;
123}
124
125HTMLArea.onload = initEditor;
126
127function insertHTML() {
128  var html = prompt("Enter some HTML code here");
129  if (html) {
130    editor.insertHTML(html);
131  }
132}
133function highlight() {
134  editor.surroundHTML('<span style="background-color: yellow">', '</span>');
135}
136</script>
137
138</head>
139
140<!-- use <body onload="HTMLArea.replaceAll()" if you don't care about
141     customizing the editor.  It's the easiest way! :) -->
142<body onload="HTMLArea.init();">
143
144<h1>HTMLArea 3.0</h1>
145
146<p>A replacement for <code>TEXTAREA</code> elements.  &copy; <a
147href="http://interactivetools.com">InteractiveTools.com</a>, 2003-2004.</p>
148
149<form action="test.cgi" method="post" id="edit" name="edit">
150
151<textarea id="ta" name="ta" style="width:100%" rows="24" cols="80">
152&lt;!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN"&gt;
153&lt;html&gt;
154
155&lt;head&gt;
156&lt;title&gt;Passing parameters to JavaScript code&lt;/title&gt;
157&lt;link rel="stylesheet" href="custom.css" /&gt;
158&lt;/head&gt;
159
160&lt;body&gt;
161&lt;h1&gt;Passing parameters to JavaScript code&lt;/h1&gt;
162
163&lt;p&gt;Sometimes we need to pass parameters to some JavaScript function that we
164wrote ourselves.  But sometimes it's simply more convenient to include the
165parameter not in the function call, but in the affected HTML elements.
166Usually, all JavaScript calls affect some element, right? ;-)&lt;/p&gt;
167
168&lt;p&gt;Well, here's an original way to do it.  Or at least, I think it's
169original.&lt;/p&gt;
170
171&lt;h2&gt;But first...&lt;/h2&gt;
172
173&lt;p&gt;... an example.  Why would I need such thing?  I have a JS function that
174is called on &lt;code&gt;BODY&lt;/code&gt; &lt;code&gt;onload&lt;/code&gt; handler.  This function
175tries to retrieve the element with the ID "conttoc" and, if present, it will
176&lt;a href="toc.epl" title="Automatic TOC generation"&gt;generate an index&lt;/a&gt;.
177The problem is, this function exists in some external JavaScript library
178that it's loaded in page.  I only needed to pass the parameter from
179&lt;em&gt;one&lt;/em&gt; page.  Thus, it makes sense to pass the parameter from the HTML
180code on &lt;em&gt;that&lt;/em&gt; page, not to affect the others.&lt;/p&gt;
181
182&lt;p&gt;The first idea that came to me was to use some attribute, like "id" or
183"class".  But "id" was locked already, it &lt;em&gt;had&lt;/em&gt; to be "conttoc".  Use
184"class"?  It's not elegant.. what if I really wanted to give it a class, at
185some point?&lt;/p&gt;
186
187&lt;h2&gt;The idea&lt;/h2&gt;
188
189&lt;p&gt;So I thought: what are the HTML elements that do not affect the page
190rendering in any way?  Well, comments.  I mean, &lt;em&gt;comments&lt;/em&gt;, HTML
191comments.  You know, like &lt;code&gt;&amp;lt;!-- this is a comment --&amp;gt;&lt;/code&gt;.&lt;/p&gt;
192
193&lt;p&gt;Though comments do not normally affect the way browser renders the page,
194they are still parsed and are part of the DOM, as well as any other node.
195But this mean that we can access comments from JavaScript code, just like we
196access any other element, right?  Which means that they &lt;em&gt;can&lt;/em&gt; affect
197the way that page finally appears ;-)&lt;/p&gt;
198
199&lt;h2&gt;The code&lt;/h2&gt;
200
201&lt;p&gt;The main part was the idea.  The code is simple ;-)  Suppose we have the
202following HTML code:&lt;/p&gt;
203
204&lt;pre class="code"&gt;&lt;span class="function-name"&gt;&amp;lt;&lt;/span&gt;&lt;span class="html-tag"&gt;div&lt;/span&gt; &lt;span class="variable-name"&gt;id=&lt;/span&gt;&lt;span class="string"&gt;&amp;quot;conttoc&amp;quot;&lt;/span&gt;&lt;span class="paren-face-match"&gt;&amp;gt;&lt;/span&gt;&lt;span class="function-name"&gt;&amp;lt;&lt;/span&gt;&lt;span class="html-tag"&gt;/div&lt;/span&gt;&lt;span class="function-name"&gt;&amp;gt;&lt;/span&gt;&lt;/pre&gt;
205
206&lt;p&gt;and our function checks for the presence an element having the ID
207"conttoc", and generates a table of contents into it.  Our code will also
208check if the "conttoc" element's first child is a comment node, and if so
209will parse additional parameters from there, for instance, a desired prefix
210for the links that are to be generated into it.  Why did I need it?  Because
211if the page uses a &lt;code&gt;&amp;lt;base&amp;gt;&lt;/code&gt; element to specify the default
212link prefix, then links like "#gen1" generated by the &lt;a href="toc.epl"&gt;toc
213generator&lt;/a&gt; will not point to that same page as they should, but to the
214page reffered from &lt;code&gt;&amp;lt;base&amp;gt;&lt;/code&gt;.&lt;/p&gt;
215
216&lt;p&gt;So the HTML would now look like this:&lt;/p&gt;
217
218&lt;pre class="code"&gt;&lt;span class="function-name"&gt;&amp;lt;&lt;/span&gt;&lt;span class="html-tag"&gt;div&lt;/span&gt; &lt;span class="variable-name"&gt;id=&lt;/span&gt;&lt;span class="string"&gt;&amp;quot;conttoc&amp;quot;&lt;/span&gt;&lt;span class="function-name"&gt;&amp;gt;&lt;/span&gt;&lt;span class="comment"&gt;&amp;lt;!-- base:link/prefix.html --&amp;gt;&lt;/span&gt;&lt;span class="paren-face-match"&gt;&amp;lt;&lt;/span&gt;&lt;span class="html-tag"&gt;/div&lt;/span&gt;&lt;span class="paren-face-match"&gt;&amp;gt;&lt;/span&gt;&lt;/pre&gt;
219
220&lt;p&gt;And our TOC generation function does something like this:&lt;/p&gt;
221
222&lt;pre class="code"&gt;&lt;span class="keyword"&gt;var&lt;/span&gt; &lt;span class="variable-name"&gt;element&lt;/span&gt; = getElementById(&amp;quot;&lt;span class="string"&gt;conttoc&lt;/span&gt;&amp;quot;);
223&lt;span class="keyword"&gt;if&lt;/span&gt; (element.firstChild &amp;amp;&amp;amp; element.firstChild.nodeType == 8) {
224  &lt;span class="comment"&gt;// 8 means Node.COMMENT_NODE.  We're using numeric values
225&lt;/span&gt;  &lt;span class="comment"&gt;// because IE6 does not support constant names.
226&lt;/span&gt;  &lt;span class="keyword"&gt;var&lt;/span&gt; &lt;span class="variable-name"&gt;parameters&lt;/span&gt; = element.firstChild.data;
227  &lt;span class="comment"&gt;// at this point &amp;quot;parameters&amp;quot; contains base:link/prefix.html
228&lt;/span&gt;  &lt;span class="comment"&gt;// ...
229&lt;/span&gt;}&lt;/pre&gt;
230
231&lt;p&gt;So we retrieved the value passed to the script from the HTML code.  This
232was the goal of this article.&lt;/p&gt;
233
234&lt;hr /&gt;
235&lt;address&gt;&lt;a href="http://students.infoiasi.ro/~mishoo/"&gt;Mihai Bazon&lt;/a&gt;&lt;/address&gt;
236&lt;!-- hhmts start --&gt; Last modified on Thu Apr  3 20:34:17 2003
237&lt;!-- hhmts end --&gt;
238&lt;!-- doc-lang: English --&gt;
239&lt;/body&gt;
240&lt;/html&gt;
241</textarea>
242
243<p />
244
245<input type="submit" name="ok" value="  submit  " />
246<input type="button" name="ins" value="  insert html  " onclick="return insertHTML();" />
247<input type="button" name="hil" value="  highlight text  " onclick="return highlight();" />
248
249<a href="javascript:mySubmit()">submit</a>
250
251<script type="text/javascript">
252function mySubmit() {
253// document.edit.save.value = "yes";
254document.edit.onsubmit(); // workaround browser bugs.
255document.edit.submit();
256};
257</script>
258
259</form>
260
261</body>
262</html>
Note: See TracBrowser for help on using the repository browser.