source: trunk/phpgwapi/js/htmlarea/reference.html @ 2

Revision 2, 25.7 KB checked in by niltonneto, 17 years ago (diff)

Removida todas as tags usadas pelo CVS ($Id, $Source).
Primeira versão no CVS externo.
  • Property svn:eol-style set to native
  • Property svn:executable set to *
Line 
1<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">
2<html> <head>
3<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4<title>HTMLArea-3.0 Reference</title>
5
6<style type="text/css">
7  @import url(htmlarea.css);
8  body { font: 14px verdana,sans-serif; background: #fff; color: #000; }
9  h1, h2 { font-family:tahoma,sans-serif; }
10  h1 { border-bottom: 2px solid #000; }
11  h2 { border-bottom: 1px solid #aaa; }
12  h3, h4 { margin-bottom: 0px; font-family: Georgia,serif; font-style: italic; }
13  h4 { font-size: 90%; margin-left: 1em; }
14  acronym { border-bottom: 1px dotted #063; color: #063; }
15  p { margin-left: 2em; margin-top: 0.3em; }
16  li p { margin-left: 0px; }
17  .abstract { padding: 5px; margin: 0px 10em; font-size: 90%; border: 1px dashed #aaa; background: #eee;}
18  li { margin-left: 2em; }
19  em { color: #042; }
20  a { color: #00f; }
21  a:hover { color: #f00; }
22  a:active { color: #f80; }
23  span.browser { font-weight: bold; color: #864; }
24  .fixme { font-size: 20px; font-weight: bold; color: red; background: #fab;
25padding: 5px; text-align: center; }
26  .code {
27   background: #e4efff; padding: 5px; border: 1px dashed #abc; margin-left: 2em; margin-right: 2em;
28   font-family: fixed,"lucidux mono","andale mono","courier new",monospace;
29  }
30  .note, .warning { font-weight: bold; color: #0a0; font-variant: small-caps; }
31  .warning { color: #a00; }
32
33.string {
34  color: #06c;
35} /* font-lock-string-face */
36.comment {
37  color: #840;
38} /* font-lock-comment-face */
39.variable-name {
40  color: #000;
41} /* font-lock-variable-name-face */
42.type {
43  color: #008;
44  font-weight: bold;
45} /* font-lock-type-face */
46.reference {
47  color: #048;
48} /* font-lock-reference-face */
49.preprocessor {
50  color: #808;
51} /* font-lock-preprocessor-face */
52.keyword {
53  color: #00f;
54  font-weight: bold;
55} /* font-lock-keyword-face */
56.function-name {
57  color: #044;
58} /* font-lock-function-name-face */
59.html-tag {
60  font-weight: bold;
61} /* html-tag-face */
62.html-helper-italic {
63  font-style: italic;
64} /* html-helper-italic-face */
65.html-helper-bold {
66  font-weight: bold;
67} /* html-helper-bold-face */
68
69</style>
70
71<script type="text/javascript">
72  _editor_url = './';
73  _editor_lang = 'en';
74</script>
75<script type="text/javascript" src="htmlarea.js"></script>
76<script type="text/javascript" src="dialog.js"></script>
77<script tyle="text/javascript" src="lang/en.js"></script>
78
79</head>
80
81<body onload="HTMLArea.replace('TA')">
82
83
84<h1>HTMLArea-3.0 Documentation</h1>
85
86<div class="abstract" style="color: red; font-weight: bold">
87
88      This documentation contains valid information, but is outdated in the
89      terms that it does not covers all the features of HTMLArea.  A new
90      documentation project will be started, based on LaTeX.
91
92</div>
93
94
95<h2>Introduction</h2>
96
97<h3>What is HTMLArea?</h3>
98
99<p>HTMLArea is a free <acronym title="What You See Is What You Get"
100>WYSIWYG</acronym> editor replacement for <code>&lt;textarea&gt;</code>
101fields.  By adding a few simple lines of JavaScript code to your web page
102you can replace a regular textarea with a rich text editor that lets your
103users do the following:</p>
104
105<ul>
106  <li>Format text to be bold, italicized, or underlined.</li>
107  <li>Change the face, size, style and color.</li>
108  <li>Left, center, or right-justify paragraphs.</li>
109  <li>Make bulleted or numbered lists.</li>
110  <li>Indent or un-indent paragraphs.</li>
111  <li>Insert a horizontal line.</li>
112  <li>Insert hyperlinks and images.</li>
113  <li>View the raw HTML source of what they're editing.</li>
114  <li>and much more...</li>
115</ul>
116
117<p>Some of the interesting features of HTMLArea that set's it apart from
118other web based WYSIWYG editors are as follows:</p>
119
120<ul>
121  <li>It's lightweight, fast loading and can transform a regular textarea
122  into a rich-text editor with a single line of JavaScript.</li>
123  <li>Generates clean, valid HTML.</li>
124  <li>It degrades gracefully to older or non-supported browsers
125  (they get the original textarea field).</li>
126  <li>It's free and can be incorporated into any free or commercial
127  program.</li>
128  <li>It works with any server-side languages (ASP, PHP, Perl, Java,
129  etc).</li>
130  <li>It's written in JavaScript and can be easily viewed, modified or
131  extended.</li>
132  <li>It remembers entered content when a user navigates away and then hits
133  "back" in their browser.</li>
134  <li>Since it replaces existing textareas it doesn't require a lot of code
135  to add it to your pages (just one line).</li>
136  <li>Did we mention it was free? ;-)</li>
137</ul>
138
139<h3>Is it really free?  What's the catch?</h3>
140
141<p>Yes! It's really free. You can use it, modify it, distribute it with your
142software, or do just about anything you like with it.</p>
143
144<h3>What are the browser requirements?</h3>
145
146<p>HTMLArea requires <span class="browser"><a
147href="http://www.microsoft.com/ie">Internet Explorer</a> &gt;= 5.5</span>
148(Windows only), or <span class="browser"><a
149href="http://mozilla.org">Mozilla</a> &gt;= 1.3-Beta</span> on any platform.
150Any browser based on <a href="http://mozilla.org/newlayout">Gecko</a> will
151also work, provided that Gecko version is at least the one included in
152Mozilla-1.3-Beta (for example, <a
153href="http://galeon.sf.net">Galeon-1.2.8</a>).  However, it degrades
154gracefully to other browsers. They will get a regular textarea field
155instead of a WYSIWYG editor.</p>
156
157<h3>Can I see an example of what it looks like?</h3>
158
159<p>Just make sure you're using one of the browsers mentioned above and see
160below.</p>
161
162<form onsubmit="return false;">
163<textarea id="TA" style="width: 100%; height: 15em;">
164<p>Here is some sample text in textarea that's been transformed with <font
165color="#0000CC"><b>HTMLArea</b></font>.<br />
166You can make things <b>bold</b>, <i>italic</i>, <u>underline</u>.  You can change the
167<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>
168And lots more...</p>
169
170<p align="center"><font size="4" color="#ff0000"><b><u>Try HTMLArea
171today!</u></b></font><br /></p>
172</textarea>
173</form>
174
175<h3>Where can I find out more info, download the latest version and talk to
176other HTMLArea users?</h3>
177
178<p>You can find out more about HTMLArea and download the latest version on
179the <a href="http://dynarch.com/htmlarea/">HTMLArea
180homepage</a> and you can talk to other HTMLArea users and post any comments
181or suggestions you have in the <a
182href="http://www.interactivetools.com/iforum/Open_Source_C3/htmlArea_v3.0_-_Alpha_Release_F14/"
183>HTMLArea forum</a>.</p>
184
185<h2>Keyboard shortcuts</h2>
186
187<p>The editor provides the following key combinations:</p>
188
189<ul>
190  <li>CTRL-A -- select all</li>
191  <li>CTRL-B -- bold</li>
192  <li>CTRL-I -- italic</li>
193  <li>CTRL-U -- underline</li>
194  <li>CTRL-S -- strikethrough</li>
195  <li>CTRL-L -- justify left</li>
196  <li>CTRL-E -- justify center</li>
197  <li>CTRL-R -- justify right</li>
198  <li>CTRL-J -- justify full</li>
199  <li>CTRL-1 .. CTRL-6 -- headings (&lt;h1&gt; .. &lt;h6&gt;)</li>
200  <li>CTRL-0 (zero) -- clean content pasted from Word</li>
201</ul>
202
203<h2>Installation</h2>
204
205<h3>How do I add HTMLArea to my web page?</h3>
206
207<p>It's easy.  First you need to upload HTMLArea files to your website.
208Just follow these steps.</p>
209
210<ol>
211  <li>Download the latest version from the <a
212  href="http://www.interactivetools.com/products/htmlarea/">htmlArea
213  homepage</a>.</li>
214  <li>Unzip the files onto your local computer (making sure to maintain the
215  directory structure contained in the zip).</li>
216  <li>Create a new folder on your website called /htmlarea/ (make sure it's
217  NOT inside the cgi-bin).</li>
218  <li>Transfer all the HTMLArea files from your local computer into the
219  /htmlarea/ folder on your website.</li>
220  <li>Open the example page /htmlarea/examples/core.html with your browser to make
221  sure everything works.</li>
222</ol>
223
224<p>Once htmlArea is on your website all you need to do is add some
225JavaScript to any pages that you want to add WYSIWYG editors to.  Here's how
226to do that.</p>
227
228<ol>
229
230  <li>Define some global variables.  "_editor_url" has to be the absolute
231  URL where HTMLArea resides within your
232  website; as we discussed, this would be “/htmlarea/”.  "_editor_lang" must
233  be the language code in which you want HTMLArea to appear.  This defaults
234  to "en" (English); for a list of supported languages, please look into
235  the "lang" subdirectory in the distribution.
236  <pre class="code"
237  ><span class="function-name">&lt;</span><span class="html-tag">script</span> <span class="variable-name">type=</span><span class="string">&quot;text/javascript&quot;</span><span class="function-name">&gt;</span>
238   _editor_url = <span class="string">&quot;/htmlarea/&quot;</span>;
239   _editor_lang = <span class="string">&quot;en&quot;</span>;
240<span class="function-name">&lt;</span><span class="html-tag">/script</span><span class="function-name">&gt;</span></pre>
241
242  <li>Include the "htmlarea.js" script:
243  <pre class="code"
244  ><span class="function-name">&lt;</span><span class="html-tag">script</span> <span class="variable-name">type=</span><span class="string">&quot;text/javascript&quot;</span> <span class="variable-name">src=</span><span class="string">&quot;/htmlarea/htmlarea.js&quot;</span><span class="function-name">&gt;</span><span class="paren-face-match">&lt;</span><span class="html-tag">/script</span><span class="paren-face-match">&gt;</span></pre>
245  </li>
246
247  <li><p>If you want to change all your &lt;textarea&gt;-s into
248  HTMLArea-s then you can use the simplest way to create HTMLArea:</p>
249  <pre class="code"
250  ><span class="function-name">&lt;</span><span class="html-tag">script</span> <span class="variable-name">type=</span><span class="string">&quot;text/javascript&quot;</span> <span class="variable-name">defer=</span><span class="string">&quot;1&quot;</span><span class="function-name">&gt;</span>
251    HTMLArea.replaceAll<span class="function-name">()</span>;
252<span class="paren-face-match">&lt;</span><span class="html-tag">/script</span><span class="paren-face-match">&gt;</span></pre>
253  <p><span class="note">Note:</span> you can also add the
254  <code>HTMLArea.replaceAll()</code> code to the <code>onload</code>
255  event handler for the <code>body</code> element, if you find it more appropriate.</p>
256
257  <p>A different approach, if you have more than one textarea and only want
258  to change one of them, is to use <code>HTMLArea.replace("id")</code> --
259  pass the <code>id</code> of your textarea.  Do not use the
260  <code>name</code> attribute anymore, it's not a standard solution!</p>
261
262</ol>
263
264<p>This section applies to HTMLArea-3.0 release candidate 1 or later; prior
265to this version, one needed to include more files; however, now HTMLArea is
266able to include other files too (such as stylesheet, language definition
267file, etc.) so you only need to define the editor path and load
268"htmlarea.js".  Nice, eh? ;-)</p>
269
270<h3>I want to change the editor settings, how do I do that?</h3>
271
272<p>While it's true that all you need is one line of JavaScript to create an
273htmlArea WYSIWYG editor, you can also specify more config settings in the
274code to control how the editor works and looks.  Here's an example of some of
275the available settings:</p>
276
277<pre class="code"
278><span class="keyword">var</span> <span class="variable-name">config</span> = <span class="keyword">new</span> HTMLArea.Config(); <span class="comment">// create a new configuration object
279</span>                                    <span class="comment">// having all the default values
280</span>config.width = '<span class="string">90%</span>';
281config.height = '<span class="string">200px</span>';
282
283<span class="comment">// the following sets a style for the page body (black text on yellow page)
284// and makes all paragraphs be bold by default
285</span>config.pageStyle =
286  '<span class="string">body { background-color: yellow; color: black; font-family: verdana,sans-serif } </span>' +
287  '<span class="string">p { font-width: bold; } </span>';
288
289<span class="comment">// the following replaces the textarea with the given id with a new
290// HTMLArea object having the specified configuration
291</span>HTMLArea.replace('<span class="string">id</span>', config);</pre>
292
293<p><span class="warning">Important:</span> It's recommended that you add
294custom features and configuration to a separate file.  This will ensure you
295that when we release a new official version of HTMLArea you'll have less
296trouble upgrading it.</p>
297
298<h3>How do I customize the toolbar?</h3>
299
300<p>Using the configuration object introduced above allows you to completely
301control what the toolbar contains.  Following is an example of a one-line,
302customized toolbar, much simpler than the default one:</p>
303
304<pre class="code"
305><span class="keyword">var</span> <span class="variable-name">config</span> = <span class="keyword">new</span> HTMLArea.Config();
306config.toolbar = [
307  ['<span class="string">fontname</span>', '<span class="string">space</span>',
308   '<span class="string">fontsize</span>', '<span class="string">space</span>',
309   '<span class="string">formatblock</span>', '<span class="string">space</span>',
310   '<span class="string">bold</span>', '<span class="string">italic</span>', '<span class="string">underline</span>']
311];
312HTMLArea.replace('<span class="string">id</span>', config);</pre>
313
314<p>The toolbar is an Array of Array objects.  Each array in the toolbar
315defines a new line.  The default toolbar looks like this:</p>
316
317<pre class="code"
318>config.toolbar = [
319[ &quot;<span class="string">fontname</span>&quot;, &quot;<span class="string">space</span>&quot;,
320  &quot;<span class="string">fontsize</span>&quot;, &quot;<span class="string">space</span>&quot;,
321  &quot;<span class="string">formatblock</span>&quot;, &quot;<span class="string">space</span>&quot;,
322  &quot;<span class="string">bold</span>&quot;, &quot;<span class="string">italic</span>&quot;, &quot;<span class="string">underline</span>&quot;, &quot;<span class="string">separator</span>&quot;,
323  &quot;<span class="string">strikethrough</span>&quot;, &quot;<span class="string">subscript</span>&quot;, &quot;<span class="string">superscript</span>&quot;, &quot;<span class="string">separator</span>&quot;,
324  &quot;<span class="string">copy</span>&quot;, &quot;<span class="string">cut</span>&quot;, &quot;<span class="string">paste</span>&quot;, &quot;<span class="string">space</span>&quot;, &quot;<span class="string">undo</span>&quot;, &quot;<span class="string">redo</span>&quot; ],
325               
326[ &quot;<span class="string">justifyleft</span>&quot;, &quot;<span class="string">justifycenter</span>&quot;, &quot;<span class="string">justifyright</span>&quot;, &quot;<span class="string">justifyfull</span>&quot;, &quot;<span class="string">separator</span>&quot;,
327  &quot;<span class="string">insertorderedlist</span>&quot;, &quot;<span class="string">insertunorderedlist</span>&quot;, &quot;<span class="string">outdent</span>&quot;, &quot;<span class="string">indent</span>&quot;, &quot;<span class="string">separator</span>&quot;,
328  &quot;<span class="string">forecolor</span>&quot;, &quot;<span class="string">hilitecolor</span>&quot;, &quot;<span class="string">textindicator</span>&quot;, &quot;<span class="string">separator</span>&quot;,
329  &quot;<span class="string">inserthorizontalrule</span>&quot;, &quot;<span class="string">createlink</span>&quot;, &quot;<span class="string">insertimage</span>&quot;, &quot;<span class="string">inserttable</span>&quot;, &quot;<span class="string">htmlmode</span>&quot;, &quot;<span class="string">separator</span>&quot;,
330  &quot;<span class="string">popupeditor</span>&quot;, &quot;<span class="string">separator</span>&quot;, &quot;<span class="string">showhelp</span>&quot;, &quot;<span class="string">about</span>&quot; ]
331];</pre>
332
333<p>Except three strings, all others in the examples above need to be defined
334in the <code>config.btnList</code> object (detailed a bit later in this
335document).  The three exceptions are: 'space', 'separator' and 'linebreak'.
336These three have the following meaning, and need not be present in
337<code>btnList</code>:</p>
338
339<ul>
340  <li>'space' -- Inserts a space of 5 pixels (the width is configurable by external
341  <acronym title="Cascading Style Sheets">CSS</acronym>) at the current
342  position in the toolbar.</li>
343  <li>'separator' -- Inserts a small vertical separator, for visually grouping related
344  buttons.</li>
345  <li>'linebreak' -- Starts a new line in the toolbar.  Subsequent controls will be
346  inserted on the new line.</li>
347</ul>
348
349<p><span class="warning">Important:</span> It's recommended that you add
350custom features and configuration to a separate file.  This will ensure you
351that when we release a new official version of HTMLArea you'll have less
352trouble upgrading it.</p>
353
354<h3>How do I create custom buttons?</h3>
355
356<p>By design, the toolbar is easily extensible.  For adding a custom button
357one needs to follow two steps.</p>
358
359<h4 id="regbtn">1. Register the button in <code>config.btnList</code>.</h4>
360
361<p>For each button in the toolbar, HTMLArea needs to know the following
362information:</p>
363<ul>
364  <li>a name for it (we call it the ID of the button);</li>
365  <li>the path to an image to be displayed in the toolbar;</li>
366  <li>a tooltip for it;</li>
367  <li>whether the button is enabled or not in text mode;</li>
368  <li>what to do when the button is clicked;</li>
369</ul>
370<p>You need to provide all this information for registering a new button
371too.  The button ID can be any string identifier and it's used when
372defining the toolbar, as you saw above.  We recommend starting
373it with "my-" so that it won't clash with the standard ID-s (those from
374the default toolbar).</p>
375
376<p class="note">Register button example #1</p>
377
378<pre class="code"
379><span class="comment">// get a default configuration
380</span><span class="keyword">var</span> <span class="variable-name">config</span> = <span class="keyword">new</span> HTMLArea.Config();
381<span class="comment">// register the new button using Config.registerButton.
382// parameters:        button ID,   tooltip,          image,           textMode,
383</span>config.registerButton(&quot;<span class="string">my-hilite</span>&quot;, &quot;<span class="string">Highlight text</span>&quot;, &quot;<span class="string">my-hilite.gif</span>&quot;, <span class="keyword">false</span>,
384<span class="comment">// function that gets called when the button is clicked
385</span>  <span class="keyword">function</span>(editor, id) {
386    editor.surroundHTML('<span class="string">&lt;span class=&quot;hilite&quot;&gt;</span>', '<span class="string">&lt;/span&gt;</span>');
387  }
388);</pre>
389
390<p>An alternate way of calling registerButton is exemplified above.  Though
391the code might be a little bit larger, using this form makes your code more
392maintainable.  It doesn't even needs comments as it's pretty clear.</p>
393
394<p class="note">Register button example #2</p>
395
396<pre class="code"
397><span class="keyword">var</span> <span class="variable-name">config</span> = <span class="keyword">new</span> HTMLArea.Config();
398config.registerButton({
399  id        : &quot;<span class="string">my-hilite</span>&quot;,
400  tooltip   : &quot;<span class="string">Highlight text</span>&quot;,
401  image     : &quot;<span class="string">my-hilite.gif</span>&quot;,
402  textMode  : <span class="keyword">false</span>,
403  action    : <span class="keyword">function</span>(editor, id) {
404                editor.surroundHTML('<span class="string">&lt;span class=&quot;hilite&quot;&gt;</span>', '<span class="string">&lt;/span&gt;</span>');
405              }
406});</pre>
407
408<p>You might notice that the "action" function receives two parameters:
409<b>editor</b> and <b>id</b>.  In the examples above we only used the
410<b>editor</b> parameter.  But it could be helpful for you to understand
411both:</p>
412
413<ul>
414  <li><b>editor</b> is a reference to the HTMLArea object.  Since our entire
415  code now has an <acronym title="Object Oriented Programming">OOP</acronym>-like
416  design, you need to have a reference to
417  the editor object in order to do things with it.  In previous versions of
418  HTMLArea, in order to identify the object an ID was used -- the ID of the
419  HTML element.  In this version ID-s are no longer necessary.</li>
420
421  <li><b>id</b> is the button ID.  Wondering why is this useful?  Well, you
422  could use the same handler function (presuming that it's not an anonymous
423  function like in the examples above) for more buttons.  You can <a
424  href="#btnex">see an example</a> a bit later in this document.</li>
425</ul>
426
427<h4>2. Inserting it into the toolbar</h4>
428
429<p>At this step you need to specify where in the toolbar to insert the
430button, or just create the whole toolbar again as you saw in the previous
431section.  You use the button ID, as shown in the examples of customizing the
432toolbar in the previous section.</p>
433
434<p>For the sake of completion, following there are another examples.</p>
435
436<p class="note">Append your button to the default toolbar</p>
437
438<pre class="code"
439>config.toolbar.push([ &quot;<span class="string">my-hilite</span>&quot; ]);</pre>
440
441<p class="note">Customized toolbar</p>
442
443<pre class="code"
444>config.toolbar = [
445  ['<span class="string">fontname</span>', '<span class="string">space</span>',
446   '<span class="string">fontsize</span>', '<span class="string">space</span>',
447   '<span class="string">formatblock</span>', '<span class="string">space</span>',
448   '<span class="string">separator</span>', '<span class="string">my-hilite</span>', '<span class="string">separator</span>', '<span class="string">space</span>', <span class="comment">// here's your button
449</span>   '<span class="string">bold</span>', '<span class="string">italic</span>', '<span class="string">underline</span>', '<span class="string">space</span>']
450];</pre>
451
452<p><span class="note">Note:</span> in the example above our new button is
453between two vertical separators.  But this is by no means required.  You can
454put it wherever you like.  Once registered in the btnList (<a
455href="#regbtn">step 1</a>) your custom button behaves just like a default
456button.</p>
457
458<p><span class="warning">Important:</span> It's recommended that you add
459custom features and configuration to a separate file.  This will ensure you
460that when we release a new official version of HTMLArea you'll have less
461trouble upgrading it.</p>
462
463<h4 id="btnex">A complete example</h4>
464
465<p>Please note that it is by no means necessary to include the following
466code into the htmlarea.js file.  On the contrary, it might not work there.
467The configuration system is designed such that you can always customize the
468editor <em>from outside files</em>, thus keeping the htmlarea.js file
469intact.  This will make it easy for you to upgrade your HTMLArea when we
470release a new official version.  OK, I promise it's the last time I said
471this. ;)</p>
472
473<pre class="code"
474><span class="comment">// All our custom buttons will call this function when clicked.
475// We use the <b>buttonId</b> parameter to determine what button
476// triggered the call.
477</span><span class="keyword">function</span> <span class="function-name">clickHandler</span>(editor, buttonId) {
478  <span class="keyword">switch</span> (buttonId) {
479    <span class="keyword">case</span> &quot;<span class="string">my-toc</span>&quot;:
480      editor.insertHTML(&quot;<span class="string">&lt;h1&gt;Table Of Contents&lt;/h1&gt;</span>&quot;);
481      <span class="keyword">break</span>;
482    <span class="keyword">case</span> &quot;<span class="string">my-date</span>&quot;:
483      editor.insertHTML((<span class="keyword">new</span> Date()).toString());
484      <span class="keyword">break</span>;
485    <span class="keyword">case</span> &quot;<span class="string">my-bold</span>&quot;:
486      editor.execCommand(&quot;<span class="string">bold</span>&quot;);
487      editor.execCommand(&quot;<span class="string">italic</span>&quot;);
488      <span class="keyword">break</span>;
489    <span class="keyword">case</span> &quot;<span class="string">my-hilite</span>&quot;:
490      editor.surroundHTML(&quot;<span class="string">&lt;span class=\&quot;hilite\&quot;&gt;</span>&quot;, &quot;<span class="string">&lt;/span&gt;</span>&quot;);
491      <span class="keyword">break</span>;
492  }
493};
494
495<span class="comment">// Create a new configuration object
496</span><span class="keyword">var</span> <span class="variable-name">config</span> = <span class="keyword">new</span> HTMLArea.Config();
497
498<span class="comment">// Register our custom buttons
499</span>config.registerButton(&quot;<span class="string">my-toc</span>&quot;,  &quot;<span class="string">Insert TOC</span>&quot;, &quot;<span class="string">my-toc.gif</span>&quot;, <span class="keyword">false</span>, clickHandler);
500config.registerButton(&quot;<span class="string">my-date</span>&quot;, &quot;<span class="string">Insert date/time</span>&quot;, &quot;<span class="string">my-date.gif</span>&quot;, <span class="keyword">false</span>, clickHandler);
501config.registerButton(&quot;<span class="string">my-bold</span>&quot;, &quot;<span class="string">Toggle bold/italic</span>&quot;, &quot;<span class="string">my-bold.gif</span>&quot;, <span class="keyword">false</span>, clickHandler);
502config.registerButton(&quot;<span class="string">my-hilite</span>&quot;, &quot;<span class="string">Hilite selection</span>&quot;, &quot;<span class="string">my-hilite.gif</span>&quot;, <span class="keyword">false</span>, clickHandler);
503
504<span class="comment">// Append the buttons to the default toolbar
505</span>config.toolbar.push([&quot;<span class="string">linebreak</span>&quot;, &quot;<span class="string">my-toc</span>&quot;, &quot;<span class="string">my-date</span>&quot;, &quot;<span class="string">my-bold</span>&quot;, &quot;<span class="string">my-hilite</span>&quot;]);
506
507<span class="comment">// Replace an existing textarea with an HTMLArea object having the above config.
508</span>HTMLArea.replace(&quot;<span class="string">textAreaID</span>&quot;, config);</pre>
509
510
511<hr />
512<address>&copy; <a href="http://interactivetools.com" title="Visit our website"
513>InteractiveTools.com</a> 2002-2004.
514<br />
515© <a href="http://dynarch.com">dynarch.com</a> 2003-2004<br />
516HTMLArea v3.0 developed by <a
517href="http://dynarch.com/mishoo/">Mihai Bazon</a>.
518<br />
519Documentation written by Mihai Bazon.
520</address>
521<!-- hhmts start --> Last modified: Wed Jan 28 12:18:23 EET 2004 <!-- hhmts end -->
522<!-- doc-lang: English -->
523</body> </html>
Note: See TracBrowser for help on using the repository browser.