"Fossies" - the Fresh Open Source Software Archive

Member "metadot/html/js/htmlarea3/examples/2-areas.html" (24 Aug 2004, 6434 Bytes) of package /linux/www/old/Metadot6.4.5.4.tar.gz:


The requested HTML page contains a <FORM> tag that is unusable on "Fossies" in "automatic" (rendered) mode so that page is shown as HTML source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file.

    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>