[Sommaire] [Imprimer]

   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">
  43  html, body {
  44    font-family: Verdana,sans-serif;
  45    background-color: #fea;
  46    color: #000;
  47  }
  48  a:link, a:visited { color: #00f; }
  49  a:hover { color: #048; }
  50  a:active { color: #f00; }
  51  
  52  textarea { background-color: #fff; border: 1px solid 00f; }
  53  </style>
  54  
  55  <script type="text/javascript">
  56  var editor = null;
  57  function 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  
 121  function insertHTML() {
 122    var html = prompt("Enter some HTML code here");
 123    if (html) {
 124      editor.insertHTML(html);
 125    }
 126  }
 127  function 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
 141  href="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
 158  wrote ourselves.  But sometimes it's simply more convenient to include the
 159  parameter not in the function call, but in the affected HTML elements.
 160  Usually, 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
 163  original.&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
 168  is called on &lt;code&gt;BODY&lt;/code&gt; &lt;code&gt;onload&lt;/code&gt; handler.  This function
 169  tries 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;.
 171  The problem is, this function exists in some external JavaScript library
 172  that 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
 174  code 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
 179  some 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
 184  rendering in any way?  Well, comments.  I mean, &lt;em&gt;comments&lt;/em&gt;, HTML
 185  comments.  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,
 188  they are still parsed and are part of the DOM, as well as any other node.
 189  But this mean that we can access comments from JavaScript code, just like we
 190  access any other element, right?  Which means that they &lt;em&gt;can&lt;/em&gt; affect
 191  the 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
 196  following 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
 202  check if the "conttoc" element's first child is a comment node, and if so
 203  will parse additional parameters from there, for instance, a desired prefix
 204  for the links that are to be generated into it.  Why did I need it?  Because
 205  if the page uses a &lt;code&gt;&amp;lt;base&amp;gt;&lt;/code&gt; element to specify the default
 206  link prefix, then links like "#gen1" generated by the &lt;a href="toc.epl"&gt;toc
 207  generator&lt;/a&gt; will not point to that same page as they should, but to the
 208  page 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
 226  was 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">
 246  function mySubmit() {
 247  // document.edit.save.value = "yes";
 248  document.edit.onsubmit(); // workaround browser bugs.
 249  document.edit.submit();
 250  };
 251  </script>
 252  
 253  </form>
 254  
 255  </body>
 256  </html>