📄 2-areas.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Example with 2 HTMLAreas in the same form</title> <script type="text/javascript"> // the _editor_url is REQUIRED! don't forget to set it. _editor_url = "../"; // implicit language will be "en", but let's set it for brevity _editor_lang = "en"; </script> <script type="text/javascript" src="../htmlarea.js"></script> <script type="text/javascript"> // load the plugins that we will use // loading is necessary ONLY ONCE, regardless on how many editors you create // basically calling the following functions will load the plugin files as if // we would have wrote script src="..." but with easier and cleaner code HTMLArea.loadPlugin("TableOperations"); HTMLArea.loadPlugin("SpellChecker"); HTMLArea.loadPlugin("CSS"); // this function will get called at body.onload function initDocument() { // cache these values as we need to pass it for both editors var css_plugin_args = { combos : [ { label: "Syntax", // menu text // CSS class options: { "None" : "", "Code" : "code", "String" : "string", "Comment" : "comment", "Variable name" : "variable-name", "Type" : "type", "Reference" : "reference", "Preprocessor" : "preprocessor", "Keyword" : "keyword", "Function name" : "function-name", "Html tag" : "html-tag", "Html italic" : "html-helper-italic", "Warning" : "warning", "Html bold" : "html-helper-bold" }, context: "pre" }, { label: "Info", options: { "None" : "", "Quote" : "quote", "Highlight" : "highlight", "Deprecated" : "deprecated" } } ] }; //--------------------------------------------------------------------- // GENERAL PATTERN // // 1. Instantitate an editor object. // 2. Register plugins (note, it's required to have them loaded). // 3. Configure any other items in editor.config. // 4. generate() the editor // // The above are steps that you use to create one editor. Nothing new // so far. In order to create more than one editor, you just have to // repeat those steps for each of one. Of course, you can register any // plugins you want (no need to register the same plugins for all // editors, and to demonstrate that we'll skip the TableOperations // plugin for the second editor). Just be careful to pass different // ID-s in the constructor (you don't want to _even try_ to create more // editors for the same TEXTAREA element ;-)). // // So much for the noise, see the action below. //--------------------------------------------------------------------- //--------------------------------------------------------------------- // CREATE FIRST EDITOR // var editor1 = new HTMLArea("text-area-1"); // plugins must be registered _per editor_. Therefore, we register // plugins for the first editor here, and we will also do this for the // second editor. editor1.registerPlugin(TableOperations); editor1.registerPlugin(SpellChecker); editor1.registerPlugin(CSS, css_plugin_args); // custom config must be done per editor. Here we're importing the // stylesheet used by the CSS plugin. editor1.config.pageStyle = "@import url(custom.css);"; // generate first editor editor1.generate(); //--------------------------------------------------------------------- //--------------------------------------------------------------------- // CREATE SECOND EDITOR // var editor2 = new HTMLArea("text-area-2"); // we are using the same plugins editor2.registerPlugin(TableOperations); editor2.registerPlugin(SpellChecker); editor2.registerPlugin(CSS, css_plugin_args); // import the CSS plugin styles editor2.config.pageStyle = "@import url(custom.css);"; // generate the second editor // IMPORTANT: if we don't give it a timeout, the first editor will // not function in Mozilla. Soon I'll think about starting to // implement some kind of event that will fire when the editor // finished creating, then we'll be able to chain the generate() // calls in an elegant way. But right now there's no other solution // than the following. setTimeout(function() { editor2.generate(); }, 500); //--------------------------------------------------------------------- }; </script> </head> <body onload="initDocument()"> <h1>Example with 2 HTMLAreas in the same form</h1> <form action="2-areas.cgi" method="post" target="_blank"> <input type="submit" value=" Submit " /> <br /> <textarea id="text-area-1" name="text1" style="width: 100%; height: 12em"> <h3>HTMLArea #1</h3> <p>This will submit a field named <em>text1</em>.</p> </textarea> <br /> <textarea id="text-area-2" name="text2" style="width: 100%; height: 12em"> <h3>Second HTMLArea</h3> <p><em>text2</em> submission. Both are located in the same FORM element and the script action is 2-areas.cgi (see it in the examples directory)</p> </textarea> <br /> <input type="submit" value=" Submit " /> </form> <hr> <address><a href="http://dynarch.com/mishoo/">Mihai Bazon</a></address><!-- Created: Fri Oct 31 09:37:10 EET 2003 --><!-- hhmts start --> Last modified: Wed Jan 28 11:10:40 EET 2004 <!-- hhmts end --><!-- doc-lang: English --> </body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -