[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        HTMLArea.loadPlugin("CharacterMap");
  41  HTMLArea.loadPlugin("DynamicCSS");
  42  </script>
  43  
  44  <style type="text/css">
  45  html, body {
  46    font-family: Verdana,sans-serif;
  47    background-color: #fea;
  48    color: #000;
  49  }
  50  a:link, a:visited { color: #00f; }
  51  a:hover { color: #048; }
  52  a:active { color: #f00; }
  53  
  54  textarea { background-color: #fff; border: 1px solid 00f; }
  55  </style>
  56  
  57  <script type="text/javascript">
  58  var editor = null;
  59  
  60  function 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);
  81  editor.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  
 125  HTMLArea.onload = initEditor;
 126  
 127  function insertHTML() {
 128    var html = prompt("Enter some HTML code here");
 129    if (html) {
 130      editor.insertHTML(html);
 131    }
 132  }
 133  function 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
 147  href="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
 164  wrote ourselves.  But sometimes it's simply more convenient to include the
 165  parameter not in the function call, but in the affected HTML elements.
 166  Usually, 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
 169  original.&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
 174  is called on &lt;code&gt;BODY&lt;/code&gt; &lt;code&gt;onload&lt;/code&gt; handler.  This function
 175  tries 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;.
 177  The problem is, this function exists in some external JavaScript library
 178  that 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
 180  code 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
 185  some 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
 190  rendering in any way?  Well, comments.  I mean, &lt;em&gt;comments&lt;/em&gt;, HTML
 191  comments.  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,
 194  they are still parsed and are part of the DOM, as well as any other node.
 195  But this mean that we can access comments from JavaScript code, just like we
 196  access any other element, right?  Which means that they &lt;em&gt;can&lt;/em&gt; affect
 197  the 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
 202  following 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
 208  check if the "conttoc" element's first child is a comment node, and if so
 209  will parse additional parameters from there, for instance, a desired prefix
 210  for the links that are to be generated into it.  Why did I need it?  Because
 211  if the page uses a &lt;code&gt;&amp;lt;base&amp;gt;&lt;/code&gt; element to specify the default
 212  link prefix, then links like "#gen1" generated by the &lt;a href="toc.epl"&gt;toc
 213  generator&lt;/a&gt; will not point to that same page as they should, but to the
 214  page 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
 232  was 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">
 252  function mySubmit() {
 253  // document.edit.save.value = "yes";
 254  document.edit.onsubmit(); // workaround browser bugs.
 255  document.edit.submit();
 256  };
 257  </script>
 258  
 259  </form>
 260  
 261  </body>
 262  </html>