160 lines
6.8 KiB
HTML
160 lines
6.8 KiB
HTML
|
<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 <textarea> 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>
|
||
|
|
<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>
|