2017-08-02 16:06:56 -04:00
< 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" > < ! - - / / l o a d h t m l a r e a
_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 >
2010-12-02 23:34:41 +00:00
< / body > < / html >
