[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  </script>
  39  
  40  <style type="text/css">
  41  html, body {
  42    font-family: Verdana,sans-serif;
  43    background-color: #fea;
  44    color: #000;
  45  }
  46  a:link, a:visited { color: #00f; }
  47  a:hover { color: #048; }
  48  a:active { color: #f00; }
  49  
  50  textarea { background-color: #fff; border: 1px solid 00f; }
  51  </style>
  52  
  53  <script type="text/javascript">
  54  var editor = null;
  55  function initEditor() {
  56  
  57    // create an editor for the "ta" textbox

  58    editor = new HTMLArea("ta");
  59  
  60    // register the FullPage plugin

  61    editor.registerPlugin(FullPage);
  62  
  63    // register the SpellChecker plugin

  64    editor.registerPlugin(TableOperations);
  65  
  66    // register the SpellChecker plugin

  67    editor.registerPlugin(SpellChecker);
  68  
  69    // register the CSS plugin

  70    editor.registerPlugin(CSS, {
  71      combos : [
  72        { label: "Syntax:",
  73                     // menu text       // CSS class

  74          options: { "None"           : "",
  75                     "Code" : "code",
  76                     "String" : "string",
  77                     "Comment" : "comment",
  78                     "Variable name" : "variable-name",
  79                     "Type" : "type",
  80                     "Reference" : "reference",
  81                     "Preprocessor" : "preprocessor",
  82                     "Keyword" : "keyword",
  83                     "Function name" : "function-name",
  84                     "Html tag" : "html-tag",
  85                     "Html italic" : "html-helper-italic",
  86                     "Warning" : "warning",
  87                     "Html bold" : "html-helper-bold"
  88                   },
  89          context: "pre"
  90        },
  91        { label: "Info:",
  92          options: { "None"           : "",
  93                     "Quote"          : "quote",
  94                     "Highlight"      : "highlight",
  95                     "Deprecated"     : "deprecated"
  96                   }
  97        }
  98      ]
  99    });
 100  
 101    // add a contextual menu

 102    editor.registerPlugin("ContextMenu");
 103  
 104    // load the stylesheet used by our CSS plugin configuration

 105    editor.config.pageStyle = "@import url(custom.css);";
 106  
 107    setTimeout(function() {
 108      editor.generate();
 109    }, 500);
 110    return false;
 111  }
 112  
 113  function insertHTML() {
 114    var html = prompt("Enter some HTML code here");
 115    if (html) {
 116      editor.insertHTML(html);
 117    }
 118  }
 119  function highlight() {
 120    editor.surroundHTML('<span style="background-color: yellow">', '</span>');
 121  }
 122  </script>
 123  
 124  </head>
 125  
 126  <!-- use <body onload="HTMLArea.replaceAll()" if you don't care about
 127       customizing the editor.  It's the easiest way! :) -->
 128  <body onload="initEditor()">
 129  
 130  <h1>HTMLArea 3.0</h1>
 131  
 132  <p>A replacement for <code>TEXTAREA</code> elements.  &copy; <a
 133  href="http://interactivetools.com">InteractiveTools.com</a>, 2003-2004.</p>
 134  
 135  <form action="test.cgi" method="post" id="edit" name="edit">
 136  
 137  <textarea id="ta" name="ta" style="width:100%" rows="24" cols="80">
 138  &lt;!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN"&gt;
 139  &lt;html&gt;
 140  
 141  &lt;head&gt;
 142  &lt;title&gt;Passing parameters to JavaScript code&lt;/title&gt;
 143  &lt;link rel="stylesheet" href="custom.css" /&gt;
 144  &lt;/head&gt;
 145  
 146  &lt;body&gt;
 147  &lt;h1&gt;Passing parameters to JavaScript code&lt;/h1&gt;
 148  
 149  &lt;p&gt;Sometimes we need to pass parameters to some JavaScript function that we
 150  wrote ourselves.  But sometimes it's simply more convenient to include the
 151  parameter not in the function call, but in the affected HTML elements.
 152  Usually, all JavaScript calls affect some element, right? ;-)&lt;/p&gt;
 153  
 154  &lt;p&gt;Well, here's an original way to do it.  Or at least, I think it's
 155  original.&lt;/p&gt;
 156  
 157  &lt;h2&gt;But first...&lt;/h2&gt;
 158  
 159  &lt;p&gt;... an example.  Why would I need such thing?  I have a JS function that
 160  is called on &lt;code&gt;BODY&lt;/code&gt; &lt;code&gt;onload&lt;/code&gt; handler.  This function
 161  tries to retrieve the element with the ID "conttoc" and, if present, it will
 162  &lt;a href="toc.epl" title="Automatic TOC generation"&gt;generate an index&lt;/a&gt;.
 163  The problem is, this function exists in some external JavaScript library
 164  that it's loaded in page.  I only needed to pass the parameter from
 165  &lt;em&gt;one&lt;/em&gt; page.  Thus, it makes sense to pass the parameter from the HTML
 166  code on &lt;em&gt;that&lt;/em&gt; page, not to affect the others.&lt;/p&gt;
 167  
 168  &lt;p&gt;The first idea that came to me was to use some attribute, like "id" or
 169  "class".  But "id" was locked already, it &lt;em&gt;had&lt;/em&gt; to be "conttoc".  Use
 170  "class"?  It's not elegant.. what if I really wanted to give it a class, at
 171  some point?&lt;/p&gt;
 172  
 173  &lt;h2&gt;The idea&lt;/h2&gt;
 174  
 175  &lt;p&gt;So I thought: what are the HTML elements that do not affect the page
 176  rendering in any way?  Well, comments.  I mean, &lt;em&gt;comments&lt;/em&gt;, HTML
 177  comments.  You know, like &lt;code&gt;&amp;lt;!-- this is a comment --&amp;gt;&lt;/code&gt;.&lt;/p&gt;
 178  
 179  &lt;p&gt;Though comments do not normally affect the way browser renders the page,
 180  they are still parsed and are part of the DOM, as well as any other node.
 181  But this mean that we can access comments from JavaScript code, just like we
 182  access any other element, right?  Which means that they &lt;em&gt;can&lt;/em&gt; affect
 183  the way that page finally appears ;-)&lt;/p&gt;
 184  
 185  &lt;h2&gt;The code&lt;/h2&gt;
 186  
 187  &lt;p&gt;The main part was the idea.  The code is simple ;-)  Suppose we have the
 188  following HTML code:&lt;/p&gt;
 189  
 190  &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;
 191  
 192  &lt;p&gt;and our function checks for the presence an element having the ID
 193  "conttoc", and generates a table of contents into it.  Our code will also
 194  check if the "conttoc" element's first child is a comment node, and if so
 195  will parse additional parameters from there, for instance, a desired prefix
 196  for the links that are to be generated into it.  Why did I need it?  Because
 197  if the page uses a &lt;code&gt;&amp;lt;base&amp;gt;&lt;/code&gt; element to specify the default
 198  link prefix, then links like "#gen1" generated by the &lt;a href="toc.epl"&gt;toc
 199  generator&lt;/a&gt; will not point to that same page as they should, but to the
 200  page reffered from &lt;code&gt;&amp;lt;base&amp;gt;&lt;/code&gt;.&lt;/p&gt;
 201  
 202  &lt;p&gt;So the HTML would now look like this:&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="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;
 205  
 206  &lt;p&gt;And our TOC generation function does something like this:&lt;/p&gt;
 207  
 208  &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;);
 209  &lt;span class="keyword"&gt;if&lt;/span&gt; (element.firstChild &amp;amp;&amp;amp; element.firstChild.nodeType == 8) {
 210    &lt;span class="comment"&gt;// 8 means Node.COMMENT_NODE.  We're using numeric values

 211  &lt;/span&gt;  &lt;span class="comment"&gt;// because IE6 does not support constant names.

 212  &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;
 213    &lt;span class="comment"&gt;// at this point &amp;quot;parameters&amp;quot; contains base:link/prefix.html

 214  &lt;/span&gt;  &lt;span class="comment"&gt;// ...

 215  &lt;/span&gt;}&lt;/pre&gt;
 216  
 217  &lt;p&gt;So we retrieved the value passed to the script from the HTML code.  This
 218  was the goal of this article.&lt;/p&gt;
 219  
 220  &lt;hr /&gt;
 221  &lt;address&gt;&lt;a href="http://students.infoiasi.ro/~mishoo/"&gt;Mihai Bazon&lt;/a&gt;&lt;/address&gt;
 222  &lt;!-- hhmts start --&gt; Last modified on Thu Apr  3 20:34:17 2003
 223  &lt;!-- hhmts end --&gt;
 224  &lt;!-- doc-lang: English --&gt;
 225  &lt;/body&gt;
 226  &lt;/html&gt;
 227  </textarea>
 228  
 229  <p />
 230  
 231  <input type="submit" name="ok" value="  submit  " />
 232  <input type="button" name="ins" value="  insert html  " onclick="return insertHTML();" />
 233  <input type="button" name="hil" value="  highlight text  " onclick="return highlight();" />
 234  
 235  <a href="javascript:mySubmit()">submit</a>
 236  
 237  <script type="text/javascript">
 238  function mySubmit() {
 239  // document.edit.save.value = "yes";

 240  document.edit.onsubmit(); // workaround browser bugs.

 241  document.edit.submit();
 242  };
 243  </script>
 244  
 245  </form>
 246  
 247  </body>
 248  </html>