Annotation of loncom/html/htmlarea/example.html, revision 1.1
1.1 ! www 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\"> </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. © <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: <p>Here is some sample text: <b>bold</b>, <i>italic</i>, <u>underline</u>. </p>
! 149: <p align=center>Different fonts, sizes and colors (all in bold):</p>
! 150: <p><b>
! 151: <font face="arial" size="7" color="#000066">arial</font>,
! 152: <font face="courier new" size="6" color="#006600">courier new</font>,
! 153: <font face="georgia" size="5" color="#006666">georgia</font>,
! 154: <font face="tahoma" size="4" color="#660000">tahoma</font>,
! 155: <font face="times new roman" size="3" color="#660066">times new roman</font>,
! 156: <font face="verdana" size="2" color="#666600">verdana</font>,
! 157: <font face="tahoma" size="1" color="#666666">tahoma</font>
! 158: </b></p>
! 159: <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>
! 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>
![[BACK]](/icons/back.gif){kind=icon}
Return to example.html CVS log ![[TXT]](/icons/text.gif){kind=icon}
![[DIR]](/icons/dir.gif){kind=icon}
Up to [LON-CAPA] / loncom / html / htmlarea