|
From: Garvin H. <gar...@us...> - 2004-03-23 15:51:33
|
Update of /cvsroot/php-blog/serendipity/htmlarea/examples In directory sc8-pr-cvs1.sourceforge.net:/tmp/cvs-serv20038/examples Added Files: 2-areas.html context-menu.html core.html css.html custom.css full-page.html fully-loaded.html index.html spell-checker.html table-operations.html Log Message: Upgrade to latest WYSIWYG manager --- NEW FILE: full-page.html --- <html> <head> <title>Test of FullPage plugin</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> _editor_url = "../"; _editor_lang = "en"; </script> <!-- load the main HTMLArea files --> <script type="text/javascript" src="../htmlarea.js"></script> <script type="text/javascript"> HTMLArea.loadPlugin("FullPage"); function initDocument() { var editor = new HTMLArea("editor"); editor.registerPlugin(FullPage); editor.generate(); } </script> </head> <body onload="initDocument()"> <h1>Test of FullPage plugin</h1> <textarea id="editor" style="height: 30em; width: 100%;"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title>FullPage plugin for HTMLArea</title> <link rel="alternate stylesheet" href="http://dynarch.com/mishoo/css/dark.css" /> <link rel="stylesheet" href="http://dynarch.com/mishoo/css/cool-light.css" /> </head> <body style="background-color: #ddddee; color: #000077;"> <table style="width:60%; height: 90%; margin: 2% auto 1% auto;" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="background-color: #ddeedd; border: 2px solid #002; height: 1.5em; padding: 2px; font: bold 24px Verdana;"> FullPage plugin </td> </tr> <tr> <td style="background-color: #fff; border: 1px solid #aab; padding: 1em 3em; font: 12px Verdana;"> <p> This plugin enables one to edit a full HTML file in <a href="http://dynarch.com/htmlarea/">HTMLArea</a>. This is not normally possible with just the core editor since it only retrieves the HTML inside the <code>body</code> tag. </p> <p> It provides the ability to change the <code>DOCTYPE</code> of the document, <code>body</code> <code>bgcolor</code> and <code>fgcolor</code> attributes as well as to add additional <code>link</code>-ed stylesheets. Cool, eh? </p> <p> The development of this plugin was initiated and sponsored by <a href="http://thycotic.com">Thycotic Software Ltd.</a>. That's also cool, isn't it? ;-) </p> </td> </tr> </table> </body> </html> </textarea> <hr /> <address><a href="http://dynarch.com/mishoo/">Mihai Bazon</a></address> <!-- Created: Wed Oct 1 19:55:37 EEST 2003 --> <!-- hhmts start --> Last modified: Wed Jan 28 11:10:07 EET 2004 <!-- hhmts end --> <!-- doc-lang: English --> </body> </html> --- NEW FILE: fully-loaded.html --- <html> <head> <title>Example of HTMLArea 3.0</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Configure the path to the editor. We make it relative now, so that the example ZIP file will work anywhere, but please NOTE THAT it's better to have it an absolute path, such as '/htmlarea/'. --> <script type="text/javascript"> _editor_url = "../"; _editor_lang = "en"; </script> <!-- load the main HTMLArea file, this will take care of loading the CSS and other required core scripts. --> <script type="text/javascript" src="../htmlarea.js"></script> <!-- load the plugins --> <script type="text/javascript"> // WARNING: using this interface to load plugin // will _NOT_ work if plugins do not have the language // loaded by HTMLArea. // In other words, this function generates SCRIPT tags // that load the plugin and the language file, based on the // global variable HTMLArea.I18N.lang (defined in the lang file, // in our case "lang/en.js" loaded above). // If this lang file is not found the plugin will fail to // load correctly and nothing will work. HTMLArea.loadPlugin("TableOperations"); HTMLArea.loadPlugin("SpellChecker"); HTMLArea.loadPlugin("FullPage"); HTMLArea.loadPlugin("CSS"); HTMLArea.loadPlugin("ContextMenu"); </script> <style type="text/css"> html, body { font-family: Verdana,sans-serif; background-color: #fea; color: #000; } a:link, a:visited { color: #00f; } a:hover { color: #048; } a:active { color: #f00; } textarea { background-color: #fff; border: 1px solid 00f; } </style> <script type="text/javascript"> var editor = null; function initEditor() { // create an editor for the "ta" textbox editor = new HTMLArea("ta"); // register the FullPage plugin editor.registerPlugin(FullPage); // register the SpellChecker plugin editor.registerPlugin(TableOperations); // register the SpellChecker plugin editor.registerPlugin(SpellChecker); // register the CSS plugin editor.registerPlugin(CSS, { 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" } } ] }); // add a contextual menu editor.registerPlugin("ContextMenu"); // load the stylesheet used by our CSS plugin configuration editor.config.pageStyle = "@import url(custom.css);"; setTimeout(function() { editor.generate(); }, 500); return false; } function insertHTML() { var html = prompt("Enter some HTML code here"); if (html) { editor.insertHTML(html); } } function highlight() { editor.surroundHTML('<span style="background-color: yellow">', '</span>'); } </script> </head> <!-- use <body onload="HTMLArea.replaceAll()" if you don't care about customizing the editor. It's the easiest way! :) --> <body onload="initEditor()"> <h1>HTMLArea 3.0</h1> <p>A replacement for <code>TEXTAREA</code> elements. © <a href="http://interactivetools.com">InteractiveTools.com</a>, 2003-2004.</p> <form action="test.cgi" method="post" id="edit" name="edit"> <textarea id="ta" name="ta" style="width:100%" rows="24" cols="80"> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN"> <html> <head> <title>Passing parameters to JavaScript code</title> <link rel="stylesheet" href="custom.css" /> </head> <body> <h1>Passing parameters to JavaScript code</h1> <p>Sometimes we need to pass parameters to some JavaScript function that we wrote ourselves. But sometimes it's simply more convenient to include the parameter not in the function call, but in the affected HTML elements. Usually, all JavaScript calls affect some element, right? ;-)</p> <p>Well, here's an original way to do it. Or at least, I think it's original.</p> <h2>But first...</h2> <p>... an example. Why would I need such thing? I have a JS function that is called on <code>BODY</code> <code>onload</code> handler. This function tries to retrieve the element with the ID "conttoc" and, if present, it will <a href="toc.epl" title="Automatic TOC generation">generate an index</a>. The problem is, this function exists in some external JavaScript library that it's loaded in page. I only needed to pass the parameter from <em>one</em> page. Thus, it makes sense to pass the parameter from the HTML code on <em>that</em> page, not to affect the others.</p> <p>The first idea that came to me was to use some attribute, like "id" or "class". But "id" was locked already, it <em>had</em> to be "conttoc". Use "class"? It's not elegant.. what if I really wanted to give it a class, at some point?</p> <h2>The idea</h2> <p>So I thought: what are the HTML elements that do not affect the page rendering in any way? Well, comments. I mean, <em>comments</em>, HTML comments. You know, like <code>&lt;!-- this is a comment --&gt;</code>.</p> <p>Though comments do not normally affect the way browser renders the page, they are still parsed and are part of the DOM, as well as any other node. But this mean that we can access comments from JavaScript code, just like we access any other element, right? Which means that they <em>can</em> affect the way that page finally appears ;-)</p> <h2>The code</h2> <p>The main part was the idea. The code is simple ;-) Suppose we have the following HTML code:</p> <pre class="code"><span class="function-name">&lt;</span><span class="html-tag">div</span> <span class="variable-name">id=</span><span class="string">&quot;conttoc&quot;</span><span class="paren-face-match">&gt;</span><span class="function-name">&lt;</span><span class="html-tag">/div</span><span class="function-name">&gt;</span></pre> <p>and our function checks for the presence an element having the ID "conttoc", and generates a table of contents into it. Our code will also check if the "conttoc" element's first child is a comment node, and if so will parse additional parameters from there, for instance, a desired prefix for the links that are to be generated into it. Why did I need it? Because if the page uses a <code>&lt;base&gt;</code> element to specify the default link prefix, then links like "#gen1" generated by the <a href="toc.epl">toc generator</a> will not point to that same page as they should, but to the page reffered from <code>&lt;base&gt;</code>.</p> <p>So the HTML would now look like this:</p> <pre class="code"><span class="function-name">&lt;</span><span class="html-tag">div</span> <span class="variable-name">id=</span><span class="string">&quot;conttoc&quot;</span><span class="function-name">&gt;</span><span class="comment">&lt;!-- base:link/prefix.html --&gt;</span><span class="paren-face-match">&lt;</span><span class="html-tag">/div</span><span class="paren-face-match">&gt;</span></pre> <p>And our TOC generation function does something like this:</p> <pre class="code"><span class="keyword">var</span> <span class="variable-name">element</span> = getElementById(&quot;<span class="string">conttoc</span>&quot;); <span class="keyword">if</span> (element.firstChild &amp;&amp; element.firstChild.nodeType == 8) { <span class="comment">// 8 means Node.COMMENT_NODE. We're using numeric values </span> <span class="comment">// because IE6 does not support constant names. </span> <span class="keyword">var</span> <span class="variable-name">parameters</span> = element.firstChild.data; <span class="comment">// at this point &quot;parameters&quot; contains base:link/prefix.html </span> <span class="comment">// ... </span>}</pre> <p>So we retrieved the value passed to the script from the HTML code. This was the goal of this article.</p> <hr /> <address><a href="http://students.infoiasi.ro/~mishoo/">Mihai Bazon</a></address> <!-- hhmts start --> Last modified on Thu Apr 3 20:34:17 2003 <!-- hhmts end --> <!-- doc-lang: English --> </body> </html> </textarea> <p /> <input type="submit" name="ok" value=" submit " /> <input type="button" name="ins" value=" insert html " onclick="return insertHTML();" /> <input type="button" name="hil" value=" highlight text " onclick="return highlight();" /> <a href="javascript:mySubmit()">submit</a> <script type="text/javascript"> function mySubmit() { // document.edit.save.value = "yes"; document.edit.onsubmit(); // workaround browser bugs. document.edit.submit(); }; </script> </form> </body> </html> --- NEW FILE: index.html --- <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <head> <title>HTMLArea examples index</title> </head> <body> <h1>HTMLArea: auto-generated examples index</h1> <ul> <li> <a href="2-areas.html">2-areas.html</a> </li> <li> <a href="context-menu.html">context-menu.html</a> </li> <li> <a href="core.html">core.html</a> </li> <li> <a href="css.html">css.html</a> </li> <li> <a href="full-page.html">full-page.html</a> </li> <li> <a href="fully-loaded.html">fully-loaded.html</a> </li> <li> <a href="spell-checker.html">spell-checker.html</a> </li> <li> <a href="table-operations.html">table-operations.html</a> </li> </ul> <hr /> <address>mi...@in...</address> <!-- hhmts start --> Last modified: Sun Feb 1 13:30:39 EET 2004 <!-- hhmts end --> </body> </html> --- NEW FILE: 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> --- NEW FILE: context-menu.html --- <html> <head> <title>Test of ContextMenu plugin</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> _editor_url = "../"; _editor_lang = "en"; </script> <!-- load the main HTMLArea file --> <script type="text/javascript" src="../htmlarea.js"></script> <script type="text/javascript"> HTMLArea.loadPlugin("ContextMenu"); HTMLArea.loadPlugin("TableOperations"); function initDocument() { var editor = new HTMLArea("editor"); editor.registerPlugin(ContextMenu); editor.registerPlugin(TableOperations); editor.generate(); } </script> </head> <body onload="initDocument()"> <h1>Test of ContextMenu plugin</h1> <textarea id="editor" style="height: 30em; width: 100%;"> <table border="1" style="border: 1px dotted rgb(0, 102, 255); width: 100%; background-color: rgb(255, 204, 51); background-image: none; float: none; text-align: left; vertical-align: top; border-collapse: collapse;" summary="" cellspacing="" cellpadding="" frame="box" rules="all"><tbody><tr><td style="border: 1px solid rgb(255, 0, 0); background-color: rgb(0, 51, 51); background-image: none; text-align: left; vertical-align: top;"><a href="http://dynarch.com/mishoo/articles.epl?art_id=430"><img src="http://127.0.0.1/~mishoo/htmlarea/examples/pieng.png" alt="" align="" border="0" hspace="0" vspace="0" /></a></td><td style="border: 1px solid rgb(255, 0, 0); background-color: rgb(255, 255, 0); background-image: none; text-align: left; vertical-align: top;">The article linked on the left image presents a script that allows Internet Explorer to use PNG images. We hope to be able to implement IE PNG support in HTMLArea soon.<br /> <br /> Go on, right-click everywhere and test our new context menus. And be thankful to <a href="http://www.americanbible.org/">American Bible Society</a> who sponsored the development, <a href="http://dynarch.com/mishoo/">mishoo</a> who made it happen and God, Who keeps mishoo alife. ;-)<br /> <br /><span style="font-style: italic;">P.S.</span> No animals were harmed while producing this movie.<br /> </td></tr><tr><td style="border-style: none; background-color: rgb(255, 255, 51); background-image: none; text-align: left; vertical-align: top;">Welcome to HTMLArea, the best online editor.<br /></td><td>HTMLArea is a project initiated by <a href="http://interactivetools.com/">InteractiveTools.com</a>. Other companies contributed largely by sponsoring the development of additional extensions. Many thanks to:<br /> <br style="font-family: courier new,courier,monospace;" /> <div style="margin-left: 40px;"><a href="http://www.zapatec.com/" style="font-family: courier new,courier,monospace;">http://www.zapatec.com</a><br style="font-family: courier new,courier,monospace;" /> <a href="http://www.americanbible.org/" style="font-family: courier new,courier,monospace;">http://www.americanbible.org</a><br style="font-family: courier new,courier,monospace;" /> <a href="http://www.neomedia.ro/" style="font-family: courier new,courier,monospace;">http://www.neomedia.ro</a><br style="font-family: courier new,courier,monospace;" /> <a href="http://www.os3.it/" style="font-family: courier new,courier,monospace;">http://www.os3.it</a><br style="font-family: courier new,courier,monospace;" /> <a href="http://www.miro.com.au/" style="font-family: courier new,courier,monospace;">http://www.miro.com.au</a><br style="font-family: courier new,courier,monospace;" /> <a href="http://www.thycotic.com/" style="font-family: courier new,courier,monospace;">http://www.thycotic.com</a><br /> </div> <br /> and to all the posters at <a href="http://www.interactivetools.com/iforum/Open_Source_C3/htmlArea_v3.0_-_Alpha_Release_F14/ ">InteractiveTools</a> HTMLArea forums, whose feedback is continually useful in polishing HTMLArea.<br /> <br /><div style="text-align: right;">-- developers and maintainers of version 3, <a href="http://dynarch.com/">dynarch.com</a>.<br /></div></td></tr></tbody></table> </textarea> <hr /> <address><a href="http://dynarch.com/mishoo/">Mihai Bazon</a></address> <!-- Created: Wed Oct 1 19:55:37 EEST 2003 --> <!-- hhmts start --> Last modified: Wed Jan 28 11:10:29 EET 2004 <!-- hhmts end --> <!-- doc-lang: English --> </body> </html> --- NEW FILE: core.html --- <html> <head> <title>Example of HTMLArea 3.0</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Configure the path to the editor. We make it relative now, so that the example ZIP file will work anywhere, but please NOTE THAT it's better to have it an absolute path, such as '/htmlarea/'. --> <script type="text/javascript"> _editor_url = "../"; _editor_lang = "en"; </script> <script type="text/javascript" src="../htmlarea.js"></script> <style type="text/css"> html, body { font-family: Verdana,sans-serif; background-color: #fea; color: #000; } a:link, a:visited { color: #00f; } a:hover { color: #048; } a:active { color: #f00; } textarea { background-color: #fff; border: 1px solid 00f; } </style> <script type="text/javascript"> var editor = null; function initEditor() { editor = new HTMLArea("ta"); // comment the following two lines to see how customization works editor.generate(); return false; var cfg = editor.config; // this is the default configuration cfg.registerButton({ id : "my-hilite", tooltip : "Highlight text", image : "ed_custom.gif", textMode : false, action : function(editor) { editor.surroundHTML("<span class=\"hilite\">", "</span>"); }, context : 'table' }); cfg.toolbar.push(["linebreak", "my-hilite"]); // add the new button to the toolbar // BEGIN: code that adds a custom button // uncomment it to test var cfg = editor.config; // this is the default configuration /* cfg.registerButton({ id : "my-hilite", tooltip : "Highlight text", image : "ed_custom.gif", textMode : false, action : function(editor) { editor.surroundHTML("<span class=\"hilite\">", "</span>"); } }); */ function clickHandler(editor, buttonId) { switch (buttonId) { case "my-toc": editor.insertHTML("<h1>Table Of Contents</h1>"); break; case "my-date": editor.insertHTML((new Date()).toString()); break; case "my-bold": editor.execCommand("bold"); editor.execCommand("italic"); break; case "my-hilite": editor.surroundHTML("<span class=\"hilite\">", "</span>"); break; } }; cfg.registerButton("my-toc", "Insert TOC", "ed_custom.gif", false, clickHandler); cfg.registerButton("my-date", "Insert date/time", "ed_custom.gif", false, clickHandler); cfg.registerButton("my-bold", "Toggle bold/italic", "ed_custom.gif", false, clickHandler); cfg.registerButton("my-hilite", "Hilite selection", "ed_custom.gif", false, clickHandler); cfg.registerButton("my-sample", "Class: sample", "ed_custom.gif", false, function(editor) { if (HTMLArea.is_ie) { editor.insertHTML("<span class=\"sample\"> </span>"); var r = editor._doc.selection.createRange(); r.move("character", -2); r.moveEnd("character", 2); r.select(); } else { // Gecko/W3C compliant var n = editor._doc.createElement("span"); n.className = "sample"; editor.insertNodeAtSelection(n); var sel = editor._iframe.contentWindow.getSelection(); sel.removeAllRanges(); var r = editor._doc.createRange(); r.setStart(n, 0); r.setEnd(n, 0); sel.addRange(r); } } ); /* cfg.registerButton("my-hilite", "Highlight text", "ed_custom.gif", false, function(editor) { editor.surroundHTML('<span class="hilite">', '</span>'); } ); */ cfg.pageStyle = "body { background-color: #efd; } .hilite { background-color: yellow; } "+ ".sample { color: green; font-family: monospace; }"; cfg.toolbar.push(["linebreak", "my-toc", "my-date", "my-bold", "my-hilite", "my-sample"]); // add the new button to the toolbar // END: code that adds a custom button editor.generate(); } function insertHTML() { var html = prompt("Enter some HTML code here"); if (html) { editor.insertHTML(html); } } function highlight() { editor.surroundHTML('<span style="background-color: yellow">', '</span>'); } </script> </head> <!-- use <body onload="HTMLArea.replaceAll()" if you don't care about customizing the editor. It's the easiest way! :) --> <body onload="initEditor()"> <h1>HTMLArea 3.0</h1> <p>A replacement for <code>TEXTAREA</code> elements. © <a href="http://interactivetools.com">InteractiveTools.com</a>, 2003-2004.</p> <form action="test.cgi" method="post" id="edit" name="edit"> <textarea id="ta" name="ta" style="width:100%" rows="20" cols="80"> <p>Here is some sample text: <b>bold</b>, <i>italic</i>, <u>underline</u>. </p> <p align=center>Different fonts, sizes and colors (all in bold):</p> <p><b> <font face="arial" size="7" color="#000066">arial</font>, <font face="courier new" size="6" color="#006600">courier new</font>, <font face="georgia" size="5" color="#006666">georgia</font>, <font face="tahoma" size="4" color="#660000">tahoma</font>, <font face="times new roman" size="3" color="#660066">times new roman</font>, <font face="verdana" size="2" color="#666600">verdana</font>, <font face="tahoma" size="1" color="#666666">tahoma</font> </b></p> <p>Click on <a href="http://www.interactivetools.com/">this link</a> and then on the link button to the details ... OR ... select some text and click link to create a <b>new</b> link.</p> </textarea> <p /> <input type="submit" name="ok" value=" submit " /> <input type="button" name="ins" value=" insert html " onclick="return insertHTML();" /> <input type="button" name="hil" value=" highlight text " onclick="return highlight();" /> <a href="javascript:mySubmit()">submit</a> <script type="text/javascript"> function mySubmit() { // document.edit.save.value = "yes"; document.edit.onsubmit(); // workaround browser bugs. document.edit.submit(); }; </script> </form> </body> </html> --- NEW FILE: css.html --- <html> <head> <title>Test of CSS plugin</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> _editor_url = "../"; _editor_lang = "en"; </script> <!-- load the main HTMLArea files --> <script type="text/javascript" src="../htmlarea.js"></script> <script type="text/javascript"> HTMLArea.loadPlugin("CSS"); function initDocument() { var editor = new HTMLArea("editor"); editor.config.pageStyle = "@import url(custom.css);"; editor.registerPlugin(CSS, { 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" } } ] }); editor.generate(); } </script> </head> <body onload="initDocument()"> <h1>Test of FullPage plugin</h1> <textarea id="editor" style="height: 30em; width: 100%;" ><h1><tt>registerDropdown</tt></h1> <p>Here's some sample code that adds a dropdown to the toolbar. Go on, do syntax highlighting on it ;-)</p> <pre>var the_options = { "Keyword" : "keyword", "Function name" : "function-name", "String" : "string", "Numeric" : "integer", "Variable name" : "variable" }; var css_class = { id : "CSS-class", tooltip : i18n["tooltip"], options : the_options, action : function(editor) { self.onSelect(editor, this); } }; cfg.registerDropdown(css_class); toolbar[0].unshift(["CSS-class"]);</pre> <p>Easy, eh? ;-)</p></textarea> <hr /> <address><a href="http://dynarch.com/mishoo/">Mihai Bazon</a></address> <!-- Created: Wed Oct 1 19:55:37 EEST 2003 --> <!-- hhmts start --> Last modified: Wed Jan 28 11:10:16 EET 2004 <!-- hhmts end --> <!-- doc-lang: English --> </body> </html> --- NEW FILE: spell-checker.html --- <html> <head> <title>Example of HTMLArea 3.0</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Configure the path to the editor. We make it relative now, so that the example ZIP file will work anywhere, but please NOTE THAT it's better to have it an absolute path, such as '/htmlarea/'. --> <script type="text/javascript"> _editor_lang = "en"; _editor_url = "../"; </script> <!-- load the main HTMLArea files --> <script type="text/javascript" src="../htmlarea.js"></script> <style type="text/css"> html, body { font-family: Verdana,sans-serif; background-color: #fea; color: #000; } a:link, a:visited { color: #00f; } a:hover { color: #048; } a:active { color: #f00; } textarea { background-color: #fff; border: 1px solid 00f; } </style> <script type="text/javascript"> HTMLArea.loadPlugin("SpellChecker"); var editor = null; function initEditor() { // create an editor for the "ta" textbox editor = new HTMLArea("ta"); // register the SpellChecker plugin editor.registerPlugin(SpellChecker); editor.generate(); return false; } function insertHTML() { var html = prompt("Enter some HTML code here"); if (html) { editor.insertHTML(html); } } function highlight() { editor.surroundHTML('<span style="background-color: yellow">', '</span>'); } </script> </head> <!-- use <body onload="HTMLArea.replaceAll()" if you don't care about customizing the editor. It's the easiest way! :) --> <body onload="initEditor()"> <h1>HTMLArea 3.0</h1> <p>A replacement for <code>TEXTAREA</code> elements. © <a href="http://interactivetools.com">InteractiveTools.com</a>, 2003-2004.</p> <p>Plugins: <tt>SpellChecker</tt> (sponsored by <a href="http://americanbible.org">American Bible Society</a>). </p> <form action="test.cgi" method="post" id="edit" name="edit"> <textarea id="ta" name="ta" style="width:100%" rows="24" cols="80"> <h1>The <tt>SpellChecker</tt> plugin</h1> <p>This file deminstrates the <tt>SpellChecker</tt> plugin of HTMLArea. To inwoke the spell checkert you need to press the <em>spell-check</em> buton in the toolbar.</p> <p>The spell-checker uses a serverside script written in Perl. The Perl script calls <a href="http://aspell.net">aspell</a> for any word in the text and reports wordz that aren't found in the dyctionari.</p> <p>The document that yu are reading now <b>intentionaly</b> containes some errorz, so that you have something to corect ;-)</p> <p>Credits for the <tt>SpellChecker</tt> plugin go to:</p> <ul> <li><a href="http://aspell.net">Aspell</a> -- spell checker</li> <li>The <a href="http://perl.org">Perl</a> programming language</li> <li><tt><a href="http://cpan.org/modules/by-module/Text/Text-Aspell-0.02.readme">Text::Aspell</a></tt> -- Perl interface to Aspell</li> <li><a href="http://americanbible.org">American Bible Society</a> -- for sponsoring the <tt>SpellChecker</tt> plugin for <tt>HTMLArea</tt></li> <li><a href="http://dynarch.com/mishoo/">Your humble servant</a> for implementing it ;-)</li> </ul> </textarea> <p /> <input type="submit" name="ok" value=" submit " /> <input type="button" name="ins" value=" insert html " onclick="return insertHTML();" /> <input type="button" name="hil" value=" highlight text " onclick="return highlight();" /> <a href="javascript:mySubmit()">submit</a> <script type="text/javascript"> function mySubmit() { // document.edit.save.value = "yes"; document.edit.onsubmit(); // workaround browser bugs. document.edit.submit(); }; </script> </form> </body> </html> --- NEW FILE: custom.css --- body { background-color: #234; color: #dd8; font-family: tahoma; font-size: 12px; } a:link, a:visited { color: #8cf; } a:hover { color: #ff8; } h1 { background-color: #456; color: #ff8; padding: 2px 5px; border: 1px solid; border-color: #678 #012 #012 #678; } /* syntax highlighting (used by the first combo defined for the CSS plugin) */ pre { margin: 0px 1em; padding: 5px 1em; background-color: #000; border: 1px dotted #02d; border-left: 2px solid #04f; } .code { color: #f5deb3; } .string { color: #00ffff; } .comment { color: #8fbc8f; } .variable-name { color: #fa8072; } .type { color: #90ee90; font-weight: bold; } .reference { color: #ee82ee; } .preprocessor { color: #faf; } .keyword { color: #ffffff; font-weight: bold; } .function-name { color: #ace; } .html-tag { font-weight: bold; } .html-helper-italic { font-style: italic; } .warning { color: #ffa500; font-weight: bold; } .html-helper-bold { font-weight: bold; } /* info combo */ .quote { font-style: italic; color: #ee9; } .highlight { background-color: yellow; color: #000; } .deprecated { text-decoration: line-through; color: #aaa; } --- NEW FILE: table-operations.html --- <html> <head> <title>Example of HTMLArea 3.0</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Configure the path to the editor. We make it relative now, so that the example ZIP file will work anywhere, but please NOTE THAT it's better to have it an absolute path, such as '/htmlarea/'. --> <script type="text/javascript"> _editor_lang = "en"; _editor_url = "../"; </script> <!-- load the main HTMLArea files --> <script type="text/javascript" src="../htmlarea.js"></script> <style type="text/css"> html, body { font-family: Verdana,sans-serif; background-color: #fea; color: #000; } a:link, a:visited { color: #00f; } a:hover { color: #048; } a:active { color: #f00; } textarea { background-color: #fff; border: 1px solid 00f; } </style> <script type="text/javascript"> // load the plugin files HTMLArea.loadPlugin("TableOperations"); var editor = null; function initEditor() { // create an editor for the "ta" textbox editor = new HTMLArea("ta"); // register the TableOperations plugin with our editor editor.registerPlugin(TableOperations); editor.generate(); return false; } function insertHTML() { var html = prompt("Enter some HTML code here"); if (html) { editor.insertHTML(html); } } function highlight() { editor.surroundHTML('<span style="background-color: yellow">', '</span>'); } </script> </head> <!-- use <body onload="HTMLArea.replaceAll()" if you don't care about customizing the editor. It's the easiest way! :) --> <body onload="initEditor()"> <h1>HTMLArea 3.0</h1> <p>A replacement for <code>TEXTAREA</code> elements. © <a href="http://interactivetools.com">InteractiveTools.com</a>, 2003-2004.</p> <p>Page that demonstrates the additional features of the <tt>TableOperations</tt> plugin (sponsored by <a href="http://www.bloki.com">Zapatec Inc.</a>).</p> <form action="test.cgi" method="post" id="edit" name="edit"> <textarea id="ta" name="ta" style="width:100%" rows="24" cols="80"> <h1>Plugin: <tt>TableOperations</tt></h1> <p>This page exemplifies the table operations toolbar, provided by the TableOperations plugin.</p> <p>Following there is a table.</p> <table border="1" style="border: 2px solid rgb(255, 0, 0); width: 80%; background-image: none; border-collapse: collapse; color: rgb(153, 102, 0); background-color: rgb(255, 255, 51);" align="center" cellspacing="2" cellpadding="1" summary=""> <caption>This <span style="font-weight: bold;">is</span> a table</caption> <tbody> <tr style="border-style: none; background-image: none; background-color: rgb(255, 255, 153);" char="." align="left" valign="middle"> <td>1.1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> </tr> <tr> <td>2.1</td> <td style="border: 1px solid rgb(51, 51, 255); background-image: none; background-color: rgb(102, 255, 255); color: rgb(0, 0, 51);" char="." align="left" valign="middle">2.2</td> <td>2.3</td> <td>2.4</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td style="border: 2px dashed rgb(51, 204, 102); background-image: none; background-color: rgb(102, 255, 153); color: rgb(0, 51, 0);" char="." align="left" valign="middle">3.3</td> <td>3.4</td> </tr> <tr> <td style="background-color: rgb(255, 204, 51);">4.1</td> <td style="background-color: rgb(255, 204, 51);">4.2</td> <td style="background-color: rgb(255, 204, 51);">4.3</td> <td style="background-color: rgb(255, 204, 51);">4.4</td> </tr> </tbody> </table> <p>Text after the table</p> </textarea> <p /> <input type="submit" name="ok" value=" submit " /> <input type="button" name="ins" value=" insert html " onclick="return insertHTML();" /> <input type="button" name="hil" value=" highlight text " onclick="return highlight();" /> <a href="javascript:mySubmit()">submit</a> <script type="text/javascript"> function mySubmit() { // document.edit.save.value = "yes"; document.edit.onsubmit(); // workaround browser bugs. document.edit.submit(); }; </script> </form> </body> </html> |
