File size: 6,788 Bytes
07c3cdd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<html><head><title>htmlArea Example</title>
<style type="text/css"><!--
  body, td  { font-family: arial; font-size: x-small; }
  a         { color: #0000BB; text-decoration: none; }
  a:hover   { color: #FF0000; text-decoration: underline; }
  .headline { font-family: arial black, arial; font-size: 28px; letter-spacing: -1px; }
  .headline2{ font-family: verdana, arial; font-size: 12px; }
  .subhead  { font-family: arial, arial; font-size: 18px; font-weight: bold; font-style: italic; }
  .backtotop     { font-family: arial, arial; font-size: xx-small;  }
  .code     { background-color: #EEEEEE; font-family: Courier New; font-size: x-small;
              margin: 5px 0px 5px 0px; padding: 5px;
              border: black 1px dotted;
            }

  font { font-family: arial black, arial; font-size: 28px; letter-spacing: -1px; }

--></style>



<script language="Javascript1.2"><!-- // load htmlarea
_editor_url = "";                     // URL to htmlarea files
var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);
if (navigator.userAgent.indexOf('Mac')        >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Opera')      >= 0) { win_ie_ver = 0; }
if (win_ie_ver >= 5.5) {
  document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');
  document.write(' language="Javascript1.2"></scr' + 'ipt>');  
} else { document.write('<scr'+'ipt>function editor_generate() { return false; }</scr'+'ipt>'); }
// --></script>



</head>
<body>
<a name="top"></a>

<form method=POST action="">

<div align=center>
<span class="headline">htmlArea v2.03</span><br>
<span class="headline2">A free WYSIWYG editor replacement for &lt;textarea&gt; fields.<br><a href="http://www.interactivetools.com/" target="_blank">from your friends at interactivetools.com</a></span>
<hr>
</div>


<p>Sample textarea follows:</p>

<textarea name="yourFieldNameHere" style="width:500; height:250">

  <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><br>

<b>Example "InsertHTML" links: </b> &nbsp;
<a href="javascript:editor_insertHTML('yourFieldNameHere','<font style=\'background-color: yellow\'>','</font>',1);">Highlight selected text</a> -
<a href="javascript:editor_insertHTML('yourFieldNameHere',':)');">Insert Smiley</a>
<a href="javascript:alert(editor_getHTML('yourFieldNameHere'));">getHTML</a>
<a href="javascript:editor_setHTML('yourFieldNameHere','<b>Hello World</b>!!');">setHTML</a>

<script language="javascript1.2">
editor_generate('yourFieldNameHere');
</script>


<p><hr>
<p>Another textarea follows:  (This one has many more configuration defined in the source code)</p>


<textarea name="yourFieldNameHere2" style="width:500; height:450">
<hr>
  <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><br>


<script language="javascript1.2">
var config = new Object();    // create new config object

config.width = "500px";
config.height = "250px";
config.bodyStyle = 'background-color: white; font-family: "Verdana"; font-size: x-small;';
config.debug = 0;

// NOTE:  You can remove any of these blocks and use the default config!

config.toolbar = [
    ['fontname'],
    ['fontsize'],
    ['fontstyle'],
    ['linebreak'],
    ['bold','italic','underline','separator'],
//  ['strikethrough','subscript','superscript','separator'],
    ['justifyleft','justifycenter','justifyright','separator'],
    ['OrderedList','UnOrderedList','Outdent','Indent','separator'],
    ['forecolor','backcolor','separator'],
    ['HorizontalRule','Createlink','InsertImage','htmlmode','separator'],
    ['about','help','popupeditor'],
];

config.fontnames = {
    "Arial":           "arial, helvetica, sans-serif",
    "Courier New":     "courier new, courier, mono",
    "Georgia":         "Georgia, Times New Roman, Times, Serif",
    "Tahoma":          "Tahoma, Arial, Helvetica, sans-serif",
    "Times New Roman": "times new roman, times, serif",
    "Verdana":         "Verdana, Arial, Helvetica, sans-serif",
    "impact":          "impact",
    "WingDings":       "WingDings"
};
config.fontsizes = {
    "1 (8 pt)":  "1",
    "2 (10 pt)": "2",
    "3 (12 pt)": "3",
    "4 (14 pt)": "4",
    "5 (18 pt)": "5",
    "6 (24 pt)": "6",
    "7 (36 pt)": "7"
  };

//config.stylesheet = "http://www.domain.com/sample.css";
  
config.fontstyles = [   // make sure classNames are defined in the page the content is being display as well in or they won't work!
  { name: "headline",     className: "headline",  classStyle: "font-family: arial black, arial; font-size: 28px; letter-spacing: -2px;" },
  { name: "arial red",    className: "headline2", classStyle: "font-family: arial black, arial; font-size: 12px; letter-spacing: -2px; color:red" },
  { name: "verdana blue", className: "headline4", classStyle: "font-family: verdana; font-size: 18px; letter-spacing: -2px; color:blue" }

// leave classStyle blank if it's defined in config.stylesheet (above), like this:
//  { name: "verdana blue", className: "headline4", classStyle: "" }  
];

editor_generate('yourFieldNameHere2',config);
</script>
  <br>
  <br>
  <br>
  <br>
</form>
</body></html>