source: trunk/phpgwapi/js/htmlarea/examples/fully-loaded.html @ 2

Revision 2, 10.1 KB checked in by niltonneto, 17 years ago (diff)

Removida todas as tags usadas pelo CVS ($Id, $Source).
Primeira versão no CVS externo.

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