[BACK]Return to example.html CVS log [TXT] [DIR] Up to [LON-CAPA] / loncom / html / htmlarea
File:  [LON-CAPA] / loncom / html / htmlarea / Attic / example.html
Revision 1.1: download - view: text, annotated - select for diffs
Wed Feb 18 08:07:15 2004 UTC (20 years, 4 months ago) by www
Branches: MAIN
CVS tags: version_2_5_X, version_2_5_99_0, version_2_5_2, version_2_5_1, version_2_5_0, version_2_4_X, version_2_4_99_0, version_2_4_2, version_2_4_1, version_2_4_0, version_2_3_X, version_2_3_99_0, version_2_3_2, version_2_3_1, version_2_3_0, version_2_2_X, version_2_2_99_1, version_2_2_99_0, version_2_2_2, version_2_2_1, version_2_2_0, version_2_1_X, version_2_1_99_3, version_2_1_99_2, version_2_1_99_1, version_2_1_99_0, version_2_1_3, version_2_1_2, version_2_1_1, version_2_1_0, version_2_0_X, version_2_0_99_1, version_2_0_2, version_2_0_1, version_2_0_0, version_1_99_3, version_1_99_2, version_1_99_1_tmcc, version_1_99_1, version_1_99_0_tmcc, version_1_99_0, version_1_3_X, version_1_3_3, version_1_3_2, version_1_3_1, version_1_3_0, version_1_2_X, version_1_2_99_1, version_1_2_99_0, version_1_2_1, version_1_2_0, version_1_1_99_5, version_1_1_99_4, version_1_1_99_3, version_1_1_99_2, version_1_1_99_1, version_1_1_99_0, HEAD
Install HTMLArea

    1: <html>
    2: <head>
    3: <title>Example of HTMLArea 3.0</title>
    4: 
    5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6: 
    7: <script type="text/javascript" src="htmlarea.js"></script>
    8: <script type="text/javascript" src="lang/en.js"></script>
    9: <script type="text/javascript" src="dialog.js"></script>
   10: 
   11: <style type="text/css">
   12: @import url(htmlarea.css);
   13: 
   14: html, body {
   15:   font-family: Verdana,sans-serif;
   16:   background-color: #fea;
   17:   color: #000;
   18: }
   19: a:link, a:visited { color: #00f; }
   20: a:hover { color: #048; }
   21: a:active { color: #f00; }
   22: 
   23: textarea { background-color: #fff; border: 1px solid 00f; }
   24: </style>
   25: 
   26: <script type="text/javascript">
   27: var editor = null;
   28: function initEditor() {
   29:   editor = new HTMLArea("ta");
   30: 
   31:   // comment the following two lines to see how customization works
   32:   editor.generate();
   33:   return false;
   34: 
   35:   var cfg = editor.config; // this is the default configuration
   36:   cfg.registerButton({
   37:     id        : "my-hilite",
   38:     tooltip   : "Highlight text",
   39:     image     : "ed_custom.gif",
   40:     textMode  : false,
   41:     action    : function(editor) {
   42:                   editor.surroundHTML("<span class=\"hilite\">", "</span>");
   43:                 },
   44:     context   : 'table'
   45:   });
   46: 
   47:   cfg.toolbar.push(["linebreak", "my-hilite"]); // add the new button to the toolbar
   48: 
   49:   // BEGIN: code that adds a custom button
   50:   // uncomment it to test
   51:   var cfg = editor.config; // this is the default configuration
   52:   /*
   53:   cfg.registerButton({
   54:     id        : "my-hilite",
   55:     tooltip   : "Highlight text",
   56:     image     : "ed_custom.gif",
   57:     textMode  : false,
   58:     action    : function(editor) {
   59:                   editor.surroundHTML("<span class=\"hilite\">", "</span>");
   60:                 }
   61:   });
   62:   */
   63: 
   64: function clickHandler(editor, buttonId) {
   65:   switch (buttonId) {
   66:     case "my-toc":
   67:       editor.insertHTML("<h1>Table Of Contents</h1>");
   68:       break;
   69:     case "my-date":
   70:       editor.insertHTML((new Date()).toString());
   71:       break;
   72:     case "my-bold":
   73:       editor.execCommand("bold");
   74:       editor.execCommand("italic");
   75:       break;
   76:     case "my-hilite":
   77:       editor.surroundHTML("<span class=\"hilite\">", "</span>");
   78:       break;
   79:   }
   80: };
   81: cfg.registerButton("my-toc",  "Insert TOC", "ed_custom.gif", false, clickHandler);
   82: cfg.registerButton("my-date", "Insert date/time", "ed_custom.gif", false, clickHandler);
   83: cfg.registerButton("my-bold", "Toggle bold/italic", "ed_custom.gif", false, clickHandler);
   84: cfg.registerButton("my-hilite", "Hilite selection", "ed_custom.gif", false, clickHandler);
   85: 
   86: cfg.registerButton("my-sample", "Class: sample", "ed_custom.gif", false,
   87:   function(editor) {
   88:     if (HTMLArea.is_ie) {
   89:       editor.insertHTML("<span class=\"sample\">&nbsp;&nbsp;</span>");
   90:       var r = editor._doc.selection.createRange();
   91:       r.move("character", -2);
   92:       r.moveEnd("character", 2);
   93:       r.select();
   94:     } else { // Gecko/W3C compliant
   95:       var n = editor._doc.createElement("span");
   96:       n.className = "sample";
   97:       editor.insertNodeAtSelection(n);
   98:       var sel = editor._iframe.contentWindow.getSelection();
   99:       sel.removeAllRanges();
  100:       var r = editor._doc.createRange();
  101:       r.setStart(n, 0);
  102:       r.setEnd(n, 0);
  103:       sel.addRange(r);
  104:     }
  105:   }
  106: );
  107: 
  108: 
  109:   /*
  110:   cfg.registerButton("my-hilite", "Highlight text", "ed_custom.gif", false,
  111:     function(editor) {
  112:       editor.surroundHTML('<span class="hilite">', '</span>');
  113:     }
  114:   );
  115:   */
  116:   cfg.pageStyle = "body { background-color: #efd; } .hilite { background-color: yellow; } "+
  117:                   ".sample { color: green; font-family: monospace; }";
  118:   cfg.toolbar.push(["linebreak", "my-toc", "my-date", "my-bold", "my-hilite", "my-sample"]); // add the new button to the toolbar
  119:   // END: code that adds a custom button
  120: 
  121:   editor.generate();
  122: }
  123: function insertHTML() {
  124:   var html = prompt("Enter some HTML code here");
  125:   if (html) {
  126:     editor.insertHTML(html);
  127:   }
  128: }
  129: function highlight() {
  130:   editor.surroundHTML('<span style="background-color: yellow">', '</span>');
  131: }
  132: </script>
  133: 
  134: </head>
  135: 
  136: <!-- use <body onload="HTMLArea.replaceAll()" if you don't care about
  137:      customizing the editor.  It's the easiest way! :) -->
  138: <body onload="initEditor()">
  139: 
  140: <h1>HTMLArea 3.0</h1>
  141: 
  142: <p>A replacement for <code>TEXTAREA</code> elements.  &copy; <a
  143: href="http://interactivetools.com">InteractiveTools.com</a>, 2003.</p>
  144: 
  145: <form action="test.cgi" method="post" id="edit" name="edit">
  146: 
  147: <textarea id="ta" name="ta" style="width:100%" rows="20" cols="80">
  148:   &lt;p&gt;Here is some sample text: &lt;b&gt;bold&lt;/b&gt;, &lt;i&gt;italic&lt;/i&gt;, &lt;u&gt;underline&lt;/u&gt;. &lt;/p&gt;
  149:   &lt;p align=center&gt;Different fonts, sizes and colors (all in bold):&lt;/p&gt;
  150:   &lt;p&gt;&lt;b&gt;
  151:    &lt;font face="arial"           size="7" color="#000066"&gt;arial&lt;/font&gt;,
  152:    &lt;font face="courier new"     size="6" color="#006600"&gt;courier new&lt;/font&gt;,
  153:    &lt;font face="georgia"         size="5" color="#006666"&gt;georgia&lt;/font&gt;,
  154:    &lt;font face="tahoma"          size="4" color="#660000"&gt;tahoma&lt;/font&gt;,
  155:    &lt;font face="times new roman" size="3" color="#660066"&gt;times new roman&lt;/font&gt;,
  156:    &lt;font face="verdana"         size="2" color="#666600"&gt;verdana&lt;/font&gt;,
  157:    &lt;font face="tahoma"          size="1" color="#666666"&gt;tahoma&lt;/font&gt;
  158:   &lt;/b&gt;&lt;/p&gt;
  159:   &lt;p&gt;Click on &lt;a href="http://www.interactivetools.com/"&gt;this link&lt;/a&gt; and then on the link button to the details ... OR ... select some text and click link to create a &lt;b&gt;new&lt;/b&gt; link.&lt;/p&gt;
  160: </textarea>
  161: 
  162: <p />
  163: 
  164: <input type="submit" name="ok" value="  submit  " />
  165: <input type="button" name="ins" value="  insert html  " onclick="return insertHTML();" />
  166: <input type="button" name="hil" value="  highlight text  " onclick="return highlight();" />
  167: 
  168: <a href="javascript:mySubmit()">submit</a>
  169: 
  170: <script type="text/javascript">
  171: function mySubmit() {
  172: // document.edit.save.value = "yes";
  173: document.edit.onsubmit(); // workaround browser bugs.
  174: document.edit.submit();
  175: };
  176: </script>
  177: 
  178: </form>
  179: 
  180: </body>
  181: </html>
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>