<html>
<head>
<title>Example of HTMLArea 3.0</title>
<script type="text/javascript" src="htmlarea.js"></script>
<script type="text/javascript" src="htmlarea-lang-en.js"></script>
<script type="text/javascript" src="dialog.js"></script>
<style type="text/css">
@import url(htmlarea.css);
html, body {
font-family: Verdana,sans-serif;
background-color: #fea;
color: #000;
}
a:link, a:visited { color: #00f; }
a:hover { color: #048; }
a:active { color: #f00; }
textarea { background-color: #fff; border: 1px solid 00f; }
</style>
<script type="text/javascript">
var editor = null;
function initEditor() {
editor = new HTMLArea("ta");
editor.generate();
}
function insertHTML() {
var html = prompt("Enter some HTML code here");
if (html) {
editor.insertHTML(html);
}
}
function highlight() {
editor.surroundHTML('<span style="background:yellow">', '</span>');
}
</script>
</head>
<!-- use <body onload="HTMLArea.replaceAll()" if you don't care about
customizing the editor. It's the easiest way! :) -->
<body onload="initEditor()">
<h1>HTMLArea 3.0</h1>
<p>A replacement for <code>TEXTAREA</code> elements. © <a
href="http://interactivetools.com">InteractiveTools.com</a>, 2003.</p>
<form action="test.cgi" method="post">
<textarea id="ta" name="ta" style="width:100%" rows="20">
<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>
<p>
<input type="submit" name="ok" value=" submit " />
<input type="button" name="ins" value=" insert html " onclick="return insertHTML();" />
<input type="button" name="hil" value=" highlight text " onclick="return highlight();" />
</form>
</body>
</html>