📄 readme.html
字号:
<html><head><title>htmlArea Help</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;
}
--></style>
<script><!-- // load htmlArea files
_editor_url = "";
document.write('<scr'+'ipt src="' +_editor_url+ 'editor.js" language="JavaScript1.2"></scr'+'ipt>');
//--></script>
</head>
<body>
<a name="top"></a>
<div align=center>
<span class="headline">htmlArea v2.03</span><br>
<span class="headline2">Turn any <textarea> into a WYSIWYG editor, a free script<br><a href="http://www.interactivetools.com/">from your friends at interactivetools.com</a></span>
<hr>
</div>
<!-- TOC -->
<p class="subhead">Introduction</p>
<a href="#intro1">What is htmlArea?</a><br>
<a href="#intro2">Is it really free? What's the catch?</a><br>
<a href="#intro3">What are the browser requirements?</a><br>
<a href="#intro4">Can I see an example of what it looks like?</a><br>
<a href="#intro5">Where can I find out more info, download the latest version, and talk to other htmlArea users?</a><br>
<p class="subhead">Installation / Setup</p>
<a href="#setup1">How do I add htmlArea to my web page?</a><br>
<a href="#setup2">I want to change the editor settings, how do I do that?</a><br>
<a href="#setup3">How can I change what controls are displayed on the toolbar?</a><br>
<a href="#setup4">How can I change what fonts are in the font list?</a><br>
<a href="#setup5">How can I change what sizes are in the font size?</a><br>
<a href="#setup6">How can I change what styles are in the font style (CSS) list?</a><br>
<a href="#setup7">How can I specify an external stylesheet for my styles?</a><br>
<p class="subhead">Frequently Asked Questions</p>
<a href="#faq-goals">What the project goals for htmlArea?</a><br>
<a href="#faq1">This editor is pretty neat, so how does it actually work?</a><br>
<a href="#faq2">You don't happen to have one of these for (Netscape, Mozilla, Opera, Mac IE, etc) do you?</a><br>
<a href="#faq3">Why doesn't htmlArea output XHTML instead of regular HTML? Can you make it do that?</a><br>
<a href="#faq4">I'd like to be able to upload images from my hard drive, can you add that feature?</a><br>
<a href="#faq6">I'd like to <insert idea here>, can you add that feature?</a><br>
<a href="#faq7">Can I change the toolbar/button colors?</a><br>
<a href="#faq8" style="color: red"><b>I love htmlArea,</b> is there anything I can do to help the project?</a><br>
<a href="#faq_slow_images">Why do the toolbar buttons take so long to load when I have multiple htmlArea editors on the same page?</a><br>
<p class="subhead">Known Bugs & Issues</p>
<a href="#bugs1">Undo/Redo doesn't work</a><br>
<a href="#bugs2">Relative paths are converted to absolute paths</a><br>
<a href="#bugs3">HTML header info (eg: <head>, <body>, etc) doesn't get preserved</a><br>
<a href="#bugs4">Some tags (eg: noframes, noscript, etc) doesn't get preserved</a><br>
<a href="#bugs5">htmlArea doesn't work when multiple textareas that have the same name</a><br>
<a href="#bugs_ssl">Why do I get "non secure items" warnings when using htmlarea on a secure (SSL) https:// page?</a><br>
<p class="subhead">Change Log</p>
<a href="#changelog">View Change Log</a><br>
<br><br>
<!-- INTRODUCTION -->
<hr><p><span class="subhead">Introduction</span> <a href="#top" class="backtotop">back to top</a></p>
<dl>
<a name="intro1"></a>
<p><dt><b>What is htmlArea?</b></dt>
<dd>htmlArea is a free WYSIWYG (what you see is what you get) editor replacement for <textarea> fields. By adding a few
simple lines of JavaScript to your web page you can replace a regular textarea with a rich text
editor that let your users do the following:
<p><ul>
<li>Format text to be bold, italicized, or underlined.</li>
<li>Change the face, size, style and colour.</li>
<li>Left, centre, or right-justify paragraphs. </li>
<li>Make bulleted or numbered lists. </li>
<li>Indent or un-indent paragraphs. </li>
<li>Insert a horizontal line. </li>
<li>Insert hyperlinks and images. </li>
<li>View the raw HTML source of what they're editing. </li>
<li>and much more... </li>
</ul>
<p>Some of the interesting features of htmlArea that set's it apart from other web based WYSIWYG editors are as follows:
<p><ul>
<li>It's lightweight, fast loading and can transform a regular textarea into a rich-text editor with a single line of JavaScript.</li>
<li>It's 100% backwards compatible with older or non-supported browsers (they get the original textarea field).</li>
<li>It's free and can be incorporated into any free or commercial program.</li>
<li>It works with any programming language (ASP, PHP, Perl, Java, etc).</li>
<li>It's written in simple JavaScript and can be easily viewed, modified or extended.</li>
<li>It remembers entered content when a user navigates away and then hits "back" in their browser.</li>
<li>Since it replaces existing textareas it doesn't require a lot of code to add it to your pages (just one line).</li>
<li>Did we mention it was free? : )</li>
</ul>
</dd></p>
<a name="intro2"></a>
<p><dt><b>Is it really free? What's the catch?</b></dt>
<dd>Yes! It's really free. You can use it, modify it, distribute it with your software,
or do just about anything you like with it.
</dd></p>
<a name="intro3"></a>
<p><dt><b>What are the browser requirements?</b></dt>
<dd>htmlArea requires Internet Explorer 5.5 or better on Windows to run. This is because it
makes use of some advanced features of IE5.5 that aren't available in other browsers yet.
It <i>is</i> backwards compatible with other browsers, though. They will get a regular textarea
field instead of a WYSIWYG editor.</dd></p>
<a name="intro4"></a>
<p><dt><b>Can I see an example of what it looks like?</b></dt>
<dd>Sure, make sure you're using IE5.5 or better on windows and see below.
<p>Here is a regular <textarea> field.<br>
<textarea name="textbox1" style="height: 110px; width: 700px;">
Here is some sample text in a regular <textarea>.
There's not much you can do besides, well, enter plain text...
</textarea>
<p>And here is a <textarea> transformed with htmlArea (with a single line of JavaScript code).</p>
<textarea name="textbox2" style="height: 110px; width: 700px;">
Here is some sample text in textarea thats been transformed with <font color="#0000CC"><b>htmlArea</b></font>.<br>
You can make things <b>bold</b>, <i>italic</i>, <u>underline</u>. You can change the
<font size=3>size</font> and <b><font color="#0000CC">c</font><font color="#00CC00">o</font><font color="#00CCCC">l</font><font color="#CC0000">o</font><font color="#CC00CC">r</font><font color="#CCCC00">s</font><font color="#CCCCCC">!</font></b>
And lots more...
<P align=center><FONT size=4 color=#ff0000><b><U>Try htmlArea today!</U></b></FONT><BR>
</textarea>
<script language="JavaScript1.2" defer>
editor_generate('textbox2');
</script>
</dd></p>
<a name="intro5"></a>
<p><dt><b>Where can I find out more info, download the latest version, and talk to other htmlArea users?</b></dt>
<dd>You can find out more about htmlArea and download the latest version on the
<a href="http://www.interactivetools.com/products/htmlarea/">htmlArea homepage</a>
and you can talk to other htmlArea users and post any comments or suggestions you have in the
<a href="http://www.interactivetools.com/forum/forum.cgi?forum=18">htmlArea forum</a>.
</dl>
<!-- INSTALLATION / SETUP -->
<hr><p><span class="subhead">Installation / Setup</span> <a href="#top" class="backtotop">back to top</a></p>
<dl>
<a name="setup1"></a>
<p><dt><b>How do I add htmlArea to my web page?</b></dt>
<dd>It's easy, first you need to upload the htmlArea files to your website. Just follow these steps:
<p><ol>
<li>Download the latest version from the <a href="http://www.interactivetools.com/products/htmlarea/">htmlArea homepage</a>.</li>
<li>Unzip the files onto your local computer (making sure to maintain the directory structure contained in the zip).</li>
<li>Create a new folder on your website called /htmlarea/ (make sure it's NOT inside the cgi-bin).</li>
<li>Transfer all the htmlArea files from your local computer into the /htmlarea/ folder on your website.</li>
<li>Open the example page /htmlarea/example.html with your browser to make sure everything works.</li>
</ol></p>
Once htmlArea is on your website all you need to do is add some JavaScript to any pages that you want to
add WYSIWYG editors to. Here's how to do that.
<p><ol>
<li>Open the page you want to add a WYSIWYG editor to. Add the following to the top of
the page in the <head></head> of the HTML document.
<div class="code">
<script language="Javascript1.2"><!-- // load htmlarea<br>
_editor_url = ""; // URL to htmlarea files<br>
var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);<br>
if (navigator.userAgent.indexOf('Mac') >= 0) { win_ie_ver = 0; }<br>
if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; }<br>
if (navigator.userAgent.indexOf('Opera') >= 0) { win_ie_ver = 0; }<br>
if (win_ie_ver >= 5.5) {<br>
document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');<br>
document.write(' language="Javascript1.2"></scr' + 'ipt>'); <br>
} else { document.write('<scr'+'ipt>function editor_generate() { return false; }</scr'+'ipt>'); }<br>
// --></script>
</div>
If you've installed htmlArea anywhere other than /htmlarea/ then <b>be sure to change _editor_url</b> to point to
your htmlarea directory (ending with a forward slash "/").</li>
<p><li>For each <textarea> that you want to change, add the following code to the page.
<div class="code">
<script language="JavaScript1.2" defer><br>
editor_generate('<i>fieldname</i>');<br>
</script><br>
</div>
Be sure to change "<b><i>fieldname</i></b>" to be the name (not id) of the textarea you want to change.</li>
<p><li>And you're done, open your page in your browser and see if it worked. If you run into
any problems, keep trying and feel free to visit the
<a href="http://www.interactivetools.com/forum/forum.cgi?forum=18">htmlArea forum</a>.</li>
</ol></p>
<a name="setup2"></a>
<p><dt><b>I want to change the editor settings, how do I do that?</b></dt>
<dd>While it's true that all you need is one line of JavaScript to create an htmlArea WYSIWYG editor
you can also specify more config settings in the code to control how the editor works and looks. Here's an
example of some of the available settings:
<div class="code">
<script language="JavaScript1.2" defer><br>
var config = new Object(); // create new config object<br><br>
config.width = "90%";<br>
config.height = "200px";<br>
config.bodyStyle = 'background-color: white; font-family: "Verdana"; font-size: x-small;';<br>
config.debug = 0;<br><br>
// Add additional editor config settings here...<br><br>
editor_generate('<i>fieldname</i>',config);<br>
</script><br>
</div>
See below for even more configuration options that can be added. All of these settings will use
default values in editor.js if you don't specify them yourself.
<p><table border=1 cellspacing=0 cellpadding=2 width=600>
<tr><td><b>Width</b></td><td>specifies the width of the editor (in pixels or as a percentage).</td></tr>
<tr><td><b>Height</b></td><td>specifies the height of the editor (in pixels or as a percentage).</td></tr>
<tr><td><b>bodyStyle</b></td><td>specifies CSS style of the editor window including color, default font face, and size. Note, the default font information isn't saved, it just controls how text is displayed if no other font formatting has been applied.</td></tr>
<tr><td><b>debug</b></td><td>if set to 1, displays a debug field with the actual contents of the editor (in raw html) which is updated as your type.</td></tr>
</table>
</dd></p>
<a name="setup3"></a>
<p><dt><b>How can I change what controls are displayed on the toolbar?</b></dt>
<dd>You can add a config.toolbar config setting to control exactly what's shown on the toolbar.
Here's an example.
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -