[795] | 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 | <h3>HTMLArea #1</h3> |
---|
| 136 | <p>This will submit a field named <em>text1</em>.</p> |
---|
| 137 | </textarea> |
---|
| 138 | |
---|
| 139 | <br /> |
---|
| 140 | |
---|
| 141 | <textarea id="text-area-2" name="text2" style="width: 100%; height: 12em"> |
---|
| 142 | <h3>Second HTMLArea</h3> <p><em>text2</em> 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)</p> |
---|
| 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> |
---|