Update of /cvsroot/php-blog/serendipity/htmlarea
In directory sc8-pr-cvs1.sourceforge.net:/tmp/cvs-serv20038
Modified Files:
dialog.js htmlarea.css htmlarea.js license.txt
Added Files:
ChangeLog index.html popupdiv.js popupwin.js reference.html
release-notes.html
Removed Files:
htmlarea-lang-en.js tmp
Log Message:
Upgrade to latest WYSIWYG manager
--- tmp DELETED ---
Index: htmlarea.css
===================================================================
RCS file: /cvsroot/php-blog/serendipity/htmlarea/htmlarea.css,v
retrieving revision 1.1.1.1
retrieving revision 1.2
diff -u -d -r1.1.1.1 -r1.2
--- htmlarea.css 28 Mar 2003 20:05:28 -0000 1.1.1.1
+++ htmlarea.css 23 Mar 2004 15:41:04 -0000 1.2
@@ -1,12 +1,15 @@
.htmlarea { background: #fff; }
-.htmlarea .toolbar {
- background: ButtonFace;
- padding: 1px;
+.htmlarea .toolbar {
+ cursor: default;
+ background: ButtonFace;
+ padding: 1px 1px 2px 1px;
border: 1px solid;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}
+.htmlarea .toolbar table { font-family: tahoma,verdana,sans-serif; font-size: 11px; }
.htmlarea .toolbar img { border: none; }
+.htmlarea .toolbar .label { padding: 0px 3px; }
.htmlarea .toolbar .button {
background: ButtonFace;
@@ -14,6 +17,8 @@
border: 1px solid ButtonFace;
padding: 1px;
margin: 0px;
+ width: 18px;
+ height: 18px;
}
.htmlarea .toolbar .buttonHover {
border: 1px solid;
@@ -38,7 +43,7 @@
.htmlarea .toolbar .buttonDisabled img {
filter: alpha(opacity = 25);
- -moz-opacity: 25%;
+ -moz-opacity: 0.25;
}
.htmlarea .toolbar .separator {
@@ -55,4 +60,121 @@
.htmlarea .toolbar select { font: 11px Tahoma,Verdana,sans-serif; }
-select, select:hover, select:active { background: FieldFace; color: ButtonText; }
+.htmlarea .toolbar select,
+.htmlarea .toolbar select:hover,
+.htmlarea .toolbar select:active { background: FieldFace; color: ButtonText; }
+
+.htmlarea .statusBar {
+ border: 1px solid;
+ border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
+ padding: 2px 4px;
+ background-color: ButtonFace;
+ color: ButtonText;
+ font: 11px Tahoma,Verdana,sans-serif;
+}
+
+.htmlarea .statusBar .statusBarTree a {
+ padding: 2px 5px;
+ color: #00f;
+}
+
+.htmlarea .statusBar .statusBarTree a:visited { color: #00f; }
+.htmlarea .statusBar .statusBarTree a:hover {
+ background-color: Highlight;
+ color: HighlightText;
+ padding: 1px 4px;
+ border: 1px solid HighlightText;
+}
+
+
+/* Hidden DIV popup dialogs (PopupDiv) */
+
+.dialog {
+ color: ButtonText;
+ background: ButtonFace;
+}
+
+.dialog .content { padding: 2px; }
+
+.dialog, .dialog button, .dialog input, .dialog select, .dialog textarea, .dialog table {
+ font: 11px Tahoma,Verdana,sans-serif;
+}
+
+.dialog table { border-collapse: collapse; }
+
+.dialog .title {
+ background: #008;
+ color: #ff8;
+ border-bottom: 1px solid #000;
+ padding: 1px 0px 2px 5px;
+ font-size: 12px;
+ font-weight: bold;
+ cursor: default;
+}
+
+.dialog .title .button {
+ float: right;
+ border: 1px solid #66a;
+ padding: 0px 1px 0px 2px;
+ margin-right: 1px;
+ color: #fff;
+ text-align: center;
+}
+
+.dialog .title .button-hilite { border-color: #88f; background: #44c; }
+
+.dialog button {
+ width: 5em;
+ padding: 0px;
+}
+
+.dialog .buttonColor {
+ padding: 1px;
+ cursor: default;
+ border: 1px solid;
+ border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
+}
+
+.dialog .buttonColor-hilite {
+ border-color: #000;
+}
+
+.dialog .buttonColor .chooser, .dialog .buttonColor .nocolor {
+ height: 0.6em;
+ border: 1px solid;
+ padding: 0px 1em;
+ border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
+}
+
+.dialog .buttonColor .nocolor { padding: 0px; }
+.dialog .buttonColor .nocolor-hilite { background-color: #fff; color: #f00; }
+
+.dialog .label { text-align: right; width: 6em; }
+.dialog .value input { width: 100%; }
+.dialog .buttons { text-align: right; padding: 2px 4px 0px 4px; }
+
+.dialog legend { font-weight: bold; }
+.dialog fieldset table { margin: 2px 0px; }
+
+.popupdiv {
+ border: 2px solid;
+ border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
+}
+
+.popupwin {
+ padding: 0px;
+ margin: 0px;
+}
+
+.popupwin .title {
+ background: #fff;
+ color: #000;
+ font-weight: bold;
+ font-size: 120%;
+ padding: 3px 10px;
+ margin-bottom: 10px;
+ border-bottom: 1px solid black;
+ letter-spacing: 2px;
+}
+
+form { margin: 0px; border: none; }
--- NEW FILE: ChangeLog ---
2004-02-17 Mihai Bazon <mishoo@localhost.localdomain>
* lang/el.js, plugins/ContextMenu/lang/el.js, plugins/TableOperations/lang/el.js:
updated headers
* lang/no.js: updated (thanks havardw)
2004-02-09 Mihai Bazon <mishoo@localhost.localdomain>
* plugins/EnterParagraphs/enter-paragraphs.js:
Plugin that enables Mozilla to create a <p> instead of <br /> at ENTER.
Code contributed by Adam Wright.
* htmlarea.js: code to call onKeyPress for plugins that define it
code that keeps single spaces as
(thanks to hipikat @ IT forums (Adam Wright))
* ChangeLog:
ChangeLog is acutally automatically generated so there's no point keep it in CVS
[...1146 lines suppressed...]
* dialog.js, images/.xvpics/ed_align_justify.gif, images/ed_about.gif, images/ed_align_center.gif, images/ed_align_justify.gif, images/ed_align_left.gif, images/ed_align_right.gif, images/ed_blank.gif, images/ed_charmap.gif, images/ed_color_bg.gif, images/ed_color_fg.gif, images/ed_copy.gif, images/ed_custom.gif, images/ed_cut.gif, images/ed_delete.gif, images/ed_format_bold.gif, images/ed_format_italic.gif, images/ed_format_strike.gif, images/ed_format_sub.gif, images/ed_format_sup.gif, images/ed_format_underline.gif, images/ed_help.gif, images/ed_hr.gif, images/ed_html.gif, images/ed_image.gif, images/ed_indent_less.gif, images/ed_indent_more.gif, images/ed_link.gif, images/ed_list_bullet.gif, images/ed_list_num.gif, images/ed_redo.gif, images/ed_undo.gif, images/fullscreen_maximize.gif, images/fullscreen_minimize.gif, images/insert_table.gif, popups/about.html, popups/blank.html, popups/custom2.html, popups/editor_help.html, popups/fullscreen.html, popups/insert_image.html, popups/insert_table.html, popups/old-fullscreen.html, popups/old_insert_image.html, popups/popup.js, popups/select_color.html:
New file.
* dialog.js, images/.xvpics/ed_align_justify.gif, images/ed_about.gif, images/ed_align_center.gif, images/ed_align_justify.gif, images/ed_align_left.gif, images/ed_align_right.gif, images/ed_blank.gif, images/ed_charmap.gif, images/ed_color_bg.gif, images/ed_color_fg.gif, images/ed_copy.gif, images/ed_custom.gif, images/ed_cut.gif, images/ed_delete.gif, images/ed_format_bold.gif, images/ed_format_italic.gif, images/ed_format_strike.gif, images/ed_format_sub.gif, images/ed_format_sup.gif, images/ed_format_underline.gif, images/ed_help.gif, images/ed_hr.gif, images/ed_html.gif, images/ed_image.gif, images/ed_indent_less.gif, images/ed_indent_more.gif, images/ed_link.gif, images/ed_list_bullet.gif, images/ed_list_num.gif, images/ed_redo.gif, images/ed_undo.gif, images/fullscreen_maximize.gif, images/fullscreen_minimize.gif, images/insert_table.gif, popups/about.html, popups/blank.html, popups/custom2.html, popups/editor_help.html, popups/fullscreen.html, popups/insert_image.html, popups/insert_table.html, popups/old-fullscreen.html, popups/old_insert_image.html, popups/popup.js, popups/select_color.html:
first moved to CVS (close to release 3.0-beta)
* htmlarea.js, test.cgi: New file.
* htmlarea.js, test.cgi: first moved to CVS (close to release 3.0-beta)
* htmlarea-lang-en.js, readme.html: New file.
* htmlarea-lang-en.js, readme.html:
first moved to CVS (close to release 3.0-beta)
* example.html, htmlarea.css, license.txt: New file.
* example.html, htmlarea.css, license.txt:
first moved to CVS (close to release 3.0-beta)
Index: dialog.js
===================================================================
RCS file: /cvsroot/php-blog/serendipity/htmlarea/dialog.js,v
retrieving revision 1.1.1.1
retrieving revision 1.2
diff -u -d -r1.1.1.1 -r1.2
--- dialog.js 28 Mar 2003 20:05:28 -0000 1.1.1.1
+++ dialog.js 23 Mar 2004 15:41:04 -0000 1.2
@@ -1,3 +1,16 @@
+// htmlArea v3.0 - Copyright (c) 2003-2004 interactivetools.com, inc.
+// This copyright notice MUST stay intact for use (see license.txt).
+//
+// Portions (c) dynarch.com, 2003-2004
+//
+// A free WYSIWYG editor replacement for <textarea> fields.
+// For full source code and docs, visit http://www.interactivetools.com/
+//
+// Version 3.0 developed by Mihai Bazon.
+// http://dynarch.com/mishoo
+//
+// $Id$
+
// Though "Dialog" looks like an object, it isn't really an object. Instead
// it's just namespace for protecting global symbols.
@@ -5,26 +18,13 @@
if (typeof init == "undefined") {
init = window; // pass this window object by default
}
- if (document.all) { // here we hope that Mozilla will never support document.all
- var value =
- showModalDialog(url, init,
-// window.open(url, '_blank',
- "resizable: no; help: no; status: no; scroll: no");
- if (action) {
- action(value);
- }
- } else {
- return Dialog._geckoOpenModal(url, action, init);
- }
+ Dialog._geckoOpenModal(url, action, init);
};
Dialog._parentEvent = function(ev) {
if (Dialog._modal && !Dialog._modal.closed) {
Dialog._modal.focus();
- // we get here in Mozilla only, anyway, so we can safely use
- // the DOM version.
- ev.preventDefault();
- ev.stopPropagation();
+ HTMLArea._stopEvent(ev);
}
};
@@ -38,23 +38,23 @@
Dialog._arguments = null;
Dialog._geckoOpenModal = function(url, action, init) {
- var dlg = window.open(url, "ha_dialog",
+ var dlg = window.open(url, "hadialog",
"toolbar=no,menubar=no,personalbar=no,width=10,height=10," +
- "scrollbars=no,resizable=no");
+ "scrollbars=no,resizable=yes");
Dialog._modal = dlg;
Dialog._arguments = init;
// capture some window's events
function capwin(w) {
- w.addEventListener("click", Dialog._parentEvent, true);
- w.addEventListener("mousedown", Dialog._parentEvent, true);
- w.addEventListener("focus", Dialog._parentEvent, true);
+ HTMLArea._addEvent(w, "click", Dialog._parentEvent);
+ HTMLArea._addEvent(w, "mousedown", Dialog._parentEvent);
+ HTMLArea._addEvent(w, "focus", Dialog._parentEvent);
};
// release the captured events
function relwin(w) {
- w.removeEventListener("focus", Dialog._parentEvent, true);
- w.removeEventListener("mousedown", Dialog._parentEvent, true);
- w.removeEventListener("click", Dialog._parentEvent, true);
+ HTMLArea._removeEvent(w, "click", Dialog._parentEvent);
+ HTMLArea._removeEvent(w, "mousedown", Dialog._parentEvent);
+ HTMLArea._removeEvent(w, "focus", Dialog._parentEvent);
};
capwin(window);
// capture other frames
--- htmlarea-lang-en.js DELETED ---
--- NEW FILE: index.html ---
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">
<html>
<head>
<title>HTMLArea -- the free, customizable online editor</title>
<style type="text/css">
html, body { font-family: georgia,"times new roman",serif; background-color: #fff; color: #000; }
.label { text-align: right; padding-right: 0.3em; }
.bline { border-bottom: 1px solid #aaa; }
</style>
</head>
<body>
<div style="float: right; border: 1px solid #aaa; background-color: #eee; padding: 3px; margin-left: 10px; margin-bottom: 10px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="label">Version:</td><td>3.0</td>
</tr>
<tr>
<td class="label">Release:</td><td>rc1 (<a href="release-notes.html">release notes</a>)</td>
</tr>
<tr>
<td class="label bline">Compiled at:</td><td class="bline">Mar 1, 2004 [19:37] GMT</td>
</tr>
<tr>
<td class="label">SourceForge page:</td><td><a href="http://sf.net/projects/itools-htmlarea/">http://sf.net/projects/itools-htmlarea/</a></td>
</table>
</div>
<h1>HTMLArea -- the free<br/>customizable online editor</h1>
<p>
HTMLArea is a free, customizable online editor. It works inside your
browser. It uses a non-standard feature implemented in Internet
Explorer 5.5 or better for Windows and Mozilla 1.3 or better (any
platform), therefore it will only work in one of these browsers.
</p>
<p>
HTMLArea is copyright <a
href="http://interactivetools.com">InteractiveTools.com</a> and <a
href="http://dynarch.com">Dynarch.com</a> and it is
released under a BSD-style license. HTMLArea is created and developed
upto version 2.03 by InteractiveTools.com. Version 3.0 developed by
<a href="http://dynarch.com/mishoo/">Mihai Bazon</a> for
InteractiveTools. It contains code sponsored by third-party companies as well.
Please see our About Box for details about who sponsored what plugins.
</p>
<h2>Online demos</h2>
<ul>
<li><a href="examples/core.html">HTMLArea standard</a> -- contains the core
editor.</li>
<li><a href="examples/table-operations.html">HTMLArea + tables</a> --
loads the <tt>TableOperations</tt> plugin which provides some extra
editing features for tables.</li>
<li><a href="examples/spell-checker.html">HTMLArea + spell checher</a>
-- loads the <tt>SpellChecker</tt> plugin which provides what its
name says: a spell checker. This one requires additional support on
the server-side.</li>
<li><a href="examples/full-page.html">HTMLArea Full HTML Editor</a> --
loads the <tt>FullPage</tt> plugin which allows you to edit a full
HTML page, including <title>, <!DOCTYPE...> and some
other options.</li>
<li><a href="examples/context-menu.html">HTMLArea with Context
Menu</a> -- this plugin provides a nice and useful context menu.</li>
<li><a href="examples/fully-loaded.html">HTMLArea fully loaded</a> --
all of the above. ;-)</li>
</ul>
<h2>Installation</h2>
<p>
Installation is (or should be) easy. You need to unpack the ZIP file
in a directory accessible through your webserver. Supposing you
unpack in your <tt>DocumentRoot</tt> and your <tt>DocumentRoot</tt> is
<tt>/var/www/html</tt> as in a standard RedHat installation, you need
to acomplish the following steps: (the example is for a Unix-like
operating system)
</p>
<pre style="margin-left: 2em"
>
cd /var/www/html
unzip /path/to/archive/HTMLArea-3.0-rc1.zip
mv HTMLArea-3.0-rc1 htmlarea
find htmlarea/ -type f -exec chmod 644 {} \;
find htmlarea/ -type d -exec chmod 755 {} \;
find htmlarea/ -name "*.cgi" -exec chmod 755 {} \;</pre>
<p>
<strong>Notes.</strong> You may chose to symlink "htmlarea" to "HTMLArea-3.0-rc1", in which case your server needs to be configured to
"<tt>FollowSymLinks</tt>". You need to make sure that *.cgi files are
interpreted as CGI scripts. If you want to use the SpellChecker
plugin you need to have a recent version of Perl installed (I
recommend 5.8.0) on the server, and the module Text::Aspell, available
from CPAN. More info in "<a
href="plugins/SpellChecker/readme-tech.html">plugins/SpellChecker/readme-tech.html</a>".
</p>
<p>About how to setup your pages to use the editor, please read the
[outdated yet generally valid] <a
href="reference.html">documentation</a>.</p>
<h2>Status and links</h2>
<p>HTMLArea has reached version 3.0. As of this version, it
supports:</p>
<ul>
<li>Customizable toolbar</li>
<li>Easy internationalization</li>
<li>Plugin-based infrastructure</li>
<li>Delivers W3-compliant HTML (with few exceptions)</li>
<li>Has a subset of Microsoft Word's keyboard shortcuts</li>
<li>Full-screen editor</li>
<li>Advanced table operations (by external plugin
"TableOperations")</li>
<li>Spell checker (by external plugin "SpellChecker")</li>
<li>probably more... ;-)</li>
</ul>
<p>We have a <a
href="http://sourceforge.net/projects/itools-htmlarea/">project page</a>
at <a href="http://sourceforge.net">SourceForge.net</a>. There you can
also find out <a href="http://sourceforge.net/cvs/?group_id=69750">how
to retrieve the code from CVS</a>, or you can <a
href="http://cvs.sourceforge.net/cgi-bin/viewcvs.cgi/itools-htmlarea">browse
the CVS online</a>. We also have a <a
href="http://sourceforge.net/tracker/?atid=525656&group_id=69750&func=browse">bug
system</a>, a <a
href="http://sourceforge.net/tracker/?atid=525658&group_id=69750&func=browse">patch
tracking system</a> and a <a
href="http://sourceforge.net/tracker/?atid=525659&group_id=69750&func=browse">feature
request page</a>.</p>
<p>We invite you to say everything you want about HTMLArea <a
href="http://www.interactivetools.com/forum/gforum.cgi?forum=14;">on the
forums</a> at InteractiveTools.com. There you should also find the
latest news.</p>
<p>Sometimes I post news about the latest developments on <a
href="http://dynarch.com/mishoo/">my personal homepage</a>.</p>
<h2>"It doesn't work, what's wrong?"</h2>
<p>If it doesn't work, you have several options:</p>
<ul>
<li>Post a message to the forum. Describe your problem in as much
detail as possible. Include errors you might find in the JavaScript
console (if you are a Mozilla user), or errors displayed by IE (though
they're most of the times useless).</li>
<li>If you're positive that you discovered a bug in HTMLArea then feel
free to fill a bug report in our bug system. If you have the time you
should check to see if a similar bug was reported or not; it might be
fixed already in the CVS ;-) If you're positive that a similar bug was
not yet reported, do fill a bug report and please include as much
detail as possible, such as your browser, OS, errors from JavaScript
console, etc.</li>
<li>If you want a new feature to be implemented, post it on the
features request and someone will hopefully take care of it.</li>
</ul>
<p>You can <a href="mailto:mi...@in...">contact me directly</a>
<em>only</em> if you want to pay me for implementing custom features to
HTMLArea. If you want to sponsor these features (that is, allow them to
get back into the public HTMLArea distribution) I'll be cheaper. ;-)</p>
<hr />
<address><a href="http://dynarch.com/mishoo/">Mihai Bazon</a></address>
<!-- Created: Sun Aug 3 14:11:26 EEST 2003 -->
<!-- hhmts start --> Last modified: Wed Jan 28 11:54:47 EET 2004 <!-- hhmts end -->
<!-- doc-lang: English -->
</body>
</html>
--- NEW FILE: popupwin.js ---
// (c) dynarch.com 2003-2004
// Distributed under the same terms as HTMLArea itself.
function PopupWin(editor, title, handler, initFunction) {
this.editor = editor;
this.handler = handler;
var dlg = window.open("", "__ha_dialog",
"toolbar=no,menubar=no,personalbar=no,width=600,height=600,left=20,top=40" +
"scrollbars=no,resizable=no");
this.window = dlg;
var doc = dlg.document;
this.doc = doc;
var self = this;
var base = document.baseURI || document.URL;
if (base && base.match(/(.*)\/([^\/]+)/)) {
base = RegExp.$1 + "/";
}
if (typeof _editor_url != "undefined" && !/^\//.test(_editor_url)) {
// _editor_url doesn't start with '/' which means it's relative
// FIXME: there's a problem here, it could be http:// which
// doesn't start with slash but it's not relative either.
base += _editor_url;
} else
base = _editor_url;
if (!/\/$/.test(base)) {
// base does not end in slash, add it now
base += '/';
}
this.baseURL = base;
doc.open();
var html = "<html><head><title>" + title + "</title>\n";
// html += "<base href='" + base + "htmlarea.js' />\n";
html += "<style type='text/css'>@import url(" + base + "htmlarea.css);</style></head>\n";
html += "<body class='dialog popupwin' id='--HA-body'></body></html>";
doc.write(html);
doc.close();
// sometimes I Hate Mozilla... ;-(
function init2() {
var body = doc.body;
if (!body) {
setTimeout(init2, 25);
return false;
}
dlg.title = title;
doc.documentElement.style.padding = "0px";
doc.documentElement.style.margin = "0px";
var content = doc.createElement("div");
content.className = "content";
self.content = content;
body.appendChild(content);
self.element = body;
initFunction(self);
dlg.focus();
};
init2();
};
PopupWin.prototype.callHandler = function() {
var tags = ["input", "textarea", "select"];
var params = new Object();
for (var ti in tags) {
var tag = tags[ti];
var els = this.content.getElementsByTagName(tag);
for (var j = 0; j < els.length; ++j) {
var el = els[j];
var val = el.value;
if (el.tagName.toLowerCase() == "input") {
if (el.type == "checkbox") {
val = el.checked;
}
}
params[el.name] = val;
}
}
this.handler(this, params);
return false;
};
PopupWin.prototype.close = function() {
this.window.close();
};
PopupWin.prototype.addButtons = function() {
var self = this;
var div = this.doc.createElement("div");
this.content.appendChild(div);
div.className = "buttons";
for (var i = 0; i < arguments.length; ++i) {
var btn = arguments[i];
var button = this.doc.createElement("button");
div.appendChild(button);
button.innerHTML = HTMLArea.I18N.buttons[btn];
switch (btn) {
case "ok":
button.onclick = function() {
self.callHandler();
self.close();
return false;
};
break;
case "cancel":
button.onclick = function() {
self.close();
return false;
};
break;
}
}
};
PopupWin.prototype.showAtElement = function() {
var self = this;
// Mozilla needs some time to realize what's goin' on..
setTimeout(function() {
var w = self.content.offsetWidth + 4;
var h = self.content.offsetHeight + 4;
// size to content -- that's fuckin' buggy in all fuckin' browsers!!!
// so that we set a larger size for the dialog window and then center
// the element inside... phuck!
// center...
var el = self.content;
var s = el.style;
// s.width = el.offsetWidth + "px";
// s.height = el.offsetHeight + "px";
s.position = "absolute";
s.left = (w - el.offsetWidth) / 2 + "px";
s.top = (h - el.offsetHeight) / 2 + "px";
if (HTMLArea.is_gecko) {
self.window.innerWidth = w;
self.window.innerHeight = h;
} else {
self.window.resizeTo(w + 8, h + 35);
}
}, 25);
};
--- NEW FILE: release-notes.html ---
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTMLArea-3.0-rc1 release notes</title>
<style>
.fixme { color: red; }
</style>
</head>
<body>
<h1>HTMLArea-3.0-rc1 release notes</h1>
<p>This release was compiled on Mar 1, 2004 [19:37] GMT.</p>
<h2>3.0-rc1</h2>
<p>Changes since 3.0-Beta:</p>
<ul>
<li>
<b>New plugins</b>
<ul>
<li>
ContextMenu plugin (provides a nice context menu with common
operations, including table ops, link ops, etc.)
</li>
<li>
CSS plugin (provides an easy way to insert/change CSS classes)
</li>
<li>
FullPage plugin (allows HTMLArea to edit a whole HTML file,
not only the content within <body>.)
</li>
</ul>
</li>
<li>
<b>Changes in the SpellChecker plugin</b>
<ul>
<li>
Many bugfixes: now it works ;-) Fully Unicode-safe.
</li>
<li>
Speed and bandwidth optimization: reports the list of
suggestions only once for each mispelled word; this helps
in cases where you have, for instance, the word âHTMLAreaâ
in 10 places all over the document; the list of
suggestions for it--which is kind of huge--will only be
included <em>once</em>.
</li>
<li>
User interface improvements: the highlighted word will
remain in view; in cases where it's normally outside, the
window will be scrolled to it.
</li>
<li>
Added a "Revert" button for those that change their minds ;-)
</li>
<li>
Added a "Info" button which reports information about the
document, retrieved by the server-side spell checker:
total number of words, total number of mispelled words,
number of suggestions made, spell check time, etc. More
can be easily added. <span class="fixme">FIXME: this part
is not yet internationalized.</span>
</li>
<li>
The server-side spell checker now uses XML::DOM instead of
HTML::Parser, which means that it will be unable to parse
âtag-soupâ HTML. It needs valid code. Usually HTMLArea
generates valid code, but on rare occasions it might fail
and the spell checker will report a gross error message.
This gonna have to be fixed, but instead of making the
spell checker accept invalid HTML I prefer to make
HTMLArea generate valid code, so changes are to be done in
other places ;-)
</li>
</ul>
</li>
<li>
<b>Changes in the core editor</b>
<ul>
<li>
Easier to setup: you only need to load
<tt>htmlarea.js</tt>; other scripts will be loaded
automatically. <a href="reference.html">Documentation</a>
and <a href="examples/">examples</a> updated.
</li>
<li>
Better plugin support (they register information about
themselves with the editor; can register event handlers for
the editor, etc.)
</li>
<li>
New about box; check it out, it's cool ;-)
</li>
<li>
Word cleaner (can be enabled to automatically kill Word crap
on paste (see Config.killWordOnPaste); otherwise accessible by
pressing CTRL-0 in the editor; a toolbar button will come up
soon)
</li>
<li>
Image preview in "insert image" dialog. Also allows
modification of current image, if selected.
</li>
<li>
New "insert link" dialog, allows target and title
specification, allows editing links.
</li>
<li>
Implemented support for text direction (left-to-right or
right-to-left).
</li>
<li>
Lots of bug fixes! ... and more, I guess ;-) an
automatically generated <a href="ChangeLog">change log</a>
is now available.
</li>
</ul>
</li>
</ul>
<p>I don't have the power to go through the <a
href="http://sourceforge.net/tracker/?atid=525656&group_id=69750&func=browse">bug
system</a> at SourceForge
now. Some of the bugs reported there may be fixed; I'll update
their status, some other time. If you reported bugs there and now
find them to be fixed, please let me know.</p>
<h2>3.0-Beta</h2>
<p>Changes since 3.0-Alpha:</p>
<ul>
<li>Performance improvements.</li>
<li>Many bugs fixed.</li>
<li>Plugin infrastructure.</li>
<li>TableOperations plugin.</li>
<li>SpellChecker plugin.</li>
<li>Status bar.</li>
<li>API for registering custom buttons and drop-down boxes in the
toolbar.</li>
<li>Toolbar can contain text labels.</li>
<li>Cut, copy, paste, undo, redo buttons.</li>
</ul>
<hr />
<address><a href="http://dynarch.com/mishoo/">Mihai Bazon</a></address>
<!-- Created: Sun Aug 3 16:55:08 EEST 2003 -->
<!-- hhmts start --> Last modified: Sun Feb 1 13:16:10 EET 2004 <!-- hhmts end -->
<!-- doc-lang: English -->
</body>
</html>
--- NEW FILE: popupdiv.js ---
/** This file is derived from PopupDiv, developed by Mihai Bazon for
* SamWare.net. Modifications were needed to make it usable in HTMLArea.
* HTMLArea is a free WYSIWYG online HTML editor from InteractiveTools.com.
*
* This file does not function standalone. It is dependent of global functions
* defined in HTMLArea-3.0 (htmlarea.js).
*
* Please see file htmlarea.js for further details.
**/
var is_ie = ( (navigator.userAgent.toLowerCase().indexOf("msie") != -1) &&
(navigator.userAgent.toLowerCase().indexOf("opera") == -1) );
var is_compat = (document.compatMode == "BackCompat");
function PopupDiv(editor, titleText, handler, initFunction) {
var self = this;
this.editor = editor;
this.doc = editor._mdoc;
this.handler = handler;
var el = this.doc.createElement("div");
el.className = "content";
var popup = this.doc.createElement("div");
popup.className = "dialog popupdiv";
this.element = popup;
var s = popup.style;
s.position = "absolute";
s.left = "0px";
s.top = "0px";
var title = this.doc.createElement("div");
title.className = "title";
this.title = title;
popup.appendChild(title);
HTMLArea._addEvent(title, "mousedown", function(ev) {
self._dragStart(is_ie ? window.event : ev);
});
var button = this.doc.createElement("div");
button.className = "button";
title.appendChild(button);
button.innerHTML = "×";
title.appendChild(this.doc.createTextNode(titleText));
this.titleText = titleText;
button.onmouseover = function() {
this.className += " button-hilite";
};
button.onmouseout = function() {
this.className = this.className.replace(/\s*button-hilite\s*/g, " ");
};
button.onclick = function() {
this.className = this.className.replace(/\s*button-hilite\s*/g, " ");
self.close();
};
popup.appendChild(el);
this.content = el;
this.doc.body.appendChild(popup);
this.dragging = false;
this.onShow = null;
this.onClose = null;
this.modal = false;
initFunction(this);
};
PopupDiv.currentPopup = null;
PopupDiv.prototype.showAtElement = function(el, mode) {
this.defaultSize();
var pos, ew, eh;
var popup = this.element;
popup.style.display = "block";
var w = popup.offsetWidth;
var h = popup.offsetHeight;
popup.style.display = "none";
if (el != window) {
pos = PopupDiv.getAbsolutePos(el);
ew = el.offsetWidth;
eh = el.offsetHeight;
} else {
pos = {x:0, y:0};
var size = PopupDiv.getWindowSize();
ew = size.x;
eh = size.y;
}
var FX = false, FY = false;
if (mode.indexOf("l") != -1) {
pos.x -= w;
FX = true;
}
if (mode.indexOf("r") != -1) {
pos.x += ew;
FX = true;
}
if (mode.indexOf("t") != -1) {
pos.y -= h;
FY = true;
}
if (mode.indexOf("b") != -1) {
pos.y += eh;
FY = true;
}
if (mode.indexOf("c") != -1) {
FX || (pos.x += Math.round((ew - w) / 2));
FY || (pos.y += Math.round((eh - h) / 2));
}
this.showAt(pos.x, pos.y);
};
PopupDiv.prototype.defaultSize = function() {
var s = this.element.style;
var cs = this.element.currentStyle;
var addX = (is_ie && is_compat) ? (parseInt(cs.borderLeftWidth) +
parseInt(cs.borderRightWidth) +
parseInt(cs.paddingLeft) +
parseInt(cs.paddingRight)) : 0;
var addY = (is_ie && is_compat) ? (parseInt(cs.borderTopWidth) +
parseInt(cs.borderBottomWidth) +
parseInt(cs.paddingTop) +
parseInt(cs.paddingBottom)) : 0;
s.display = "block";
s.width = (this.content.offsetWidth + addX) + "px";
s.height = (this.content.offsetHeight + this.title.offsetHeight) + "px";
s.display = "none";
};
PopupDiv.prototype.showAt = function(x, y) {
this.defaultSize();
var s = this.element.style;
s.display = "block";
s.left = x + "px";
s.top = y + "px";
this.hideShowCovered();
PopupDiv.currentPopup = this;
HTMLArea._addEvents(this.doc.body, ["mousedown", "click"], PopupDiv.checkPopup);
HTMLArea._addEvents(this.editor._doc.body, ["mousedown", "click"], PopupDiv.checkPopup);
if (is_ie && this.modal) {
this.doc.body.setCapture(false);
this.doc.body.onlosecapture = function() {
(PopupDiv.currentPopup) && (this.doc.body.setCapture(false));
};
}
window.event && HTMLArea._stopEvent(window.event);
if (typeof this.onShow == "function") {
this.onShow();
} else if (typeof this.onShow == "string") {
eval(this.onShow);
}
var field = this.element.getElementsByTagName("input")[0];
if (!field) {
field = this.element.getElementsByTagName("select")[0];
}
if (!field) {
field = this.element.getElementsByTagName("textarea")[0];
}
if (field) {
field.focus();
}
};
PopupDiv.prototype.close = function() {
this.element.style.display = "none";
PopupDiv.currentPopup = null;
this.hideShowCovered();
HTMLArea._removeEvents(this.doc.body, ["mousedown", "click"], PopupDiv.checkPopup);
HTMLArea._removeEvents(this.editor._doc.body, ["mousedown", "click"], PopupDiv.checkPopup);
is_ie && this.modal && this.doc.body.releaseCapture();
if (typeof this.onClose == "function") {
this.onClose();
} else if (typeof this.onClose == "string") {
eval(this.onClose);
}
this.element.parentNode.removeChild(this.element);
};
PopupDiv.prototype.getForm = function() {
var forms = this.content.getElementsByTagName("form");
return (forms.length > 0) ? forms[0] : null;
};
PopupDiv.prototype.callHandler = function() {
var tags = ["input", "textarea", "select"];
var params = new Object();
for (var ti in tags) {
var tag = tags[ti];
var els = this.content.getElementsByTagName(tag);
for (var j = 0; j < els.length; ++j) {
var el = els[j];
params[el.name] = el.value;
}
}
this.handler(this, params);
return false;
};
PopupDiv.getAbsolutePos = function(el) {
var r = { x: el.offsetLeft, y: el.offsetTop };
if (el.offsetParent) {
var tmp = PopupDiv.getAbsolutePos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
};
PopupDiv.getWindowSize = function() {
if (window.innerHeight) {
return { y: window.innerHeight, x: window.innerWidth };
}
if (this.doc.body.clientHeight) {
return { y: this.doc.body.clientHeight, x: this.doc.body.clientWidth };
}
return { y: this.doc.documentElement.clientHeight, x: this.doc.documentElement.clientWidth };
};
PopupDiv.prototype.hideShowCovered = function () {
var self = this;
function isContained(el) {
while (el) {
if (el == self.element) {
return true;
}
el = el.parentNode;
}
return false;
};
var tags = new Array("applet", "select");
var el = this.element;
var p = PopupDiv.getAbsolutePos(el);
var EX1 = p.x;
var EX2 = el.offsetWidth + EX1;
var EY1 = p.y;
var EY2 = el.offsetHeight + EY1;
if (el.style.display == "none") {
EX1 = EX2 = EY1 = EY2 = 0;
}
for (var k = tags.length; k > 0; ) {
var ar = this.doc.getElementsByTagName(tags[--k]);
var cc = null;
for (var i = ar.length; i > 0;) {
cc = ar[--i];
if (isContained(cc)) {
cc.style.visibility = "visible";
continue;
}
p = PopupDiv.getAbsolutePos(cc);
var CX1 = p.x;
var CX2 = cc.offsetWidth + CX1;
var CY1 = p.y;
var CY2 = cc.offsetHeight + CY1;
if ((CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1)) {
cc.style.visibility = "visible";
} else {
cc.style.visibility = "hidden";
}
}
}
};
PopupDiv.prototype._dragStart = function (ev) {
if (this.dragging) {
return false;
}
this.dragging = true;
PopupDiv.currentPopup = this;
var posX = ev.clientX;
var posY = ev.clientY;
if (is_ie) {
posY += this.doc.body.scrollTop;
posX += this.doc.body.scrollLeft;
} else {
posY += window.scrollY;
posX += window.scrollX;
}
var st = this.element.style;
this.xOffs = posX - parseInt(st.left);
this.yOffs = posY - parseInt(st.top);
HTMLArea._addEvent(this.doc, "mousemove", PopupDiv.dragIt);
HTMLArea._addEvent(this.doc, "mouseover", HTMLArea._stopEvent);
HTMLArea._addEvent(this.doc, "mouseup", PopupDiv.dragEnd);
HTMLArea._stopEvent(ev);
};
PopupDiv.dragIt = function (ev) {
var popup = PopupDiv.currentPopup;
if (!(popup && popup.dragging)) {
return false;
}
is_ie && (ev = window.event);
var posX = ev.clientX;
var posY = ev.clientY;
if (is_ie) {
posY += this.doc.body.scrollTop;
posX += this.doc.body.scrollLeft;
} else {
posY += window.scrollY;
posX += window.scrollX;
}
popup.hideShowCovered();
var st = popup.element.style;
st.left = (posX - popup.xOffs) + "px";
st.top = (posY - popup.yOffs) + "px";
HTMLArea._stopEvent(ev);
};
PopupDiv.dragEnd = function () {
var popup = PopupDiv.currentPopup;
if (!popup) {
return false;
}
popup.dragging = false;
HTMLArea._removeEvent(popup.doc, "mouseup", PopupDiv.dragEnd);
HTMLArea._removeEvent(popup.doc, "mouseover", HTMLArea._stopEvent);
HTMLArea._removeEvent(popup.doc, "mousemove", PopupDiv.dragIt);
popup.hideShowCovered();
};
PopupDiv.checkPopup = function (ev) {
is_ie && (ev = window.event);
var el = is_ie ? ev.srcElement : ev.target;
var cp = PopupDiv.currentPopup;
for (; (el != null) && (el != cp.element); el = el.parentNode);
if (el == null) {
cp.modal || ev.type == "mouseover" || cp.close();
HTMLArea._stopEvent(ev);
}
};
PopupDiv.prototype.addButtons = function() {
var self = this;
var div = this.doc.createElement("div");
this.content.appendChild(div);
div.className = "buttons";
for (var i = 0; i < arguments.length; ++i) {
var btn = arguments[i];
var button = this.doc.createElement("button");
div.appendChild(button);
button.innerHTML = HTMLArea.I18N.buttons[btn];
switch (btn) {
case "ok":
button.onclick = function() {
self.callHandler();
self.close();
};
break;
case "cancel":
button.onclick = function() {
self.close();
};
break;
}
}
};
Index: htmlarea.js
===================================================================
RCS file: /cvsroot/php-blog/serendipity/htmlarea/htmlarea.js,v
retrieving revision 1.1.1.1
retrieving revision 1.2
diff -u -d -r1.1.1.1 -r1.2
--- htmlarea.js 28 Mar 2003 20:05:28 -0000 1.1.1.1
+++ htmlarea.js 23 Mar 2004 15:41:04 -0000 1.2
@@ -1,15 +1,31 @@
-//
-// htmlArea v3.0 - Copyright (c) 2002 interactivetools.com, inc.
+// htmlArea v3.0 - Copyright (c) 2002-2004 interactivetools.com, inc.
// This copyright notice MUST stay intact for use (see license.txt).
//
+// Portions (c) dynarch.com, 2003-2004
+//
// A free WYSIWYG editor replacement for <textarea> fields.
// For full source code and docs, visit http://www.interactivetools.com/
//
-// Version 3.0 developed by Mihai Bazon for InteractiveTools.
[...2300 lines suppressed...]
+
+/**
+ * FIX: Internet Explorer returns an item having the _name_ equal to the given
+ * id, even if it's not having any id. This way it can return a different form
+ * field even if it's not a textarea. This workarounds the problem by
+ * specifically looking to search only elements having a certain tag name.
+ */
+HTMLArea.getElementById = function(tag, id) {
+ var el, i, objs = document.getElementsByTagName(tag);
+ for (i = objs.length; --i >= 0 && (el = objs[i]);)
+ if (el.id == id)
+ return el;
+ return null;
};
+
+
// EOF
// Local variables: //
// c-basic-offset:8 //
--- NEW FILE: reference.html ---
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTMLArea-3.0 Reference</title>
<style type="text/css">
@import url(htmlarea.css);
body { font: 14px verdana,sans-serif; background: #fff; color: #000; }
h1, h2 { font-family:tahoma,sans-serif; }
h1 { border-bottom: 2px solid #000; }
h2 { border-bottom: 1px solid #aaa; }
h3, h4 { margin-bottom: 0px; font-family: Georgia,serif; font-style: italic; }
h4 { font-size: 90%; margin-left: 1em; }
acronym { border-bottom: 1px dotted #063; color: #063; }
p { margin-left: 2em; margin-top: 0.3em; }
li p { margin-left: 0px; }
.abstract { padding: 5px; margin: 0px 10em; font-size: 90%; border: 1px dashed #aaa; background: #eee;}
li { margin-left: 2em; }
em { color: #042; }
a { color: #00f; }
a:hover { color: #f00; }
a:active { color: #f80; }
span.browser { font-weight: bold; color: #864; }
.fixme { font-size: 20px; font-weight: bold; color: red; background: #fab;
padding: 5px; text-align: center; }
.code {
background: #e4efff; padding: 5px; border: 1px dashed #abc; margin-left: 2em; margin-right: 2em;
font-family: fixed,"lucidux mono","andale mono","courier new",monospace;
}
.note, .warning { font-weight: bold; color: #0a0; font-variant: small-caps; }
.warning { color: #a00; }
.string {
color: #06c;
} /* font-lock-string-face */
.comment {
color: #840;
} /* font-lock-comment-face */
.variable-name {
color: #000;
} /* font-lock-variable-name-face */
.type {
color: #008;
font-weight: bold;
} /* font-lock-type-face */
.reference {
color: #048;
} /* font-lock-reference-face */
.preprocessor {
color: #808;
} /* font-lock-preprocessor-face */
.keyword {
color: #00f;
font-weight: bold;
} /* font-lock-keyword-face */
.function-name {
color: #044;
} /* font-lock-function-name-face */
.html-tag {
font-weight: bold;
} /* html-tag-face */
.html-helper-italic {
font-style: italic;
} /* html-helper-italic-face */
.html-helper-bold {
font-weight: bold;
} /* html-helper-bold-face */
</style>
<script type="text/javascript">
_editor_url = './';
_editor_lang = 'en';
</script>
<script type="text/javascript" src="htmlarea.js"></script>
<script type="text/javascript" src="dialog.js"></script>
<script tyle="text/javascript" src="lang/en.js"></script>
</head>
<body onload="HTMLArea.replace('TA')">
<h1>HTMLArea-3.0 Documentation</h1>
<div class="abstract" style="color: red; font-weight: bold">
This documentation contains valid information, but is outdated in the
terms that it does not covers all the features of HTMLArea. A new
documentation project will be started, based on LaTeX.
</div>
<h2>Introduction</h2>
<h3>What is HTMLArea?</h3>
<p>HTMLArea is a free <acronym title="What You See Is What You Get"
>WYSIWYG</acronym> editor replacement for <code><textarea></code>
fields. By adding a few simple lines of JavaScript code to your web page
you can replace a regular textarea with a rich text editor that lets your
users do the following:</p>
<ul>
<li>Format text to be bold, italicized, or underlined.</li>
<li>Change the face, size, style and color.</li>
<li>Left, center, 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>Generates clean, valid HTML.</li>
<li>It degrades gracefully to 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 server-side languages (ASP, PHP, Perl, Java,
etc).</li>
<li>It's written in 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>
<h3>Is it really free? What's the catch?</h3>
<p>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.</p>
<h3>What are the browser requirements?</h3>
<p>HTMLArea requires <span class="browser"><a
href="http://www.microsoft.com/ie">Internet Explorer</a> >= 5.5</span>
(Windows only), or <span class="browser"><a
href="http://mozilla.org">Mozilla</a> >= 1.3-Beta</span> on any platform.
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
Mozilla-1.3-Beta (for example, <a
href="http://galeon.sf.net">Galeon-1.2.8</a>). However, it degrades
gracefully to other browsers. They will get a regular textarea field
instead of a WYSIWYG editor.</p>
<h3>Can I see an example of what it looks like?</h3>
<p>Just make sure you're using one of the browsers mentioned above and see
below.</p>
<form onsubmit="return false;">
<textarea id="TA" style="width: 100%; height: 15em;">
<p>Here is some sample text in textarea that's 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>
<p align="center"><font size="4" color="#ff0000"><b><u>Try HTMLArea
today!</u></b></font><br /></p>
</textarea>
</form>
<h3>Where can I find out more info, download the latest version and talk to
other HTMLArea users?</h3>
<p>You can find out more about HTMLArea and download the latest version on
the <a href="http://dynarch.com/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/iforum/Open_Source_C3/htmlArea_v3.0_-_Alpha_Release_F14/"
>HTMLArea forum</a>.</p>
<h2>Keyboard shortcuts</h2>
<p>The editor provides the following key combinations:</p>
<ul>
<li>CTRL-A -- select all</li>
<li>CTRL-B -- bold</li>
<li>CTRL-I -- italic</li>
<li>CTRL-U -- underline</li>
<li>CTRL-S -- strikethrough</li>
<li>CTRL-L -- justify left</li>
<li>CTRL-E -- justify center</li>
<li>CTRL-R -- justify right</li>
<li>CTRL-J -- justify full</li>
<li>CTRL-1 .. CTRL-6 -- headings (<h1> .. <h6>)</li>
<li>CTRL-0 (zero) -- clean content pasted from Word</li>
</ul>
<h2>Installation</h2>
<h3>How do I add HTMLArea to my web page?</h3>
<p>It's easy. First you need to upload 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/examples/core.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>Define some global variables. "_editor_url" has to be the absolute
URL where HTMLArea resides within your
website; as we discussed, this would be â/htmlarea/â. "_editor_lang" must
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
the "lang" subdirectory in the distribution.
<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="function-name">></span>
_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 "htmlarea.js" script:
<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/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><p>If you want to change all your <textarea>-s into
HTMLArea-s then you can use the simplest way to create HTMLArea:</p>
<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">defer=</span><span class="string">"1"</span><span class="function-name">></span>
HTMLArea.replaceAll<span class="function-name">()</span>;
<span class="paren-face-match"><</span><span class="html-tag">/script</span><span class="paren-face-match">></span></pre>
<p><span class="note">Note:</span> you can also add the
<code>HTMLArea.replaceAll()</code> code to the <code>onload</code>
event handler for the <code>body</code> element, if you find it more appropriate.</p>
<p>A different approach, if you have more than one textarea and only want
to change one of them, is to use <code>HTMLArea.replace("id")</code> --
pass the <code>id</code> of your textarea. Do not use the
<code>name</code> attribute anymore, it's not a standard solution!</p>
</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>
<p>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:</p>
<pre class="code"
><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
</span> <span class="comment">// having all the default values
</span>config.width = '<span class="string">90%</span>';
config.height = '<span class="string">200px</span>';
<span class="comment">// the following sets a style for the page body (black text on yellow page)
// and makes all paragraphs be bold by default
</span>config.pageStyle =
'<span class="string">body { background-color: yellow; color: black; font-family: verdana,sans-serif } </span>' +
'<span class="string">p { font-width: bold; } </span>';
<span class="comment">// the following replaces the textarea with the given id with a new
// HTMLArea object having the specified configuration
</span>HTMLArea.replace('<span class="string">id</span>', config);</pre>
<p><span class="warning">Important:</span> It's recommended that you add
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 less
trouble upgrading it.</p>
<h3>How do I customize the toolbar?</h3>
<p>Using the configuration object introduced above allows you to completely
control what the toolbar contains. Following is an example of a one-line,
customized toolbar, much simpler than the default one:</p>
<pre class="code"
><span class="keyword">var</span> <span class="variable-name">config</span> = <span class="keyword">new</span> HTMLArea.Config();
config.toolbar = [
['<span class="string">fontname</span>', '<span class="string">space</span>',
'<span class="string">fontsize</span>', '<span class="string">space</span>',
'<span class="string">formatblock</span>', '<span class="string">space</span>',
'<span class="string">bold</span>', '<span class="string">italic</span>', '<span class="string">underline</span>']
];
HTMLArea.replace('<span class="string">id</span>', config);</pre>
<p>The toolbar is an Array of Array objects. Each array in the toolbar
defines a new line. The default toolbar looks like this:</p>
<pre class="code"
>config.toolbar = [
[ "<span class="string">fontname</span>", "<span class="string">space</span>",
"<span class="string">fontsize</span>", "<span class="string">space</span>",
"<span class="string">formatblock</span>", "<span class="string">space</span>",
"<span class="string">bold</span>", "<span class="string">italic</span>", "<span class="string">underline</span>", "<span class="string">separator</span>",
"<span class="string">strikethrough</span>", "<span class="string">subscript</span>", "<span class="string">superscript</span>", "<span class="string">separator</span>",
"<span class="string">copy</span>", "<span class="string">cut</span>", "<span class="string">paste</span>", "<span class="string">space</span>", "<span class="string">undo</span>", "<span class="string">redo</span>" ],
[ "<span class="string">justifyleft</span>", "<span class="string">justifycenter</span>", "<span class="string">justifyright</span>", "<span class="string">justifyfull</span>", "<span class="string">separator</span>",
"<span class="string">insertorderedlist</span>", "<span class="string">insertunorderedlist</span>", "<span class="string">outdent</span>", "<span class="string">indent</span>", "<span class="string">separator</span>",
"<span class="string">forecolor</span>", "<span class="string">hilitecolor</span>", "<span class="string">textindicator</span>", "<span class="string">separator</span>",
"<span class="string">inserthorizontalrule</span>", "<span class="string">createlink</span>", "<span class="string">insertimage</span>", "<span class="string">inserttable</span>", "<span class="string">htmlmode</span>", "<span class="string">separator</span>",
"<span class="string">popupeditor</span>", "<span class="string">separator</span>", "<span class="string">showhelp</span>", "<span class="string">about</span>" ]
];</pre>
<p>Except three strings, all others in the examples above need to be defined
in the <code>config.btnList</code> object (detailed a bit later in this
document). The three exceptions are: 'space', 'separator' and 'linebreak'.
These three have the following meaning, and need not be present in
<code>btnList</code>:</p>
<ul>
<li>'space' -- Inserts a space of 5 pixels (the width is configurable by external
<acronym title="Cascading Style Sheets">CSS</acronym>) at the current
position in the toolbar.</li>
<li>'separator' -- Inserts a small vertical separator, for visually grouping related
buttons.</li>
<li>'linebreak' -- Starts a new line in the toolbar. Subsequent controls will be
inserted on the new line.</li>
</ul>
<p><span class="warning">Important:</span> It's recommended that you add
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 less
trouble upgrading it.</p>
<h3>How do I create custom buttons?</h3>
<p>By design, the toolbar is easily extensible. For adding a custom button
one needs to follow two steps.</p>
<h4 id="regbtn">1. Register the button in <code>config.btnList</code>.</h4>
<p>For each button in the toolbar, HTMLArea needs to know the following
information:</p>
<ul>
<li>a name for it (we call it the ID of the button);</li>
<li>the path to an image to be displayed in the toolbar;</li>
<li>a tooltip for it;</li>
<li>whether the button is enabled or not in text mode;</li>
<li>what to do when the button is clicked;</li>
</ul>
<p>You need to provide all this information for registering a new button
too. The button ID can be any string identifier and it's used when
defining the toolbar, as you saw above. We recommend starting
it with "my-" so that it won't clash with the standard ID-s (those from
the default toolbar).</p>
<p class="note">Register button example #1</p>
<pre class="code"
><span class="comment">// get a default configuration
</span><span class="keyword">var</span> <span class="variable-name">config</span> = <span class="keyword">new</span> HTMLArea.Config();
<span class="comment">// register the new button using Config.registerButton.
// parameters: button ID, tooltip, image, textMode,
</span>config.registerButton("<span class="string">my-hilite</span>", "<span class="string">Highlight text</span>", "<span class="string">my-hilite.gif</span>", <span class="keyword">false</span>,
<span class="comment">// function that gets called when the button is clicked
</span> <span class="keyword">function</span>(editor, id) {
editor.surroundHTML('<span class="string"><span class="hilite"></span>', '<span class="string"></span></span>');
}
);</pre>
<p>An alternate way of calling registerButton is exemplified above. Though
the code might be a little bit larger, using this form makes your code more
maintainable. It doesn't even needs comments as it's pretty clear.</p>
<p class="note">Register button example #2</p>
<pre class="code"
><span class="keyword">var</span> <span class="variable-name">config</span> = <span class="keyword">new</span> HTMLArea.Config();
config.registerButton({
id : "<span class="string">my-hilite</span>",
tooltip : "<span class="string">Highlight text</span>",
image : "<span class="string">my-hilite.gif</span>",
textMode : <span class="keyword">false</span>,
action : <span class="keyword">function</span>(editor, id) {
editor.surroundHTML('<span class="string"><span class="hilite"></span>', '<span class="string"></span></span>');
}
});</pre>
<p>You might notice that the "action" function receives two parameters:
<b>editor</b> and <b>id</b>. In the examples above we only used the
<b>editor</b> parameter. But it could be helpful for you to understand
both:</p>
<ul>
<li><b>editor</b> is a reference to the HTMLArea object. Since our entire
code now has an <acronym title="Object Oriented Programming">OOP</acronym>-like
design, you need to have a reference to
the editor object in order to do things with it. In previous versions of
HTMLArea, in order to identify the object an ID was used -- the ID of the
HTML element. In this version ID-s are no longer necessary.</li>
<li><b>id</b> is the button ID. Wondering why is this useful? Well, you
could use the same handler function (presuming that it's not an anonymous
function like in the examples above) for more buttons. You can <a
href="#btnex">see an example</a> a bit later in this document.</li>
</ul>
<h4>2. Inserting it into the toolbar</h4>
<p>At this step you need to specify where in the toolbar to insert the
button, or just create the whole toolbar again as you saw in the previous
section. You use the button ID, as shown in the examples of customizing the
toolbar in the previous section.</p>
<p>For the sake of completion, following there are another examples.</p>
<p class="note">Append your button to the default toolbar</p>
<pre class="code"
>config.toolbar.push([ "<span class="string">my-hilite</span>" ]);</pre>
<p class="note">Customized toolbar</p>
<pre class="code"
>config.toolbar = [
['<span class="string">fontname</span>', '<span class="string">space</span>',
'<span class="string...
[truncated message content] |