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, 6 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\"> </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>