[Sommaire] [Imprimer]

   1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   2  <html>
   3    <head>
   4      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5      <title>Example with 2 HTMLAreas in the same form</title>
   6      <script type="text/javascript">
   7        // the _editor_url is REQUIRED!  don't forget to set it.

   8        _editor_url = "../";
   9        // implicit language will be "en", but let's set it for brevity

  10        _editor_lang = "en";
  11      </script>
  12      <script type="text/javascript" src="../htmlarea.js"></script>
  13      <script type="text/javascript">
  14        // load the plugins that we will use

  15        // loading is necessary ONLY ONCE, regardless on how many editors you create

  16        // basically calling the following functions will load the plugin files as if

  17        // we would have wrote script src="..." but with easier and cleaner code

  18        HTMLArea.loadPlugin("TableOperations");
  19        HTMLArea.loadPlugin("SpellChecker");
  20        HTMLArea.loadPlugin("CSS");
  21  
  22        // this function will get called at body.onload

  23        function initDocument() {
  24          // cache these values as we need to pass it for both editors

  25          var css_plugin_args = {
  26            combos : [
  27              { label: "Syntax",
  28                           // menu text       // CSS class

  29                options: { "None"           : "",
  30                           "Code" : "code",
  31                           "String" : "string",
  32                           "Comment" : "comment",
  33                           "Variable name" : "variable-name",
  34                           "Type" : "type",
  35                           "Reference" : "reference",
  36                           "Preprocessor" : "preprocessor",
  37                           "Keyword" : "keyword",
  38                           "Function name" : "function-name",
  39                           "Html tag" : "html-tag",
  40                           "Html italic" : "html-helper-italic",
  41                           "Warning" : "warning",
  42                           "Html bold" : "html-helper-bold"
  43                         },
  44                context: "pre"
  45              },
  46              { label: "Info",
  47                options: { "None"           : "",
  48                           "Quote"          : "quote",
  49                           "Highlight"      : "highlight",
  50                           "Deprecated"     : "deprecated"
  51                         }
  52              }
  53            ]
  54          };
  55  
  56          //---------------------------------------------------------------------

  57          // GENERAL PATTERN

  58          //

  59      //  1. Instantitate an editor object.

  60      //  2. Register plugins (note, it's required to have them loaded).

  61      //  3. Configure any other items in editor.config.

  62      //  4. generate() the editor

  63      //

  64      // The above are steps that you use to create one editor.  Nothing new

  65      // so far.  In order to create more than one editor, you just have to

  66      // repeat those steps for each of one.  Of course, you can register any

  67      // plugins you want (no need to register the same plugins for all

  68      // editors, and to demonstrate that we'll skip the TableOperations

  69      // plugin for the second editor).  Just be careful to pass different

  70      // ID-s in the constructor (you don't want to _even try_ to create more

  71      // editors for the same TEXTAREA element ;-)).

  72      //

  73      // So much for the noise, see the action below.

  74      //---------------------------------------------------------------------

  75  
  76  
  77          //---------------------------------------------------------------------

  78          // CREATE FIRST EDITOR

  79          //

  80          var editor1 = new HTMLArea("text-area-1");
  81  
  82          // plugins must be registered _per editor_.  Therefore, we register

  83          // plugins for the first editor here, and we will also do this for the

  84          // second editor.

  85          editor1.registerPlugin(TableOperations);
  86          editor1.registerPlugin(SpellChecker);
  87          editor1.registerPlugin(CSS, css_plugin_args);
  88  
  89          // custom config must be done per editor.  Here we're importing the

  90          // stylesheet used by the CSS plugin.

  91          editor1.config.pageStyle = "@import url(custom.css);";
  92  
  93          // generate first editor

  94          editor1.generate();
  95          //---------------------------------------------------------------------

  96  
  97  
  98          //---------------------------------------------------------------------

  99          // CREATE SECOND EDITOR

 100          //

 101          var editor2 = new HTMLArea("text-area-2");
 102  
 103          // we are using the same plugins

 104          editor2.registerPlugin(TableOperations);
 105          editor2.registerPlugin(SpellChecker);
 106          editor2.registerPlugin(CSS, css_plugin_args);
 107  
 108          // import the CSS plugin styles

 109          editor2.config.pageStyle = "@import url(custom.css);";
 110  
 111          // generate the second editor

 112          // IMPORTANT: if we don't give it a timeout, the first editor will

 113          // not function in Mozilla.  Soon I'll think about starting to

 114          // implement some kind of event that will fire when the editor

 115          // finished creating, then we'll be able to chain the generate()

 116          // calls in an elegant way.  But right now there's no other solution

 117          // than the following.

 118          setTimeout(function() {
 119            editor2.generate();
 120          }, 500);
 121          //---------------------------------------------------------------------

 122        };
 123      </script>
 124    </head>
 125  
 126    <body onload="initDocument()">
 127      <h1>Example with 2 HTMLAreas in the same form</h1>
 128  
 129      <form action="2-areas.cgi" method="post" target="_blank">
 130  
 131        <input type="submit" value=" Submit " />
 132        <br />
 133  
 134        <textarea id="text-area-1" name="text1" style="width: 100%; height: 12em">
 135          &lt;h3&gt;HTMLArea #1&lt;/h3&gt;
 136          &lt;p&gt;This will submit a field named &lt;em&gt;text1&lt;/em&gt;.&lt;/p&gt;
 137        </textarea>
 138  
 139        <br />
 140  
 141        <textarea id="text-area-2" name="text2" style="width: 100%; height: 12em">
 142          &lt;h3&gt;Second HTMLArea&lt;/h3&gt; &lt;p&gt;&lt;em&gt;text2&lt;/em&gt; submission.  Both are
 143          located in the same FORM element and the script action is
 144          2-areas.cgi (see it in the examples directory)&lt;/p&gt;
 145        </textarea>
 146  
 147        <br />
 148        <input type="submit" value=" Submit " />
 149  
 150      </form>
 151  
 152      <hr>
 153      <address><a href="http://dynarch.com/mishoo/">Mihai Bazon</a></address>
 154  <!-- Created: Fri Oct 31 09:37:10 EET 2003 -->
 155  <!-- hhmts start --> Last modified: Wed Jan 28 11:10:40 EET 2004 <!-- hhmts end -->
 156  <!-- doc-lang: English -->
 157    </body>
 158  </html>