version 1.1, 2004/02/18 08:07:15
|
version 1.2, 2004/06/01 23:46:10
|
Line 1
|
Line 1
|
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN"> |
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN"> |
<html> <head> |
<html> <head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<title>HTMLArea-3.0 Reference</title> |
<title>HTMLArea-3.0 Reference</title> |
|
|
<style type="text/css"> |
<style type="text/css"> |
Line 67 padding: 5px; text-align: center; }
|
Line 68 padding: 5px; text-align: center; }
|
|
|
</style> |
</style> |
|
|
|
<script type="text/javascript"> |
|
_editor_url = './'; |
|
_editor_lang = 'en'; |
|
</script> |
<script type="text/javascript" src="htmlarea.js"></script> |
<script type="text/javascript" src="htmlarea.js"></script> |
<script type="text/javascript" src="dialog.js"></script> |
<script type="text/javascript" src="dialog.js"></script> |
<script tyle="text/javascript" src="lang/en.js"></script> |
<script tyle="text/javascript" src="lang/en.js"></script> |
Line 116 other web based WYSIWYG editors are as f
|
Line 121 other web based WYSIWYG editors are as f
|
<li>It's lightweight, fast loading and can transform a regular textarea |
<li>It's lightweight, fast loading and can transform a regular textarea |
into a rich-text editor with a single line of JavaScript.</li> |
into a rich-text editor with a single line of JavaScript.</li> |
<li>Generates clean, valid HTML.</li> |
<li>Generates clean, valid HTML.</li> |
<li>It's 100% backwards compatible with older or non-supported browsers |
<li>It degrades gracefully to older or non-supported browsers |
(they get the original textarea field).</li> |
(they get the original textarea field).</li> |
<li>It's free and can be incorporated into any free or commercial |
<li>It's free and can be incorporated into any free or commercial |
program.</li> |
program.</li> |
Line 145 href="http://mozilla.org">Mozilla</a> &g
|
Line 150 href="http://mozilla.org">Mozilla</a> &g
|
Any browser based on <a href="http://mozilla.org/newlayout">Gecko</a> will |
Any browser based on <a href="http://mozilla.org/newlayout">Gecko</a> will |
also work, provided that Gecko version is at least the one included in |
also work, provided that Gecko version is at least the one included in |
Mozilla-1.3-Beta (for example, <a |
Mozilla-1.3-Beta (for example, <a |
href="http://galeon.sf.net">Galeon-1.2.8</a>). However, it is backwards |
href="http://galeon.sf.net">Galeon-1.2.8</a>). However, it degrades |
compatible with other browsers. They will get a regular textarea field |
gracefully to other browsers. They will get a regular textarea field |
instead of a WYSIWYG editor.</p> |
instead of a WYSIWYG editor.</p> |
|
|
<h3>Can I see an example of what it looks like?</h3> |
<h3>Can I see an example of what it looks like?</h3> |
Line 171 today!</u></b></font><br /></p>
|
Line 176 today!</u></b></font><br /></p>
|
other HTMLArea users?</h3> |
other HTMLArea users?</h3> |
|
|
<p>You can find out more about HTMLArea and download the latest version on |
<p>You can find out more about HTMLArea and download the latest version on |
the <a href="http://www.interactivetools.com/products/htmlarea/">HTMLArea |
the <a href="http://dynarch.com/htmlarea/">HTMLArea |
homepage</a> and you can talk to other HTMLArea users and post any comments |
homepage</a> and you can talk to other HTMLArea users and post any comments |
or suggestions you have in the <a |
or suggestions you have in the <a |
href="http://www.interactivetools.com/iforum/Open_Source_C3/htmlArea_v3.0_-_Alpha_Release_F14/" |
href="http://www.interactivetools.com/iforum/Open_Source_C3/htmlArea_v3.0_-_Alpha_Release_F14/" |
Line 192 href="http://www.interactivetools.com/if
|
Line 197 href="http://www.interactivetools.com/if
|
<li>CTRL-R -- justify right</li> |
<li>CTRL-R -- justify right</li> |
<li>CTRL-J -- justify full</li> |
<li>CTRL-J -- justify full</li> |
<li>CTRL-1 .. CTRL-6 -- headings (<h1> .. <h6>)</li> |
<li>CTRL-1 .. CTRL-6 -- headings (<h1> .. <h6>)</li> |
|
<li>CTRL-0 (zero) -- clean content pasted from Word</li> |
</ul> |
</ul> |
|
|
<h2>Installation</h2> |
<h2>Installation</h2> |
Line 211 Just follow these steps.</p>
|
Line 217 Just follow these steps.</p>
|
NOT inside the cgi-bin).</li> |
NOT inside the cgi-bin).</li> |
<li>Transfer all the HTMLArea files from your local computer into the |
<li>Transfer all the HTMLArea files from your local computer into the |
/htmlarea/ folder on your website.</li> |
/htmlarea/ folder on your website.</li> |
<li>Open the example page /htmlarea/example.html with your browser to make |
<li>Open the example page /htmlarea/examples/core.html with your browser to make |
sure everything works.</li> |
sure everything works.</li> |
</ol> |
</ol> |
|
|
Line 221 to do that.</p>
|
Line 227 to do that.</p>
|
|
|
<ol> |
<ol> |
|
|
<li>Include the "htmlarea.js" script: |
<li>Define some global variables. "_editor_url" has to be the absolute |
<pre class="code" |
URL where HTMLArea resides within your |
><span class="function-name"><</span><span class="html-tag">script</span> <span class="variable-name">type=</span><span class="string">"text/javascript"</span> <span class="variable-name">src=</span><span class="string">"/htmlarea/htmlarea.js"</span><span class="function-name">></span><span class="paren-face-match"><</span><span class="html-tag">/script</span><span class="paren-face-match">></span></pre> |
website; as we discussed, this would be “/htmlarea/”. "_editor_lang" must |
</li> |
be the language code in which you want HTMLArea to appear. This defaults |
|
to "en" (English); for a list of supported languages, please look into |
<li>If you are using popup dialogs, i.e. for insert table, insert image, |
the "lang" subdirectory in the distribution. |
select color, then you need to include the "dialog.js" file. This is |
|
recommended anyway. |
|
<pre class="code" |
<pre class="code" |
><span class="function-name"><</span><span class="html-tag">script</span> <span class="variable-name">type=</span><span class="string">"text/javascript"</span> <span class="variable-name">src=</span><span class="string">"/htmlarea/dialog.js"</span><span class="paren-face-match">></span><span class="function-name"><</span><span class="html-tag">/script</span><span class="function-name">></span></pre> |
><span class="function-name"><</span><span class="html-tag">script</span> <span class="variable-name">type=</span><span class="string">"text/javascript"</span><span class="function-name">></span> |
</li> |
_editor_url = <span class="string">"/htmlarea/"</span>; |
|
_editor_lang = <span class="string">"en"</span>; |
|
<span class="function-name"><</span><span class="html-tag">/script</span><span class="function-name">></span></pre> |
|
|
<li>Include the corresponding language definition file. <span |
<li>Include the "htmlarea.js" script: |
class="note">Note</span>: |
|
internationalization is available only since version 3.0. Check the files |
|
containing "lang" in the distribution ZIP. If your preferred language is |
|
not there yet and you decide to write it, please consider sending it to |
|
us so that it gets included in the next release. |
|
<pre class="code" |
|
><span class="function-name"><</span><span class="html-tag">script</span> <span class="variable-name">type=</span><span class="string">"text/javascript"</span> <span class="variable-name">src=</span><span class="string">"/htmlarea/lang/en.js"</span><span class="function-name">></span><span class="paren-face-match"><</span><span class="html-tag">/script</span><span class="paren-face-match">></span></pre> |
|
|
|
<li>Include the stylesheet (be sure to put this inside the HEAD tag): |
|
<pre class="code" |
<pre class="code" |
><span class="function-name"><</span><span class="html-tag">style</span> <span class="variable-name">type=</span><span class="string">"text/css"</span><span class="function-name">></span>@import url<span class="function-name">(</span>/htmlarea/htmlarea.css<span class="function-name">)</span><span class="paren-face-match"><</span><span class="html-tag">/style</span><span class="paren-face-match">></span></pre> |
><span class="function-name"><</span><span class="html-tag">script</span> <span class="variable-name">type=</span><span class="string">"text/javascript"</span> <span class="variable-name">src=</span><span class="string">"/htmlarea/htmlarea.js"</span><span class="function-name">></span><span class="paren-face-match"><</span><span class="html-tag">/script</span><span class="paren-face-match">></span></pre> |
</li> |
</li> |
|
|
<li><p>If you want to change all your <textarea>-s into |
<li><p>If you want to change all your <textarea>-s into |
Line 264 to do that.</p>
|
Line 261 to do that.</p>
|
|
|
</ol> |
</ol> |
|
|
|
<p>This section applies to HTMLArea-3.0 release candidate 1 or later; prior |
|
to this version, one needed to include more files; however, now HTMLArea is |
|
able to include other files too (such as stylesheet, language definition |
|
file, etc.) so you only need to define the editor path and load |
|
"htmlarea.js". Nice, eh? ;-)</p> |
|
|
<h3>I want to change the editor settings, how do I do that?</h3> |
<h3>I want to change the editor settings, how do I do that?</h3> |
|
|
<p>While it's true that all you need is one line of JavaScript to create an |
<p>While it's true that all you need is one line of JavaScript to create an |
Line 289 config.height = '<span class="string">20
|
Line 292 config.height = '<span class="string">20
|
|
|
<p><span class="warning">Important:</span> It's recommended that you add |
<p><span class="warning">Important:</span> It's recommended that you add |
custom features and configuration to a separate file. This will ensure you |
custom features and configuration to a separate file. This will ensure you |
that when we release a new official version of HTMLArea you'll have no |
that when we release a new official version of HTMLArea you'll have less |
trouble upgrading it.</p> |
trouble upgrading it.</p> |
|
|
<h3>How do I customize the toolbar?</h3> |
<h3>How do I customize the toolbar?</h3> |
Line 345 These three have the following meaning,
|
Line 348 These three have the following meaning,
|
|
|
<p><span class="warning">Important:</span> It's recommended that you add |
<p><span class="warning">Important:</span> It's recommended that you add |
custom features and configuration to a separate file. This will ensure you |
custom features and configuration to a separate file. This will ensure you |
that when we release a new official version of HTMLArea you'll have no |
that when we release a new official version of HTMLArea you'll have less |
trouble upgrading it.</p> |
trouble upgrading it.</p> |
|
|
<h3>How do I create custom buttons?</h3> |
<h3>How do I create custom buttons?</h3> |
Line 454 button.</p>
|
Line 457 button.</p>
|
|
|
<p><span class="warning">Important:</span> It's recommended that you add |
<p><span class="warning">Important:</span> It's recommended that you add |
custom features and configuration to a separate file. This will ensure you |
custom features and configuration to a separate file. This will ensure you |
that when we release a new official version of HTMLArea you'll have no |
that when we release a new official version of HTMLArea you'll have less |
trouble upgrading it.</p> |
trouble upgrading it.</p> |
|
|
<h4 id="btnex">A complete example</h4> |
<h4 id="btnex">A complete example</h4> |
Line 507 config.registerButton("<span class=
|
Line 510 config.registerButton("<span class=
|
|
|
<hr /> |
<hr /> |
<address>© <a href="http://interactivetools.com" title="Visit our website" |
<address>© <a href="http://interactivetools.com" title="Visit our website" |
>InteractiveTools.com</a> 2002, 2003. |
>InteractiveTools.com</a> 2002-2004. |
<br /> |
<br /> |
|
© <a href="http://dynarch.com">dynarch.com</a> 2003-2004<br /> |
HTMLArea v3.0 developed by <a |
HTMLArea v3.0 developed by <a |
href="http://students.infoiasi.ro/~mishoo">Mihai Bazon</a> for |
href="http://dynarch.com/mishoo/">Mihai Bazon</a>. |
InteractiveTools.com. |
|
<br /> |
<br /> |
Documentation written by Mihai Bazon. |
Documentation written by Mihai Bazon. |
</address> |
</address> |
<!-- hhmts start --> |
<!-- hhmts start --> Last modified: Wed Jan 28 12:18:23 EET 2004 <!-- hhmts end --> |
Last modified on Sun Aug 3 16:11:23 2003 |
|
<!-- hhmts end --> |
|
<!-- doc-lang: English --> |
<!-- doc-lang: English --> |
</body> </html> |
</body> </html> |