Project

General

Profile

1 4 ryan
// htmlArea v3.0 - Copyright (c) 2002-2004 interactivetools.com, inc.
2
// This copyright notice MUST stay intact for use (see license.txt).
3
//
4
// Portions (c) dynarch.com, 2003-2004
5
//
6
// A free WYSIWYG editor replacement for <textarea> fields.
7
// For full source code and docs, visit http://www.interactivetools.com/
8
//
9
// Version 3.0 developed by Mihai Bazon.
10
//   http://dynarch.com/mishoo
11
//
12
// $Id: htmlarea.js,v 1.1.1.1 2005/01/30 10:30:55 rdjurovich Exp $
13
14
if (typeof _editor_url == "string") {
15
	// Leave exactly one backslash at the end of _editor_url
16
	_editor_url = _editor_url.replace(/\x2f*$/, '/');
17
} else {
18
	alert("WARNING: _editor_url is not set!  You should set this variable to the editor files path; it should preferably be an absolute path, like in '/htmlarea', but it can be relative if you prefer.  Further we will try to load the editor files correctly but we'll probably fail.");
19
	_editor_url = '';
20
}
21
22
// make sure we have a language
23
if (typeof _editor_lang == "string") {
24
	_editor_lang = _editor_lang.toLowerCase();
25
} else {
26
	_editor_lang = "en";
27
}
28
29
// Creates a new HTMLArea object.  Tries to replace the textarea with the given
30
// ID with it.
31
function HTMLArea(textarea, config) {
32
	if (HTMLArea.checkSupportedBrowser()) {
33
		if (typeof config == "undefined") {
34
			this.config = new HTMLArea.Config();
35
		} else {
36
			this.config = config;
37
		}
38
		this._htmlArea = null;
39
		this._textArea = textarea;
40
		this._editMode = "wysiwyg";
41
		this.plugins = {};
42
		this._timerToolbar = null;
43
		this._timerUndo = null;
44
		this._undoQueue = new Array(this.config.undoSteps);
45
		this._undoPos = -1;
46
		this._customUndo = false;
47
		this._mdoc = document; // cache the document, we need it in plugins
48
		this.doctype = '';
49
	}
50
};
51
52
// load some scripts
53
(function() {
54
	var scripts = HTMLArea._scripts = [ _editor_url + "htmlarea.js",
55
					    _editor_url + "dialog.js",
56
					    _editor_url + "popupwin.js",
57
					    _editor_url + "lang/" + _editor_lang + ".js" ];
58
	var head = document.getElementsByTagName("head")[0];
59
	// start from 1, htmlarea.js is already loaded
60
	for (var i = 1; i < scripts.length; ++i) {
61
		var script = document.createElement("script");
62
		script.src = scripts[i];
63
		head.appendChild(script);
64
	}
65
})();
66
67
// cache some regexps
68
HTMLArea.RE_tagName = /(<\/|<)\s*([^ \t\n>]+)/ig;
69
HTMLArea.RE_doctype = /(<!doctype((.|\n)*?)>)\n?/i;
70
HTMLArea.RE_head    = /<head>((.|\n)*?)<\/head>/i;
71
HTMLArea.RE_body    = /<body>((.|\n)*?)<\/body>/i;
72
73
HTMLArea.Config = function () {
74
	this.version = "3.0";
75
76
	this.width = "auto";
77
	this.height = "auto";
78
79
	// enable creation of a status bar?
80
	this.statusBar = true;
81
82
	// maximum size of the undo queue
83
	this.undoSteps = 20;
84
85
	// the time interval at which undo samples are taken
86
	this.undoTimeout = 500;	// 1/2 sec.
87
88
	// the next parameter specifies whether the toolbar should be included
89
	// in the size or not.
90
	this.sizeIncludesToolbar = true;
91
92
	// if true then HTMLArea will retrieve the full HTML, starting with the
93
	// <HTML> tag.
94
	this.fullPage = false;
95
96
	// style included in the iframe document
97
	this.pageStyle = "";
98
99
	// set to true if you want Word code to be cleaned upon Paste
100
	this.killWordOnPaste = false;
101
102
	// BaseURL included in the iframe document
103
	this.baseURL = document.baseURI || document.URL;
104
	if (this.baseURL && this.baseURL.match(/(.*)\/([^\/]+)/))
105
		this.baseURL = RegExp.$1 + "/";
106
107
	// URL-s
108
	this.imgURL = "images/";
109
	this.popupURL = "popups/";
110
111
	/** CUSTOMIZING THE TOOLBAR
112
	 * -------------------------
113
	 *
114
	 * It is recommended that you customize the toolbar contents in an
115
	 * external file (i.e. the one calling HTMLArea) and leave this one
116
	 * unchanged.  That's because when we (InteractiveTools.com) release a
117
	 * new official version, it's less likely that you will have problems
118
	 * upgrading HTMLArea.
119
	 */
120
	this.toolbar = [
121
		[ "fontname", "space",
122
		  "fontsize", "space",
123
		  "formatblock", "space",
124
		  "bold", "italic", "underline", "strikethrough", "separator",
125
		  "subscript", "superscript", "separator",
126
		  "copy", "cut", "paste", "space", "undo", "redo" ],
127
128
		[ "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator",
129
		  "lefttoright", "righttoleft", "separator",
130
		  "insertorderedlist", "insertunorderedlist", "outdent", "indent", "separator",
131
		  "forecolor", "hilitecolor", "separator",
132
		  "inserthorizontalrule", "createlink", "insertimage", "inserttable", "htmlmode", "separator",
133
		  "popupeditor", "separator", "showhelp", "about" ]
134
	];
135
136
	this.fontname = {
137
		"Arial":	   'arial,helvetica,sans-serif',
138
		"Courier New":	   'courier new,courier,monospace',
139
		"Georgia":	   'georgia,times new roman,times,serif',
140
		"Tahoma":	   'tahoma,arial,helvetica,sans-serif',
141
		"Times New Roman": 'times new roman,times,serif',
142
		"Verdana":	   'verdana,arial,helvetica,sans-serif',
143
		"impact":	   'impact',
144
		"WingDings":	   'wingdings'
145
	};
146
147
	this.fontsize = {
148
		"1 (8 pt)":  "1",
149
		"2 (10 pt)": "2",
150
		"3 (12 pt)": "3",
151
		"4 (14 pt)": "4",
152
		"5 (18 pt)": "5",
153
		"6 (24 pt)": "6",
154
		"7 (36 pt)": "7"
155
	};
156
157
	this.formatblock = {
158
		"Heading 1": "h1",
159
		"Heading 2": "h2",
160
		"Heading 3": "h3",
161
		"Heading 4": "h4",
162
		"Heading 5": "h5",
163
		"Heading 6": "h6",
164
		"Normal": "p",
165
		"Address": "address",
166
		"Formatted": "pre"
167
	};
168
169
	this.customSelects = {};
170
171
	function cut_copy_paste(e, cmd, obj) {
172
		e.execCommand(cmd);
173
	};
174
175
	// ADDING CUSTOM BUTTONS: please read below!
176
	// format of the btnList elements is "ID: [ ToolTip, Icon, Enabled in text mode?, ACTION ]"
177
	//    - ID: unique ID for the button.  If the button calls document.execCommand
178
	//	    it's wise to give it the same name as the called command.
179
	//    - ACTION: function that gets called when the button is clicked.
180
	//              it has the following prototype:
181
	//                 function(editor, buttonName)
182
	//              - editor is the HTMLArea object that triggered the call
183
	//              - buttonName is the ID of the clicked button
184
	//              These 2 parameters makes it possible for you to use the same
185
	//              handler for more HTMLArea objects or for more different buttons.
186
	//    - ToolTip: default tooltip, for cases when it is not defined in the -lang- file (HTMLArea.I18N)
187
	//    - Icon: path to an icon image file for the button (TODO: use one image for all buttons!)
188
	//    - Enabled in text mode: if false the button gets disabled for text-only mode; otherwise enabled all the time.
189
	this.btnList = {
190
		bold: [ "Bold", "ed_format_bold.gif", false, function(e) {e.execCommand("bold");} ],
191
		italic: [ "Italic", "ed_format_italic.gif", false, function(e) {e.execCommand("italic");} ],
192
		underline: [ "Underline", "ed_format_underline.gif", false, function(e) {e.execCommand("underline");} ],
193
		strikethrough: [ "Strikethrough", "ed_format_strike.gif", false, function(e) {e.execCommand("strikethrough");} ],
194
		subscript: [ "Subscript", "ed_format_sub.gif", false, function(e) {e.execCommand("subscript");} ],
195
		superscript: [ "Superscript", "ed_format_sup.gif", false, function(e) {e.execCommand("superscript");} ],
196
		justifyleft: [ "Justify Left", "ed_align_left.gif", false, function(e) {e.execCommand("justifyleft");} ],
197
		justifycenter: [ "Justify Center", "ed_align_center.gif", false, function(e) {e.execCommand("justifycenter");} ],
198
		justifyright: [ "Justify Right", "ed_align_right.gif", false, function(e) {e.execCommand("justifyright");} ],
199
		justifyfull: [ "Justify Full", "ed_align_justify.gif", false, function(e) {e.execCommand("justifyfull");} ],
200
		insertorderedlist: [ "Ordered List", "ed_list_num.gif", false, function(e) {e.execCommand("insertorderedlist");} ],
201
		insertunorderedlist: [ "Bulleted List", "ed_list_bullet.gif", false, function(e) {e.execCommand("insertunorderedlist");} ],
202
		outdent: [ "Decrease Indent", "ed_indent_less.gif", false, function(e) {e.execCommand("outdent");} ],
203
		indent: [ "Increase Indent", "ed_indent_more.gif", false, function(e) {e.execCommand("indent");} ],
204
		forecolor: [ "Font Color", "ed_color_fg.gif", false, function(e) {e.execCommand("forecolor");} ],
205
		hilitecolor: [ "Background Color", "ed_color_bg.gif", false, function(e) {e.execCommand("hilitecolor");} ],
206
		inserthorizontalrule: [ "Horizontal Rule", "ed_hr.gif", false, function(e) {e.execCommand("inserthorizontalrule");} ],
207
		createlink: [ "Insert Web Link", "ed_link.gif", false, function(e) {e.execCommand("createlink", true);} ],
208
		insertimage: [ "Insert/Modify Image", "ed_image.gif", false, function(e) {e.execCommand("insertimage");} ],
209
		inserttable: [ "Insert Table", "insert_table.gif", false, function(e) {e.execCommand("inserttable");} ],
210
		htmlmode: [ "Toggle HTML Source", "ed_html.gif", true, function(e) {e.execCommand("htmlmode");} ],
211
		popupeditor: [ "Enlarge Editor", "fullscreen_maximize.gif", true, function(e) {e.execCommand("popupeditor");} ],
212
		about: [ "About this editor", "ed_about.gif", true, function(e) {e.execCommand("about");} ],
213
		showhelp: [ "Help using editor", "ed_help.gif", true, function(e) {e.execCommand("showhelp");} ],
214
		undo: [ "Undoes your last action", "ed_undo.gif", false, function(e) {e.execCommand("undo");} ],
215
		redo: [ "Redoes your last action", "ed_redo.gif", false, function(e) {e.execCommand("redo");} ],
216
		cut: [ "Cut selection", "ed_cut.gif", false, cut_copy_paste ],
217
		copy: [ "Copy selection", "ed_copy.gif", false, cut_copy_paste ],
218
		paste: [ "Paste from clipboard", "ed_paste.gif", false, cut_copy_paste ],
219
		lefttoright: [ "Direction left to right", "ed_left_to_right.gif", false, function(e) {e.execCommand("lefttoright");} ],
220
		righttoleft: [ "Direction right to left", "ed_right_to_left.gif", false, function(e) {e.execCommand("righttoleft");} ]
221
	};
222
	/* ADDING CUSTOM BUTTONS
223
	 * ---------------------
224
	 *
225
	 * It is recommended that you add the custom buttons in an external
226
	 * file and leave this one unchanged.  That's because when we
227
	 * (InteractiveTools.com) release a new official version, it's less
228
	 * likely that you will have problems upgrading HTMLArea.
229
	 *
230
	 * Example on how to add a custom button when you construct the HTMLArea:
231
	 *
232
	 *   var editor = new HTMLArea("your_text_area_id");
233
	 *   var cfg = editor.config; // this is the default configuration
234
	 *   cfg.btnList["my-hilite"] =
235
	 *	[ function(editor) { editor.surroundHTML('<span style="background:yellow">', '</span>'); }, // action
236
	 *	  "Highlight selection", // tooltip
237
	 *	  "my_hilite.gif", // image
238
	 *	  false // disabled in text mode
239
	 *	];
240
	 *   cfg.toolbar.push(["linebreak", "my-hilite"]); // add the new button to the toolbar
241
	 *
242
	 * An alternate (also more convenient and recommended) way to
243
	 * accomplish this is to use the registerButton function below.
244
	 */
245
	// initialize tooltips from the I18N module and generate correct image path
246
	for (var i in this.btnList) {
247
		var btn = this.btnList[i];
248
		btn[1] = _editor_url + this.imgURL + btn[1];
249
		if (typeof HTMLArea.I18N.tooltips[i] != "undefined") {
250
			btn[0] = HTMLArea.I18N.tooltips[i];
251
		}
252
	}
253
};
254
255
/** Helper function: register a new button with the configuration.  It can be
256
 * called with all 5 arguments, or with only one (first one).  When called with
257
 * only one argument it must be an object with the following properties: id,
258
 * tooltip, image, textMode, action.  Examples:
259
 *
260
 * 1. config.registerButton("my-hilite", "Hilite text", "my-hilite.gif", false, function(editor) {...});
261
 * 2. config.registerButton({
262
 *      id       : "my-hilite",      // the ID of your button
263
 *      tooltip  : "Hilite text",    // the tooltip
264
 *      image    : "my-hilite.gif",  // image to be displayed in the toolbar
265
 *      textMode : false,            // disabled in text mode
266
 *      action   : function(editor) { // called when the button is clicked
267
 *                   editor.surroundHTML('<span class="hilite">', '</span>');
268
 *                 },
269
 *      context  : "p"               // will be disabled if outside a <p> element
270
 *    });
271
 */
272
HTMLArea.Config.prototype.registerButton = function(id, tooltip, image, textMode, action, context) {
273
	var the_id;
274
	if (typeof id == "string") {
275
		the_id = id;
276
	} else if (typeof id == "object") {
277
		the_id = id.id;
278
	} else {
279
		alert("ERROR [HTMLArea.Config::registerButton]:\ninvalid arguments");
280
		return false;
281
	}
282
	// check for existing id
283
	if (typeof this.customSelects[the_id] != "undefined") {
284
		// alert("WARNING [HTMLArea.Config::registerDropdown]:\nA dropdown with the same ID already exists.");
285
	}
286
	if (typeof this.btnList[the_id] != "undefined") {
287
		// alert("WARNING [HTMLArea.Config::registerDropdown]:\nA button with the same ID already exists.");
288
	}
289
	switch (typeof id) {
290
	    case "string": this.btnList[id] = [ tooltip, image, textMode, action, context ]; break;
291
	    case "object": this.btnList[id.id] = [ id.tooltip, id.image, id.textMode, id.action, id.context ]; break;
292
	}
293
};
294
295
/** The following helper function registers a dropdown box with the editor
296
 * configuration.  You still have to add it to the toolbar, same as with the
297
 * buttons.  Call it like this:
298
 *
299
 * FIXME: add example
300
 */
301
HTMLArea.Config.prototype.registerDropdown = function(object) {
302
	// check for existing id
303
	if (typeof this.customSelects[object.id] != "undefined") {
304
		// alert("WARNING [HTMLArea.Config::registerDropdown]:\nA dropdown with the same ID already exists.");
305
	}
306
	if (typeof this.btnList[object.id] != "undefined") {
307
		// alert("WARNING [HTMLArea.Config::registerDropdown]:\nA button with the same ID already exists.");
308
	}
309
	this.customSelects[object.id] = object;
310
};
311
312
/** Call this function to remove some buttons/drop-down boxes from the toolbar.
313
 * Pass as the only parameter a string containing button/drop-down names
314
 * delimited by spaces.  Note that the string should also begin with a space
315
 * and end with a space.  Example:
316
 *
317
 *   config.hideSomeButtons(" fontname fontsize textindicator ");
318
 *
319
 * It's useful because it's easier to remove stuff from the defaul toolbar than
320
 * create a brand new toolbar ;-)
321
 */
322
HTMLArea.Config.prototype.hideSomeButtons = function(remove) {
323
	var toolbar = this.toolbar;
324
	for (var i in toolbar) {
325
		var line = toolbar[i];
326
		for (var j = line.length; --j >= 0; ) {
327
			if (remove.indexOf(" " + line[j] + " ") >= 0) {
328
				var len = 1;
329
				if (/separator|space/.test(line[j + 1])) {
330
					len = 2;
331
				}
332
				line.splice(j, len);
333
			}
334
		}
335
	}
336
};
337
338
/** Helper function: replace all TEXTAREA-s in the document with HTMLArea-s. */
339
HTMLArea.replaceAll = function(config) {
340
	var tas = document.getElementsByTagName("textarea");
341
	for (var i = tas.length; i > 0; (new HTMLArea(tas[--i], config)).generate());
342
};
343
344
/** Helper function: replaces the TEXTAREA with the given ID with HTMLArea. */
345
HTMLArea.replace = function(id, config) {
346
	var ta = HTMLArea.getElementById("textarea", id);
347
	return ta ? (new HTMLArea(ta, config)).generate() : null;
348
};
349
350
// Creates the toolbar and appends it to the _htmlarea
351
HTMLArea.prototype._createToolbar = function () {
352
	var editor = this;	// to access this in nested functions
353
354
	var toolbar = document.createElement("div");
355
	this._toolbar = toolbar;
356
	toolbar.className = "toolbar";
357
	toolbar.unselectable = "1";
358
	var tb_row = null;
359
	var tb_objects = new Object();
360
	this._toolbarObjects = tb_objects;
361
362
	// creates a new line in the toolbar
363
	function newLine() {
364
		var table = document.createElement("table");
365
		table.border = "0px";
366
		table.cellSpacing = "0px";
367
		table.cellPadding = "0px";
368
		toolbar.appendChild(table);
369
		// TBODY is required for IE, otherwise you don't see anything
370
		// in the TABLE.
371
		var tb_body = document.createElement("tbody");
372
		table.appendChild(tb_body);
373
		tb_row = document.createElement("tr");
374
		tb_body.appendChild(tb_row);
375
	}; // END of function: newLine
376
	// init first line
377
	newLine();
378
379
	// updates the state of a toolbar element.  This function is member of
380
	// a toolbar element object (unnamed objects created by createButton or
381
	// createSelect functions below).
382
	function setButtonStatus(id, newval) {
383
		var oldval = this[id];
384
		var el = this.element;
385
		if (oldval != newval) {
386
			switch (id) {
387
			    case "enabled":
388
				if (newval) {
389
					HTMLArea._removeClass(el, "buttonDisabled");
390
					el.disabled = false;
391
				} else {
392
					HTMLArea._addClass(el, "buttonDisabled");
393
					el.disabled = true;
394
				}
395
				break;
396
			    case "active":
397
				if (newval) {
398
					HTMLArea._addClass(el, "buttonPressed");
399
				} else {
400
					HTMLArea._removeClass(el, "buttonPressed");
401
				}
402
				break;
403
			}
404
			this[id] = newval;
405
		}
406
	}; // END of function: setButtonStatus
407
408
	// this function will handle creation of combo boxes.  Receives as
409
	// parameter the name of a button as defined in the toolBar config.
410
	// This function is called from createButton, above, if the given "txt"
411
	// doesn't match a button.
412
	function createSelect(txt) {
413
		var options = null;
414
		var el = null;
415
		var cmd = null;
416
		var customSelects = editor.config.customSelects;
417
		var context = null;
418
		switch (txt) {
419
		    case "fontsize":
420
		    case "fontname":
421
		    case "formatblock":
422
			// the following line retrieves the correct
423
			// configuration option because the variable name
424
			// inside the Config object is named the same as the
425
			// button/select in the toolbar.  For instance, if txt
426
			// == "formatblock" we retrieve config.formatblock (or
427
			// a different way to write it in JS is
428
			// config["formatblock"].
429
			options = editor.config[txt];
430
			cmd = txt;
431
			break;
432
		    default:
433
			// try to fetch it from the list of registered selects
434
			cmd = txt;
435
			var dropdown = customSelects[cmd];
436
			if (typeof dropdown != "undefined") {
437
				options = dropdown.options;
438
				context = dropdown.context;
439
			} else {
440
				alert("ERROR [createSelect]:\nCan't find the requested dropdown definition");
441
			}
442
			break;
443
		}
444
		if (options) {
445
			el = document.createElement("select");
446
			var obj = {
447
				name	: txt, // field name
448
				element : el,	// the UI element (SELECT)
449
				enabled : true, // is it enabled?
450
				text	: false, // enabled in text mode?
451
				cmd	: cmd, // command ID
452
				state	: setButtonStatus, // for changing state
453
				context : context
454
			};
455
			tb_objects[txt] = obj;
456
			for (var i in options) {
457
				var op = document.createElement("option");
458
				op.appendChild(document.createTextNode(i));
459
				op.value = options[i];
460
				el.appendChild(op);
461
			}
462
			HTMLArea._addEvent(el, "change", function () {
463
				editor._comboSelected(el, txt);
464
			});
465
		}
466
		return el;
467
	}; // END of function: createSelect
468
469
	// appends a new button to toolbar
470
	function createButton(txt) {
471
		// the element that will be created
472
		var el = null;
473
		var btn = null;
474
		switch (txt) {
475
		    case "separator":
476
			el = document.createElement("div");
477
			el.className = "separator";
478
			break;
479
		    case "space":
480
			el = document.createElement("div");
481
			el.className = "space";
482
			break;
483
		    case "linebreak":
484
			newLine();
485
			return false;
486
		    case "textindicator":
487
			el = document.createElement("div");
488
			el.appendChild(document.createTextNode("A"));
489
			el.className = "indicator";
490
			el.title = HTMLArea.I18N.tooltips.textindicator;
491
			var obj = {
492
				name	: txt, // the button name (i.e. 'bold')
493
				element : el, // the UI element (DIV)
494
				enabled : true, // is it enabled?
495
				active	: false, // is it pressed?
496
				text	: false, // enabled in text mode?
497
				cmd	: "textindicator", // the command ID
498
				state	: setButtonStatus // for changing state
499
			};
500
			tb_objects[txt] = obj;
501
			break;
502
		    default:
503
			btn = editor.config.btnList[txt];
504
		}
505
		if (!el && btn) {
506
			el = document.createElement("div");
507
			el.title = btn[0];
508
			el.className = "button";
509
			// let's just pretend we have a button object, and
510
			// assign all the needed information to it.
511
			var obj = {
512
				name	: txt, // the button name (i.e. 'bold')
513
				element : el, // the UI element (DIV)
514
				enabled : true, // is it enabled?
515
				active	: false, // is it pressed?
516
				text	: btn[2], // enabled in text mode?
517
				cmd	: btn[3], // the command ID
518
				state	: setButtonStatus, // for changing state
519
				context : btn[4] || null // enabled in a certain context?
520
			};
521
			tb_objects[txt] = obj;
522
			// handlers to emulate nice flat toolbar buttons
523
			HTMLArea._addEvent(el, "mouseover", function () {
524
				if (obj.enabled) {
525
					HTMLArea._addClass(el, "buttonHover");
526
				}
527
			});
528
			HTMLArea._addEvent(el, "mouseout", function () {
529
				if (obj.enabled) with (HTMLArea) {
530
					_removeClass(el, "buttonHover");
531
					_removeClass(el, "buttonActive");
532
					(obj.active) && _addClass(el, "buttonPressed");
533
				}
534
			});
535
			HTMLArea._addEvent(el, "mousedown", function (ev) {
536
				if (obj.enabled) with (HTMLArea) {
537
					_addClass(el, "buttonActive");
538
					_removeClass(el, "buttonPressed");
539
					_stopEvent(is_ie ? window.event : ev);
540
				}
541
			});
542
			// when clicked, do the following:
543
			HTMLArea._addEvent(el, "click", function (ev) {
544
				if (obj.enabled) with (HTMLArea) {
545
					_removeClass(el, "buttonActive");
546
					_removeClass(el, "buttonHover");
547
					obj.cmd(editor, obj.name, obj);
548
					_stopEvent(is_ie ? window.event : ev);
549
				}
550
			});
551
			var img = document.createElement("img");
552
			img.src = btn[1];
553
			img.style.width = "18px";
554
			img.style.height = "18px";
555
			el.appendChild(img);
556
		} else if (!el) {
557
			el = createSelect(txt);
558
		}
559
		if (el) {
560
			var tb_cell = document.createElement("td");
561
			tb_row.appendChild(tb_cell);
562
			tb_cell.appendChild(el);
563
		} else {
564
			alert("FIXME: Unknown toolbar item: " + txt);
565
		}
566
		return el;
567
	};
568
569
	var first = true;
570
	for (var i in this.config.toolbar) {
571
		if (!first) {
572
			createButton("linebreak");
573
		} else {
574
			first = false;
575
		}
576
		var group = this.config.toolbar[i];
577
		for (var j in group) {
578
			var code = group[j];
579
			if (/^([IT])\[(.*?)\]/.test(code)) {
580
				// special case, create text label
581
				var l7ed = RegExp.$1 == "I"; // localized?
582
				var label = RegExp.$2;
583
				if (l7ed) {
584
					label = HTMLArea.I18N.custom[label];
585
				}
586
				var tb_cell = document.createElement("td");
587
				tb_row.appendChild(tb_cell);
588
				tb_cell.className = "label";
589
				tb_cell.innerHTML = label;
590
			} else {
591
				createButton(code);
592
			}
593
		}
594
	}
595
596
	this._htmlArea.appendChild(toolbar);
597
};
598
599
HTMLArea.prototype._createStatusBar = function() {
600
	var statusbar = document.createElement("div");
601
	statusbar.className = "statusBar";
602
	this._htmlArea.appendChild(statusbar);
603
	this._statusBar = statusbar;
604
	// statusbar.appendChild(document.createTextNode(HTMLArea.I18N.msg["Path"] + ": "));
605
	// creates a holder for the path view
606
	div = document.createElement("span");
607
	div.className = "statusBarTree";
608
	div.innerHTML = HTMLArea.I18N.msg["Path"] + ": ";
609
	this._statusBarTree = div;
610
	this._statusBar.appendChild(div);
611
	if (!this.config.statusBar) {
612
		// disable it...
613
		statusbar.style.display = "none";
614
	}
615
};
616
617
// Creates the HTMLArea object and replaces the textarea with it.
618
HTMLArea.prototype.generate = function () {
619
	var editor = this;	// we'll need "this" in some nested functions
620
	// get the textarea
621
	var textarea = this._textArea;
622
	if (typeof textarea == "string") {
623
		// it's not element but ID
624
		this._textArea = textarea = HTMLArea.getElementById("textarea", textarea);
625
	}
626
	this._ta_size = {
627
		w: textarea.offsetWidth,
628
		h: textarea.offsetHeight
629
	};
630
	textarea.style.display = "none";
631
632
	// create the editor framework
633
	var htmlarea = document.createElement("div");
634
	htmlarea.className = "htmlarea";
635
	this._htmlArea = htmlarea;
636
637
	// insert the editor before the textarea.
638
	textarea.parentNode.insertBefore(htmlarea, textarea);
639
640
	if (textarea.form) {
641
		// we have a form, on submit get the HTMLArea content and
642
		// update original textarea.
643
		var f = textarea.form;
644
		if (typeof f.onsubmit == "function") {
645
			var funcref = f.onsubmit;
646
			if (typeof f.__msh_prevOnSubmit == "undefined") {
647
				f.__msh_prevOnSubmit = [];
648
			}
649
			f.__msh_prevOnSubmit.push(funcref);
650
		}
651
		f.onsubmit = function() {
652
			editor._textArea.value = editor.getHTML();
653
			var a = this.__msh_prevOnSubmit;
654
			// call previous submit methods if they were there.
655
			if (typeof a != "undefined") {
656
				for (var i in a) {
657
					a[i]();
658
				}
659
			}
660
		};
661
	}
662
663
	// add a handler for the "back/forward" case -- on body.unload we save
664
	// the HTML content into the original textarea.
665
	window.onunload = function() {
666
		editor._textArea.value = editor.getHTML();
667
	};
668
669
	// creates & appends the toolbar
670
	this._createToolbar();
671
672
	// create the IFRAME
673
	var iframe = document.createElement("iframe");
674
	htmlarea.appendChild(iframe);
675
676
	this._iframe = iframe;
677
678
	// creates & appends the status bar, if the case
679
	this._createStatusBar();
680
681
	// remove the default border as it keeps us from computing correctly
682
	// the sizes.  (somebody tell me why doesn't this work in IE)
683
684
	if (!HTMLArea.is_ie) {
685
		iframe.style.borderWidth = "1px";
686
	// iframe.frameBorder = "1";
687
	// iframe.marginHeight = "0";
688
	// iframe.marginWidth = "0";
689
	}
690
691
	// size the IFRAME according to user's prefs or initial textarea
692
	var height = (this.config.height == "auto" ? (this._ta_size.h + "px") : this.config.height);
693
	height = parseInt(height);
694
	var width = (this.config.width == "auto" ? (this._ta_size.w + "px") : this.config.width);
695
	width = parseInt(width);
696
697
	if (!HTMLArea.is_ie) {
698
		height -= 2;
699
		width -= 2;
700
	}
701
702
	iframe.style.width = width + "px";
703
	if (this.config.sizeIncludesToolbar) {
704
		// substract toolbar height
705
		height -= this._toolbar.offsetHeight;
706
		height -= this._statusBar.offsetHeight;
707
	}
708
	if (height < 0) {
709
		height = 0;
710
	}
711
	iframe.style.height = height + "px";
712
713
	// the editor including the toolbar now have the same size as the
714
	// original textarea.. which means that we need to reduce that a bit.
715
	textarea.style.width = iframe.style.width;
716
 	textarea.style.height = iframe.style.height;
717
718
	// IMPORTANT: we have to allow Mozilla a short time to recognize the
719
	// new frame.  Otherwise we get a stupid exception.
720
	function initIframe() {
721
		var doc = editor._iframe.contentWindow.document;
722
		if (!doc) {
723
			// Try again..
724
			// FIXME: don't know what else to do here.  Normally
725
			// we'll never reach this point.
726
			if (HTMLArea.is_gecko) {
727
				setTimeout(initIframe, 100);
728
				return false;
729
			} else {
730
				alert("ERROR: IFRAME can't be initialized.");
731
			}
732
		}
733
		if (HTMLArea.is_gecko) {
734
			// enable editable mode for Mozilla
735
			doc.designMode = "on";
736
		}
737
		editor._doc = doc;
738
		if (!editor.config.fullPage) {
739
			doc.open();
740
			var html = "<html>\n";
741
			html += "<head>\n";
742
			if (editor.config.baseURL)
743
				html += '<base href="' + editor.config.baseURL + '" />';
744
			html += "<style> html,body { border: 0px; } " +
745
				editor.config.pageStyle + "</style>\n";
746
			html += "</head>\n";
747
			html += "<body>\n";
748
			html += editor._textArea.value;
749
			html += "</body>\n";
750
			html += "</html>";
751
			doc.write(html);
752
			doc.close();
753
		} else {
754
			var html = editor._textArea.value;
755
			if (html.match(HTMLArea.RE_doctype)) {
756
				editor.setDoctype(RegExp.$1);
757
				html = html.replace(HTMLArea.RE_doctype, "");
758
			}
759
			doc.open();
760
			doc.write(html);
761
			doc.close();
762
		}
763
764
		if (HTMLArea.is_ie) {
765
			// enable editable mode for IE.	 For some reason this
766
			// doesn't work if done in the same place as for Gecko
767
			// (above).
768
			doc.body.contentEditable = true;
769
		}
770
771
		editor.focusEditor();
772
		// intercept some events; for updating the toolbar & keyboard handlers
773
		HTMLArea._addEvents
774
			(doc, ["keydown", "keypress", "mousedown", "mouseup", "drag"],
775
			 function (event) {
776
				 return editor._editorEvent(HTMLArea.is_ie ? editor._iframe.contentWindow.event : event);
777
			 });
778
779
		// check if any plugins have registered refresh handlers
780
		for (var i in editor.plugins) {
781
			var plugin = editor.plugins[i].instance;
782
			if (typeof plugin.onGenerate == "function")
783
				plugin.onGenerate();
784
		}
785
786
		setTimeout(function() {
787
			editor.updateToolbar();
788
		}, 250);
789
790
		if (typeof editor.onGenerate == "function")
791
			editor.onGenerate();
792
	};
793
	setTimeout(initIframe, 100);
794
};
795
796
// Switches editor mode; parameter can be "textmode" or "wysiwyg".  If no
797
// parameter was passed this function toggles between modes.
798
HTMLArea.prototype.setMode = function(mode) {
799
	if (typeof mode == "undefined") {
800
		mode = ((this._editMode == "textmode") ? "wysiwyg" : "textmode");
801
	}
802
	switch (mode) {
803
	    case "textmode":
804
		this._textArea.value = this.getHTML();
805
		this._iframe.style.display = "none";
806
		this._textArea.style.display = "block";
807
		if (this.config.statusBar) {
808
			this._statusBar.innerHTML = HTMLArea.I18N.msg["TEXT_MODE"];
809
		}
810
		break;
811
	    case "wysiwyg":
812
		if (HTMLArea.is_gecko) {
813
			// disable design mode before changing innerHTML
814
			try {
815
				this._doc.designMode = "off";
816
			} catch(e) {};
817
		}
818
		if (!this.config.fullPage)
819
			this._doc.body.innerHTML = this.getHTML();
820
		else
821
			this.setFullHTML(this.getHTML());
822
		this._iframe.style.display = "block";
823
		this._textArea.style.display = "none";
824
		if (HTMLArea.is_gecko) {
825
			// we need to refresh that info for Moz-1.3a
826
			try {
827
				this._doc.designMode = "on";
828
			} catch(e) {};
829
		}
830
		if (this.config.statusBar) {
831
			this._statusBar.innerHTML = '';
832
			this._statusBar.appendChild(document.createTextNode(HTMLArea.I18N.msg["Path"] + ": "));
833
			this._statusBar.appendChild(this._statusBarTree);
834
		}
835
		break;
836
	    default:
837
		alert("Mode <" + mode + "> not defined!");
838
		return false;
839
	}
840
	this._editMode = mode;
841
	this.focusEditor();
842
};
843
844
HTMLArea.prototype.setFullHTML = function(html) {
845
	var save_multiline = RegExp.multiline;
846
	RegExp.multiline = true;
847
	if (html.match(HTMLArea.RE_doctype)) {
848
		this.setDoctype(RegExp.$1);
849
		html = html.replace(HTMLArea.RE_doctype, "");
850
	}
851
	RegExp.multiline = save_multiline;
852
	if (!HTMLArea.is_ie) {
853
		if (html.match(HTMLArea.RE_head))
854
			this._doc.getElementsByTagName("head")[0].innerHTML = RegExp.$1;
855
		if (html.match(HTMLArea.RE_body))
856
			this._doc.getElementsByTagName("body")[0].innerHTML = RegExp.$1;
857
	} else {
858
		var html_re = /<html>((.|\n)*?)<\/html>/i;
859
		html = html.replace(html_re, "$1");
860
		this._doc.open();
861
		this._doc.write(html);
862
		this._doc.close();
863
		this._doc.body.contentEditable = true;
864
		return true;
865
	}
866
};
867
868
/***************************************************
869
 *  Category: PLUGINS
870
 ***************************************************/
871
872
// this is the variant of the function above where the plugin arguments are
873
// already packed in an array.  Externally, it should be only used in the
874
// full-screen editor code, in order to initialize plugins with the same
875
// parameters as in the opener window.
876
HTMLArea.prototype.registerPlugin2 = function(plugin, args) {
877
	if (typeof plugin == "string")
878
		plugin = eval(plugin);
879
	var obj = new plugin(this, args);
880
	if (obj) {
881
		var clone = {};
882
		var info = plugin._pluginInfo;
883
		for (var i in info)
884
			clone[i] = info[i];
885
		clone.instance = obj;
886
		clone.args = args;
887
		this.plugins[plugin._pluginInfo.name] = clone;
888
	} else
889
		alert("Can't register plugin " + plugin.toString() + ".");
890
};
891
892
// Create the specified plugin and register it with this HTMLArea
893
HTMLArea.prototype.registerPlugin = function() {
894
	var plugin = arguments[0];
895
	var args = [];
896
	for (var i = 1; i < arguments.length; ++i)
897
		args.push(arguments[i]);
898
	this.registerPlugin2(plugin, args);
899
};
900
901
// static function that loads the required plugin and lang file, based on the
902
// language loaded already for HTMLArea.  You better make sure that the plugin
903
// _has_ that language, otherwise shit might happen ;-)
904
HTMLArea.loadPlugin = function(pluginName) {
905
	var dir = _editor_url + "plugins/" + pluginName;
906
	var plugin = pluginName.replace(/([a-z])([A-Z])([a-z])/g,
907
					function (str, l1, l2, l3) {
908
						return l1 + "-" + l2.toLowerCase() + l3;
909
					}).toLowerCase() + ".js";
910
	var plugin_file = dir + "/" + plugin;
911
	var plugin_lang = dir + "/lang/" + HTMLArea.I18N.lang + ".js";
912
	HTMLArea._scripts.push(plugin_file, plugin_lang);
913
	document.write("<script type='text/javascript' src='" + plugin_file + "'></script>");
914
	document.write("<script type='text/javascript' src='" + plugin_lang + "'></script>");
915
};
916
917
HTMLArea.loadStyle = function(style, plugin) {
918
	var url = _editor_url || '';
919
	if (typeof plugin != "undefined") {
920
		url += "plugins/" + plugin + "/";
921
	}
922
	url += style;
923
	document.write("<style type='text/css'>@import url(" + url + ");</style>");
924
};
925
HTMLArea.loadStyle("htmlarea.css");
926
927
/***************************************************
928
 *  Category: EDITOR UTILITIES
929
 ***************************************************/
930
931
// The following function is a slight variation of the word cleaner code posted
932
// by Weeezl (user @ InteractiveTools forums).
933
HTMLArea.prototype._wordClean = function() {
934
	var D = this.getInnerHTML();
935
	if (D.indexOf('class=Mso') >= 0) {
936
937
		// make one line
938
		D = D.replace(/\r\n/g, ' ').
939
			replace(/\n/g, ' ').
940
			replace(/\r/g, ' ').
941
			replace(/\&nbsp\;/g,' ');
942
943
		// keep tags, strip attributes
944
		D = D.replace(/ class=[^\s|>]*/gi,'').
945
			//replace(/<p [^>]*TEXT-ALIGN: justify[^>]*>/gi,'<p align="justify">').
946
			replace(/ style=\"[^>]*\"/gi,'').
947
			replace(/ align=[^\s|>]*/gi,'');
948
949
		//clean up tags
950
		D = D.replace(/<b [^>]*>/gi,'<b>').
951
			replace(/<i [^>]*>/gi,'<i>').
952
			replace(/<li [^>]*>/gi,'<li>').
953
			replace(/<ul [^>]*>/gi,'<ul>');
954
955
		// replace outdated tags
956
		D = D.replace(/<b>/gi,'<strong>').
957
			replace(/<\/b>/gi,'</strong>');
958
959
		// mozilla doesn't like <em> tags
960
		D = D.replace(/<em>/gi,'<i>').
961
			replace(/<\/em>/gi,'</i>');
962
963
		// kill unwanted tags
964
		D = D.replace(/<\?xml:[^>]*>/g, '').       // Word xml
965
			replace(/<\/?st1:[^>]*>/g,'').     // Word SmartTags
966
			replace(/<\/?[a-z]\:[^>]*>/g,'').  // All other funny Word non-HTML stuff
967
			replace(/<\/?font[^>]*>/gi,'').    // Disable if you want to keep font formatting
968
			replace(/<\/?span[^>]*>/gi,' ').
969
			replace(/<\/?div[^>]*>/gi,' ').
970
			replace(/<\/?pre[^>]*>/gi,' ').
971
			replace(/<\/?h[1-6][^>]*>/gi,' ');
972
973
		//remove empty tags
974
		//D = D.replace(/<strong><\/strong>/gi,'').
975
		//replace(/<i><\/i>/gi,'').
976
		//replace(/<P[^>]*><\/P>/gi,'');
977
978
		// nuke double tags
979
		oldlen = D.length + 1;
980
		while(oldlen > D.length) {
981
			oldlen = D.length;
982
			// join us now and free the tags, we'll be free hackers, we'll be free... ;-)
983
			D = D.replace(/<([a-z][a-z]*)> *<\/\1>/gi,' ').
984
				replace(/<([a-z][a-z]*)> *<([a-z][^>]*)> *<\/\1>/gi,'<$2>');
985
		}
986
		D = D.replace(/<([a-z][a-z]*)><\1>/gi,'<$1>').
987
			replace(/<\/([a-z][a-z]*)><\/\1>/gi,'<\/$1>');
988
989
		// nuke double spaces
990
		D = D.replace(/  */gi,' ');
991
992
		this.setHTML(D);
993
		this.updateToolbar();
994
	}
995
};
996
997
HTMLArea.prototype.forceRedraw = function() {
998
	this._doc.body.style.visibility = "hidden";
999
	this._doc.body.style.visibility = "visible";
1000
	// this._doc.body.innerHTML = this.getInnerHTML();
1001
};
1002
1003
// focuses the iframe window.  returns a reference to the editor document.
1004
HTMLArea.prototype.focusEditor = function() {
1005
	switch (this._editMode) {
1006
	    case "wysiwyg" : this._iframe.contentWindow.focus(); break;
1007
	    case "textmode": this._textArea.focus(); break;
1008
	    default	   : alert("ERROR: mode " + this._editMode + " is not defined");
1009
	}
1010
	return this._doc;
1011
};
1012
1013
// takes a snapshot of the current text (for undo)
1014
HTMLArea.prototype._undoTakeSnapshot = function() {
1015
	++this._undoPos;
1016
	if (this._undoPos >= this.config.undoSteps) {
1017
		// remove the first element
1018
		this._undoQueue.shift();
1019
		--this._undoPos;
1020
	}
1021
	// use the fasted method (getInnerHTML);
1022
	var take = true;
1023
	var txt = this.getInnerHTML();
1024
	if (this._undoPos > 0)
1025
		take = (this._undoQueue[this._undoPos - 1] != txt);
1026
	if (take) {
1027
		this._undoQueue[this._undoPos] = txt;
1028
	} else {
1029
		this._undoPos--;
1030
	}
1031
};
1032
1033
HTMLArea.prototype.undo = function() {
1034
	if (this._undoPos > 0) {
1035
		var txt = this._undoQueue[--this._undoPos];
1036
		if (txt) this.setHTML(txt);
1037
		else ++this._undoPos;
1038
	}
1039
};
1040
1041
HTMLArea.prototype.redo = function() {
1042
	if (this._undoPos < this._undoQueue.length - 1) {
1043
		var txt = this._undoQueue[++this._undoPos];
1044
		if (txt) this.setHTML(txt);
1045
		else --this._undoPos;
1046
	}
1047
};
1048
1049
// updates enabled/disable/active state of the toolbar elements
1050
HTMLArea.prototype.updateToolbar = function(noStatus) {
1051
	var doc = this._doc;
1052
	var text = (this._editMode == "textmode");
1053
	var ancestors = null;
1054
	if (!text) {
1055
		ancestors = this.getAllAncestors();
1056
		if (this.config.statusBar && !noStatus) {
1057
			this._statusBarTree.innerHTML = HTMLArea.I18N.msg["Path"] + ": "; // clear
1058
			for (var i = ancestors.length; --i >= 0;) {
1059
				var el = ancestors[i];
1060
				if (!el) {
1061
					// hell knows why we get here; this
1062
					// could be a classic example of why
1063
					// it's good to check for conditions
1064
					// that are impossible to happen ;-)
1065
					continue;
1066
				}
1067
				var a = document.createElement("a");
1068
				a.href = "#";
1069
				a.el = el;
1070
				a.editor = this;
1071
				a.onclick = function() {
1072
					this.blur();
1073
					this.editor.selectNodeContents(this.el);
1074
					this.editor.updateToolbar(true);
1075
					return false;
1076
				};
1077
				a.oncontextmenu = function() {
1078
					// TODO: add context menu here
1079
					this.blur();
1080
					var info = "Inline style:\n\n";
1081
					info += this.el.style.cssText.split(/;\s*/).join(";\n");
1082
					alert(info);
1083
					return false;
1084
				};
1085
				var txt = el.tagName.toLowerCase();
1086
				a.title = el.style.cssText;
1087
				if (el.id) {
1088
					txt += "#" + el.id;
1089
				}
1090
				if (el.className) {
1091
					txt += "." + el.className;
1092
				}
1093
				a.appendChild(document.createTextNode(txt));
1094
				this._statusBarTree.appendChild(a);
1095
				if (i != 0) {
1096
					this._statusBarTree.appendChild(document.createTextNode(String.fromCharCode(0xbb)));
1097
				}
1098
			}
1099
		}
1100
	}
1101
	for (var i in this._toolbarObjects) {
1102
		var btn = this._toolbarObjects[i];
1103
		var cmd = i;
1104
		var inContext = true;
1105
		if (btn.context && !text) {
1106
			inContext = false;
1107
			var context = btn.context;
1108
			var attrs = [];
1109
			if (/(.*)\[(.*?)\]/.test(context)) {
1110
				context = RegExp.$1;
1111
				attrs = RegExp.$2.split(",");
1112
			}
1113
			context = context.toLowerCase();
1114
			var match = (context == "*");
1115
			for (var k in ancestors) {
1116
				if (!ancestors[k]) {
1117
					// the impossible really happens.
1118
					continue;
1119
				}
1120
				if (match || (ancestors[k].tagName.toLowerCase() == context)) {
1121
					inContext = true;
1122
					for (var ka in attrs) {
1123
						if (!eval("ancestors[k]." + attrs[ka])) {
1124
							inContext = false;
1125
							break;
1126
						}
1127
					}
1128
					if (inContext) {
1129
						break;
1130
					}
1131
				}
1132
			}
1133
		}
1134
		btn.state("enabled", (!text || btn.text) && inContext);
1135
		if (typeof cmd == "function") {
1136
			continue;
1137
		}
1138
		// look-it-up in the custom dropdown boxes
1139
		var dropdown = this.config.customSelects[cmd];
1140
		if ((!text || btn.text) && (typeof dropdown != "undefined")) {
1141
			dropdown.refresh(this);
1142
			continue;
1143
		}
1144
		switch (cmd) {
1145
		    case "fontname":
1146
		    case "fontsize":
1147
		    case "formatblock":
1148
			if (!text) try {
1149
				var value = ("" + doc.queryCommandValue(cmd)).toLowerCase();
1150
				if (!value) {
1151
					// FIXME: what do we do here?
1152
					break;
1153
				}
1154
				// HACK -- retrieve the config option for this
1155
				// combo box.  We rely on the fact that the
1156
				// variable in config has the same name as
1157
				// button name in the toolbar.
1158
				var options = this.config[cmd];
1159
				var k = 0;
1160
				// btn.element.selectedIndex = 0;
1161
				for (var j in options) {
1162
					// FIXME: the following line is scary.
1163
					if ((j.toLowerCase() == value) ||
1164
					    (options[j].substr(0, value.length).toLowerCase() == value)) {
1165
						btn.element.selectedIndex = k;
1166
						break;
1167
					}
1168
					++k;
1169
				}
1170
			} catch(e) {};
1171
			break;
1172
		    case "textindicator":
1173
			if (!text) {
1174
				try {with (btn.element.style) {
1175
					backgroundColor = HTMLArea._makeColor(
1176
						doc.queryCommandValue(HTMLArea.is_ie ? "backcolor" : "hilitecolor"));
1177
					if (/transparent/i.test(backgroundColor)) {
1178
						// Mozilla
1179
						backgroundColor = HTMLArea._makeColor(doc.queryCommandValue("backcolor"));
1180
					}
1181
					color = HTMLArea._makeColor(doc.queryCommandValue("forecolor"));
1182
					fontFamily = doc.queryCommandValue("fontname");
1183
					fontWeight = doc.queryCommandState("bold") ? "bold" : "normal";
1184
					fontStyle = doc.queryCommandState("italic") ? "italic" : "normal";
1185
				}} catch (e) {
1186
					// alert(e + "\n\n" + cmd);
1187
				}
1188
			}
1189
			break;
1190
		    case "htmlmode": btn.state("active", text); break;
1191
		    case "lefttoright":
1192
		    case "righttoleft":
1193
			var el = this.getParentElement();
1194
			while (el && !HTMLArea.isBlockElement(el))
1195
				el = el.parentNode;
1196
			if (el)
1197
				btn.state("active", (el.style.direction == ((cmd == "righttoleft") ? "rtl" : "ltr")));
1198
			break;
1199
		    default:
1200
			try {
1201
				btn.state("active", (!text && doc.queryCommandState(cmd)));
1202
			} catch (e) {}
1203
		}
1204
	}
1205
	// take undo snapshots
1206
	if (this._customUndo && !this._timerUndo) {
1207
		this._undoTakeSnapshot();
1208
		var editor = this;
1209
		this._timerUndo = setTimeout(function() {
1210
			editor._timerUndo = null;
1211
		}, this.config.undoTimeout);
1212
	}
1213
	// check if any plugins have registered refresh handlers
1214
	for (var i in this.plugins) {
1215
		var plugin = this.plugins[i].instance;
1216
		if (typeof plugin.onUpdateToolbar == "function")
1217
			plugin.onUpdateToolbar();
1218
	}
1219
};
1220
1221
/** Returns a node after which we can insert other nodes, in the current
1222
 * selection.  The selection is removed.  It splits a text node, if needed.
1223
 */
1224
HTMLArea.prototype.insertNodeAtSelection = function(toBeInserted) {
1225
	if (!HTMLArea.is_ie) {
1226
		var sel = this._getSelection();
1227
		var range = this._createRange(sel);
1228
		// remove the current selection
1229
		sel.removeAllRanges();
1230
		range.deleteContents();
1231
		var node = range.startContainer;
1232
		var pos = range.startOffset;
1233
		switch (node.nodeType) {
1234
		    case 3: // Node.TEXT_NODE
1235
			// we have to split it at the caret position.
1236
			if (toBeInserted.nodeType == 3) {
1237
				// do optimized insertion
1238
				node.insertData(pos, toBeInserted.data);
1239
				range = this._createRange();
1240
				range.setEnd(node, pos + toBeInserted.length);
1241
				range.setStart(node, pos + toBeInserted.length);
1242
				sel.addRange(range);
1243
			} else {
1244
				node = node.splitText(pos);
1245
				var selnode = toBeInserted;
1246
				if (toBeInserted.nodeType == 11 /* Node.DOCUMENT_FRAGMENT_NODE */) {
1247
					selnode = selnode.firstChild;
1248
				}
1249
				node.parentNode.insertBefore(toBeInserted, node);
1250
				this.selectNodeContents(selnode);
1251
				this.updateToolbar();
1252
			}
1253
			break;
1254
		    case 1: // Node.ELEMENT_NODE
1255
			var selnode = toBeInserted;
1256
			if (toBeInserted.nodeType == 11 /* Node.DOCUMENT_FRAGMENT_NODE */) {
1257
				selnode = selnode.firstChild;
1258
			}
1259
			node.insertBefore(toBeInserted, node.childNodes[pos]);
1260
			this.selectNodeContents(selnode);
1261
			this.updateToolbar();
1262
			break;
1263
		}
1264
	} else {
1265
		return null;	// this function not yet used for IE <FIXME>
1266
	}
1267
};
1268
1269
// Returns the deepest node that contains both endpoints of the selection.
1270
HTMLArea.prototype.getParentElement = function() {
1271
	var sel = this._getSelection();
1272
	var range = this._createRange(sel);
1273
	if (HTMLArea.is_ie) {
1274
		switch (sel.type) {
1275
		    case "Text":
1276
		    case "None":
1277
			// It seems that even for selection of type "None",
1278
			// there _is_ a parent element and it's value is not
1279
			// only correct, but very important to us.  MSIE is
1280
			// certainly the buggiest browser in the world and I
1281
			// wonder, God, how can Earth stand it?
1282
			return range.parentElement();
1283
		    case "Control":
1284
			return range.item(0);
1285
		    default:
1286
			return this._doc.body;
1287
		}
1288
	} else try {
1289
		var p = range.commonAncestorContainer;
1290
		if (!range.collapsed && range.startContainer == range.endContainer &&
1291
		    range.startOffset - range.endOffset <= 1 && range.startContainer.hasChildNodes())
1292
			p = range.startContainer.childNodes[range.startOffset];
1293
		/*
1294
		alert(range.startContainer + ":" + range.startOffset + "\n" +
1295
		      range.endContainer + ":" + range.endOffset);
1296
		*/
1297
		while (p.nodeType == 3) {
1298
			p = p.parentNode;
1299
		}
1300
		return p;
1301
	} catch (e) {
1302
		return null;
1303
	}
1304
};
1305
1306
// Returns an array with all the ancestor nodes of the selection.
1307
HTMLArea.prototype.getAllAncestors = function() {
1308
	var p = this.getParentElement();
1309
	var a = [];
1310
	while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
1311
		a.push(p);
1312
		p = p.parentNode;
1313
	}
1314
	a.push(this._doc.body);
1315
	return a;
1316
};
1317
1318
// Selects the contents inside the given node
1319
HTMLArea.prototype.selectNodeContents = function(node, pos) {
1320
	this.focusEditor();
1321
	this.forceRedraw();
1322
	var range;
1323
	var collapsed = (typeof pos != "undefined");
1324
	if (HTMLArea.is_ie) {
1325
		range = this._doc.body.createTextRange();
1326
		range.moveToElementText(node);
1327
		(collapsed) && range.collapse(pos);
1328
		range.select();
1329
	} else {
1330
		var sel = this._getSelection();
1331
		range = this._doc.createRange();
1332
		range.selectNodeContents(node);
1333
		(collapsed) && range.collapse(pos);
1334
		sel.removeAllRanges();
1335
		sel.addRange(range);
1336
	}
1337
};
1338
1339
/** Call this function to insert HTML code at the current position.  It deletes
1340
 * the selection, if any.
1341
 */
1342
HTMLArea.prototype.insertHTML = function(html) {
1343
	var sel = this._getSelection();
1344
	var range = this._createRange(sel);
1345
	if (HTMLArea.is_ie) {
1346
		range.pasteHTML(html);
1347
	} else {
1348
		// construct a new document fragment with the given HTML
1349
		var fragment = this._doc.createDocumentFragment();
1350
		var div = this._doc.createElement("div");
1351
		div.innerHTML = html;
1352
		while (div.firstChild) {
1353
			// the following call also removes the node from div
1354
			fragment.appendChild(div.firstChild);
1355
		}
1356
		// this also removes the selection
1357
		var node = this.insertNodeAtSelection(fragment);
1358
	}
1359
};
1360
1361
/**
1362
 *  Call this function to surround the existing HTML code in the selection with
1363
 *  your tags.  FIXME: buggy!  This function will be deprecated "soon".
1364
 */
1365
HTMLArea.prototype.surroundHTML = function(startTag, endTag) {
1366
	var html = this.getSelectedHTML();
1367
	// the following also deletes the selection
1368
	this.insertHTML(startTag + html + endTag);
1369
};
1370
1371
/// Retrieve the selected block
1372
HTMLArea.prototype.getSelectedHTML = function() {
1373
	var sel = this._getSelection();
1374
	var range = this._createRange(sel);
1375
	var existing = null;
1376
	if (HTMLArea.is_ie) {
1377
		existing = range.htmlText;
1378
	} else {
1379
		existing = HTMLArea.getHTML(range.cloneContents(), false, this);
1380
	}
1381
	return existing;
1382
};
1383
1384
/// Return true if we have some selection
1385
HTMLArea.prototype.hasSelectedText = function() {
1386
	// FIXME: come _on_ mishoo, you can do better than this ;-)
1387
	return this.getSelectedHTML() != '';
1388
};
1389
1390
HTMLArea.prototype._createLink = function(link) {
1391
	var editor = this;
1392
	var outparam = null;
1393
	if (typeof link == "undefined") {
1394
		link = this.getParentElement();
1395
		if (link && !/^a$/i.test(link.tagName))
1396
			link = null;
1397
	}
1398
	if (link) outparam = {
1399
		f_href   : HTMLArea.is_ie ? editor.stripBaseURL(link.href) : link.getAttribute("href"),
1400
		f_title  : link.title,
1401
		f_target : link.target
1402
	};
1403
	this._popupDialog("link.php", function(param) {
1404
		if (!param)
1405
			return false;
1406
		var a = link;
1407
		if (!a) {
1408
			editor._doc.execCommand("createlink", false, param.f_href);
1409
			a = editor.getParentElement();
1410
			var sel = editor._getSelection();
1411
			var range = editor._createRange(sel);
1412
			if (!HTMLArea.is_ie) {
1413
				a = range.startContainer;
1414
				if (!/^a$/i.test(a.tagName))
1415
					a = a.nextSibling;
1416
			}
1417
		} else a.href = param.f_href.trim();
1418
		if (!/^a$/i.test(a.tagName))
1419
			return false;
1420
		a.target = param.f_target.trim();
1421
		a.title = param.f_title.trim();
1422
		editor.selectNodeContents(a);
1423
		editor.updateToolbar();
1424
	}, outparam);
1425
};
1426
1427
// Called when the user clicks on "InsertImage" button.  If an image is already
1428
// there, it will just modify it's properties.
1429
HTMLArea.prototype._insertImage = function(image) {
1430
	var editor = this;	// for nested functions
1431
	var outparam = null;
1432
	if (typeof image == "undefined") {
1433
		image = this.getParentElement();
1434
		if (image && !/^img$/i.test(image.tagName))
1435
			image = null;
1436
	}
1437
	if (image) outparam = {
1438
		f_url    : HTMLArea.is_ie ? editor.stripBaseURL(image.src) : image.getAttribute("src"),
1439
		f_alt    : image.alt,
1440
		f_border : image.border,
1441
		f_align  : image.align,
1442
		f_vert   : image.vspace,
1443
		f_horiz  : image.hspace
1444
	};
1445
	this._popupDialog("insert_image.php", function(param) {
1446
		if (!param) {	// user must have pressed Cancel
1447
			return false;
1448
		}
1449
		var img = image;
1450
		if (!img) {
1451
			var sel = editor._getSelection();
1452
			var range = editor._createRange(sel);
1453
			editor._doc.execCommand("insertimage", false, param.f_url);
1454
			if (HTMLArea.is_ie) {
1455
				img = range.parentElement();
1456
				// wonder if this works...
1457
				if (img.tagName.toLowerCase() != "img") {
1458
					img = img.previousSibling;
1459
				}
1460
			} else {
1461
				img = range.startContainer.previousSibling;
1462
			}
1463
		} else {
1464
			img.src = param.f_url;
1465
		}
1466
		for (field in param) {
1467
			var value = param[field];
1468
			switch (field) {
1469
			    case "f_alt"    : img.alt	 = value; break;
1470
			    case "f_border" : img.border = parseInt(value || "0"); break;
1471
			    case "f_align"  : img.align	 = value; break;
1472
			    case "f_vert"   : img.vspace = parseInt(value || "0"); break;
1473
			    case "f_horiz"  : img.hspace = parseInt(value || "0"); break;
1474
			}
1475
		}
1476
	}, outparam);
1477
};
1478
1479
// Called when the user clicks the Insert Table button
1480
HTMLArea.prototype._insertTable = function() {
1481
	var sel = this._getSelection();
1482
	var range = this._createRange(sel);
1483
	var editor = this;	// for nested functions
1484
	this._popupDialog("insert_table.html", function(param) {
1485
		if (!param) {	// user must have pressed Cancel
1486
			return false;
1487
		}
1488
		var doc = editor._doc;
1489
		// create the table element
1490
		var table = doc.createElement("table");
1491
		// assign the given arguments
1492
		for (var field in param) {
1493
			var value = param[field];
1494
			if (!value) {
1495
				continue;
1496
			}
1497
			switch (field) {
1498
			    case "f_width"   : table.style.width = value + param["f_unit"]; break;
1499
			    case "f_align"   : table.align	 = value; break;
1500
			    case "f_border"  : table.border	 = parseInt(value); break;
1501
			    case "f_spacing" : table.cellspacing = parseInt(value); break;
1502
			    case "f_padding" : table.cellpadding = parseInt(value); break;
1503
			}
1504
		}
1505
		var tbody = doc.createElement("tbody");
1506
		table.appendChild(tbody);
1507
		for (var i = 0; i < param["f_rows"]; ++i) {
1508
			var tr = doc.createElement("tr");
1509
			tbody.appendChild(tr);
1510
			for (var j = 0; j < param["f_cols"]; ++j) {
1511
				var td = doc.createElement("td");
1512
				tr.appendChild(td);
1513
				// Mozilla likes to see something inside the cell.
1514
				(HTMLArea.is_gecko) && td.appendChild(doc.createElement("br"));
1515
			}
1516
		}
1517
		if (HTMLArea.is_ie) {
1518
			range.pasteHTML(table.outerHTML);
1519
		} else {
1520
			// insert the table
1521
			editor.insertNodeAtSelection(table);
1522
		}
1523
		return true;
1524
	}, null);
1525
};
1526
1527
/***************************************************
1528
 *  Category: EVENT HANDLERS
1529
 ***************************************************/
1530
1531
// el is reference to the SELECT object
1532
// txt is the name of the select field, as in config.toolbar
1533
HTMLArea.prototype._comboSelected = function(el, txt) {
1534
	this.focusEditor();
1535
	var value = el.options[el.selectedIndex].value;
1536
	switch (txt) {
1537
	    case "fontname":
1538
	    case "fontsize": this.execCommand(txt, false, value); break;
1539
	    case "formatblock":
1540
		(HTMLArea.is_ie) && (value = "<" + value + ">");
1541
		this.execCommand(txt, false, value);
1542
		break;
1543
	    default:
1544
		// try to look it up in the registered dropdowns
1545
		var dropdown = this.config.customSelects[txt];
1546
		if (typeof dropdown != "undefined") {
1547
			dropdown.action(this);
1548
		} else {
1549
			alert("FIXME: combo box " + txt + " not implemented");
1550
		}
1551
	}
1552
};
1553
1554
// the execCommand function (intercepts some commands and replaces them with
1555
// our own implementation)
1556
HTMLArea.prototype.execCommand = function(cmdID, UI, param) {
1557
	var editor = this;	// for nested functions
1558
	this.focusEditor();
1559
	cmdID = cmdID.toLowerCase();
1560
	switch (cmdID) {
1561
	    case "htmlmode" : this.setMode(); break;
1562
	    case "hilitecolor":
1563
		(HTMLArea.is_ie) && (cmdID = "backcolor");
1564
	    case "forecolor":
1565
		this._popupDialog("select_color.html", function(color) {
1566
			if (color) { // selection not canceled
1567
				editor._doc.execCommand(cmdID, false, "#" + color);
1568
			}
1569
		}, HTMLArea._colorToRgb(this._doc.queryCommandValue(cmdID)));
1570
		break;
1571
	    case "createlink":
1572
		this._createLink();
1573
		break;
1574
	    case "popupeditor":
1575
		// this object will be passed to the newly opened window
1576
		HTMLArea._object = this;
1577
		if (HTMLArea.is_ie) {
1578
			//if (confirm(HTMLArea.I18N.msg["IE-sucks-full-screen"]))
1579
			{
1580
				window.open(this.popupURL("fullscreen.html"), "ha_fullscreen",
1581
					    "toolbar=no,location=no,directories=no,status=no,menubar=no," +
1582
					    "scrollbars=no,resizable=yes,width=640,height=480");
1583
			}
1584
		} else {
1585
			window.open(this.popupURL("fullscreen.html"), "ha_fullscreen",
1586
				    "toolbar=no,menubar=no,personalbar=no,width=640,height=480," +
1587
				    "scrollbars=no,resizable=yes");
1588
		}
1589
		break;
1590
	    case "undo":
1591
	    case "redo":
1592
		if (this._customUndo)
1593
			this[cmdID]();
1594
		else
1595
			this._doc.execCommand(cmdID, UI, param);
1596
		break;
1597
	    case "inserttable": this._insertTable(); break;
1598
	    case "insertimage": this._insertImage(); break;
1599
	    case "about"    : this._popupDialog("about.html", null, this); break;
1600
	    case "showhelp" : window.open(_editor_url + "reference.html", "ha_help"); break;
1601
1602
	    case "killword": this._wordClean(); break;
1603
1604
	    case "cut":
1605
	    case "copy":
1606
	    case "paste":
1607
		try {
1608
			if (this.config.killWordOnPaste)
1609
				this._wordClean();
1610
			this._doc.execCommand(cmdID, UI, param);
1611
		} catch (e) {
1612
			if (HTMLArea.is_gecko) {
1613
				if (confirm("Unprivileged scripts cannot access Cut/Copy/Paste programatically " +
1614
					    "for security reasons.  Click OK to see a technical note at mozilla.org " +
1615
					    "which shows you how to allow a script to access the clipboard."))
1616
					window.open("http://mozilla.org/editor/midasdemo/securityprefs.html");
1617
			}
1618
		}
1619
		break;
1620
	    case "lefttoright":
1621
	    case "righttoleft":
1622
		var dir = (cmdID == "righttoleft") ? "rtl" : "ltr";
1623
		var el = this.getParentElement();
1624
		while (el && !HTMLArea.isBlockElement(el))
1625
			el = el.parentNode;
1626
		if (el) {
1627
			if (el.style.direction == dir)
1628
				el.style.direction = "";
1629
			else
1630
				el.style.direction = dir;
1631
		}
1632
		break;
1633
	    default: this._doc.execCommand(cmdID, UI, param);
1634
	}
1635
	this.updateToolbar();
1636
	return false;
1637
};
1638
1639
/** A generic event handler for things that happen in the IFRAME's document.
1640
 * This function also handles key bindings. */
1641
HTMLArea.prototype._editorEvent = function(ev) {
1642
	var editor = this;
1643
	var keyEvent = (HTMLArea.is_ie && ev.type == "keydown") || (ev.type == "keypress");
1644
	if (keyEvent) {
1645
		for (var i in editor.plugins) {
1646
			var plugin = editor.plugins[i].instance;
1647
			if (typeof plugin.onKeyPress == "function") plugin.onKeyPress(ev);
1648
		}
1649
	}
1650
	if (keyEvent && ev.ctrlKey) {
1651
		var sel = null;
1652
		var range = null;
1653
		var key = String.fromCharCode(HTMLArea.is_ie ? ev.keyCode : ev.charCode).toLowerCase();
1654
		var cmd = null;
1655
		var value = null;
1656
		switch (key) {
1657
		    case 'a':
1658
			if (!HTMLArea.is_ie) {
1659
				// KEY select all
1660
				sel = this._getSelection();
1661
				sel.removeAllRanges();
1662
				range = this._createRange();
1663
				range.selectNodeContents(this._doc.body);
1664
				sel.addRange(range);
1665
				HTMLArea._stopEvent(ev);
1666
			}
1667
			break;
1668
1669
			// simple key commands follow
1670
1671
		    case 'b': cmd = "bold"; break;
1672
		    case 'i': cmd = "italic"; break;
1673
		    case 'u': cmd = "underline"; break;
1674
		    case 's': cmd = "strikethrough"; break;
1675
		    case 'l': cmd = "justifyleft"; break;
1676
		    case 'e': cmd = "justifycenter"; break;
1677
		    case 'r': cmd = "justifyright"; break;
1678
		    case 'j': cmd = "justifyfull"; break;
1679
		    case 'z': cmd = "undo"; break;
1680
		    case 'y': cmd = "redo"; break;
1681
		    case 'v': cmd = "paste"; break;
1682
1683
		    case '0': cmd = "killword"; break;
1684
1685
			// headings
1686
		    case '1':
1687
		    case '2':
1688
		    case '3':
1689
		    case '4':
1690
		    case '5':
1691
		    case '6':
1692
			cmd = "formatblock";
1693
			value = "h" + key;
1694
			if (HTMLArea.is_ie) {
1695
				value = "<" + value + ">";
1696
			}
1697
			break;
1698
		}
1699
		if (cmd) {
1700
			// execute simple command
1701
			this.execCommand(cmd, false, value);
1702
			HTMLArea._stopEvent(ev);
1703
		}
1704
	}
1705
	/*
1706
	else if (keyEvent) {
1707
		// other keys here
1708
		switch (ev.keyCode) {
1709
		    case 13: // KEY enter
1710
			// if (HTMLArea.is_ie) {
1711
			this.insertHTML("<br />");
1712
			HTMLArea._stopEvent(ev);
1713
			// }
1714
			break;
1715
		}
1716
	}
1717
	*/
1718
	// update the toolbar state after some time
1719
	if (editor._timerToolbar) {
1720
		clearTimeout(editor._timerToolbar);
1721
	}
1722
	editor._timerToolbar = setTimeout(function() {
1723
		editor.updateToolbar();
1724
		editor._timerToolbar = null;
1725
	}, 50);
1726
};
1727
1728
// retrieve the HTML
1729
HTMLArea.prototype.getHTML = function() {
1730
	switch (this._editMode) {
1731
	    case "wysiwyg"  :
1732
		if (!this.config.fullPage) {
1733
			return HTMLArea.getHTML(this._doc.body, false, this);
1734
		} else
1735
			return this.doctype + "\n" + HTMLArea.getHTML(this._doc.documentElement, true, this);
1736
	    case "textmode" : return this._textArea.value;
1737
	    default	    : alert("Mode <" + mode + "> not defined!");
1738
	}
1739
	return false;
1740
};
1741
1742
// retrieve the HTML (fastest version, but uses innerHTML)
1743
HTMLArea.prototype.getInnerHTML = function() {
1744
	switch (this._editMode) {
1745
	    case "wysiwyg"  :
1746
		if (!this.config.fullPage)
1747
			return this._doc.body.innerHTML;
1748
		else
1749
			return this.doctype + "\n" + this._doc.documentElement.innerHTML;
1750
	    case "textmode" : return this._textArea.value;
1751
	    default	    : alert("Mode <" + mode + "> not defined!");
1752
	}
1753
	return false;
1754
};
1755
1756
// completely change the HTML inside
1757
HTMLArea.prototype.setHTML = function(html) {
1758
	switch (this._editMode) {
1759
	    case "wysiwyg"  :
1760
		if (!this.config.fullPage)
1761
			this._doc.body.innerHTML = html;
1762
		else
1763
			// this._doc.documentElement.innerHTML = html;
1764
			this._doc.body.innerHTML = html;
1765
		break;
1766
	    case "textmode" : this._textArea.value = html; break;
1767
	    default	    : alert("Mode <" + mode + "> not defined!");
1768
	}
1769
	return false;
1770
};
1771
1772
// sets the given doctype (useful when config.fullPage is true)
1773
HTMLArea.prototype.setDoctype = function(doctype) {
1774
	this.doctype = doctype;
1775
};
1776
1777
/***************************************************
1778
 *  Category: UTILITY FUNCTIONS
1779
 ***************************************************/
1780
1781
// browser identification
1782
1783
HTMLArea.agt = navigator.userAgent.toLowerCase();
1784
HTMLArea.is_ie	   = ((HTMLArea.agt.indexOf("msie") != -1) && (HTMLArea.agt.indexOf("opera") == -1));
1785
HTMLArea.is_opera  = (HTMLArea.agt.indexOf("opera") != -1);
1786
HTMLArea.is_mac	   = (HTMLArea.agt.indexOf("mac") != -1);
1787
HTMLArea.is_mac_ie = (HTMLArea.is_ie && HTMLArea.is_mac);
1788
HTMLArea.is_win_ie = (HTMLArea.is_ie && !HTMLArea.is_mac);
1789
HTMLArea.is_gecko  = (navigator.product == "Gecko");
1790
1791
// variable used to pass the object to the popup editor window.
1792
HTMLArea._object = null;
1793
1794
// function that returns a clone of the given object
1795
HTMLArea.cloneObject = function(obj) {
1796
	var newObj = new Object;
1797
1798
	// check for array objects
1799
	if (obj.constructor.toString().indexOf("function Array(") == 1) {
1800
		newObj = obj.constructor();
1801
	}
1802
1803
	// check for function objects (as usual, IE is fucked up)
1804
	if (obj.constructor.toString().indexOf("function Function(") == 1) {
1805
		newObj = obj; // just copy reference to it
1806
	} else for (var n in obj) {
1807
		var node = obj[n];
1808
		if (typeof node == 'object') { newObj[n] = HTMLArea.cloneObject(node); }
1809
		else                         { newObj[n] = node; }
1810
	}
1811
1812
	return newObj;
1813
};
1814
1815
// FIXME!!! this should return false for IE < 5.5
1816
HTMLArea.checkSupportedBrowser = function() {
1817
	if (HTMLArea.is_gecko) {
1818
		if (navigator.productSub < 20021201) {
1819
			alert("You need at least Mozilla-1.3 Alpha.\n" +
1820
			      "Sorry, your Gecko is not supported.");
1821
			return false;
1822
		}
1823
		if (navigator.productSub < 20030210) {
1824
			alert("Mozilla < 1.3 Beta is not supported!\n" +
1825
			      "I'll try, though, but it might not work.");
1826
		}
1827
	}
1828
	return HTMLArea.is_gecko || HTMLArea.is_ie;
1829
};
1830
1831
// selection & ranges
1832
1833
// returns the current selection object
1834
HTMLArea.prototype._getSelection = function() {
1835
	if (HTMLArea.is_ie) {
1836
		return this._doc.selection;
1837
	} else {
1838
		return this._iframe.contentWindow.getSelection();
1839
	}
1840
};
1841
1842
// returns a range for the current selection
1843
HTMLArea.prototype._createRange = function(sel) {
1844
	if (HTMLArea.is_ie) {
1845
		return sel.createRange();
1846
	} else {
1847
		this.focusEditor();
1848
		if (typeof sel != "undefined") {
1849
			try {
1850
				return sel.getRangeAt(0);
1851
			} catch(e) {
1852
				return this._doc.createRange();
1853
			}
1854
		} else {
1855
			return this._doc.createRange();
1856
		}
1857
	}
1858
};
1859
1860
// event handling
1861
1862
HTMLArea._addEvent = function(el, evname, func) {
1863
	if (HTMLArea.is_ie) {
1864
		el.attachEvent("on" + evname, func);
1865
	} else {
1866
		el.addEventListener(evname, func, true);
1867
	}
1868
};
1869
1870
HTMLArea._addEvents = function(el, evs, func) {
1871
	for (var i in evs) {
1872
		HTMLArea._addEvent(el, evs[i], func);
1873
	}
1874
};
1875
1876
HTMLArea._removeEvent = function(el, evname, func) {
1877
	if (HTMLArea.is_ie) {
1878
		el.detachEvent("on" + evname, func);
1879
	} else {
1880
		el.removeEventListener(evname, func, true);
1881
	}
1882
};
1883
1884
HTMLArea._removeEvents = function(el, evs, func) {
1885
	for (var i in evs) {
1886
		HTMLArea._removeEvent(el, evs[i], func);
1887
	}
1888
};
1889
1890
HTMLArea._stopEvent = function(ev) {
1891
	if (HTMLArea.is_ie) {
1892
		ev.cancelBubble = true;
1893
		ev.returnValue = false;
1894
	} else {
1895
		ev.preventDefault();
1896
		ev.stopPropagation();
1897
	}
1898
};
1899
1900
HTMLArea._removeClass = function(el, className) {
1901
	if (!(el && el.className)) {
1902
		return;
1903
	}
1904
	var cls = el.className.split(" ");
1905
	var ar = new Array();
1906
	for (var i = cls.length; i > 0;) {
1907
		if (cls[--i] != className) {
1908
			ar[ar.length] = cls[i];
1909
		}
1910
	}
1911
	el.className = ar.join(" ");
1912
};
1913
1914
HTMLArea._addClass = function(el, className) {
1915
	// remove the class first, if already there
1916
	HTMLArea._removeClass(el, className);
1917
	el.className += " " + className;
1918
};
1919
1920
HTMLArea._hasClass = function(el, className) {
1921
	if (!(el && el.className)) {
1922
		return false;
1923
	}
1924
	var cls = el.className.split(" ");
1925
	for (var i = cls.length; i > 0;) {
1926
		if (cls[--i] == className) {
1927
			return true;
1928
		}
1929
	}
1930
	return false;
1931
};
1932
1933
HTMLArea.isBlockElement = function(el) {
1934
	var blockTags = " body form textarea fieldset ul ol dl li div " +
1935
		"p h1 h2 h3 h4 h5 h6 quote pre table thead " +
1936
		"tbody tfoot tr td iframe address ";
1937
	return (blockTags.indexOf(" " + el.tagName.toLowerCase() + " ") != -1);
1938
};
1939
1940
HTMLArea.needsClosingTag = function(el) {
1941
	var closingTags = " head script style div span tr td tbody table em strong font a title ";
1942
	return (closingTags.indexOf(" " + el.tagName.toLowerCase() + " ") != -1);
1943
};
1944
1945
// performs HTML encoding of some given string
1946
HTMLArea.htmlEncode = function(str) {
1947
	// we don't need regexp for that, but.. so be it for now.
1948
	str = str.replace(/&/ig, "&amp;");
1949
	str = str.replace(/</ig, "&lt;");
1950
	str = str.replace(/>/ig, "&gt;");
1951
	str = str.replace(/\x22/ig, "&quot;");
1952
	// \x22 means '"' -- we use hex reprezentation so that we don't disturb
1953
	// JS compressors (well, at least mine fails.. ;)
1954
	return str;
1955
};
1956
1957
// Retrieves the HTML code from the given node.	 This is a replacement for
1958
// getting innerHTML, using standard DOM calls.
1959
HTMLArea.getHTML = function(root, outputRoot, editor) {
1960
	var html = "";
1961
	switch (root.nodeType) {
1962
	    case 1: // Node.ELEMENT_NODE
1963
	    case 11: // Node.DOCUMENT_FRAGMENT_NODE
1964
		var closed;
1965
		var i;
1966
		var root_tag = (root.nodeType == 1) ? root.tagName.toLowerCase() : '';
1967
		if (HTMLArea.is_ie && root_tag == "head") {
1968
			if (outputRoot)
1969
				html += "<head>";
1970
			// lowercasize
1971
			var save_multiline = RegExp.multiline;
1972
			RegExp.multiline = true;
1973
			var txt = root.innerHTML.replace(HTMLArea.RE_tagName, function(str, p1, p2) {
1974
				return p1 + p2.toLowerCase();
1975
			});
1976
			RegExp.multiline = save_multiline;
1977
			html += txt;
1978
			if (outputRoot)
1979
				html += "</head>";
1980
			break;
1981
		} else if (outputRoot) {
1982
			closed = (!(root.hasChildNodes() || HTMLArea.needsClosingTag(root)));
1983
			html = "<" + root.tagName.toLowerCase();
1984
			var attrs = root.attributes;
1985
			for (i = 0; i < attrs.length; ++i) {
1986
				var a = attrs.item(i);
1987
				if (!a.specified) {
1988
					continue;
1989
				}
1990
				var name = a.nodeName.toLowerCase();
1991
				if (/_moz|contenteditable|_msh/.test(name)) {
1992
					// avoid certain attributes
1993
					continue;
1994
				}
1995
				var value;
1996
				if (name != "style") {
1997
					// IE5.5 reports 25 when cellSpacing is
1998
					// 1; other values might be doomed too.
1999
					// For this reason we extract the
2000
					// values directly from the root node.
2001
					// I'm starting to HATE JavaScript
2002
					// development.  Browser differences
2003
					// suck.
2004
					//
2005
					// Using Gecko the values of href and src are converted to absolute links
2006
					// unless we get them using nodeValue()
2007
					if (typeof root[a.nodeName] != "undefined" && name != "href" && name != "src") {
2008
						value = root[a.nodeName];
2009
					} else {
2010
						value = a.nodeValue;
2011
						// IE seems not willing to return the original values - it converts to absolute
2012
						// links using a.nodeValue, a.value, a.stringValue, root.getAttribute("href")
2013
						// So we have to strip the baseurl manually -/
2014
						if (HTMLArea.is_ie && (name == "href" || name == "src")) {
2015
							value = editor.stripBaseURL(value);
2016
						}
2017
					}
2018
				} else { // IE fails to put style in attributes list
2019
					// FIXME: cssText reported by IE is UPPERCASE
2020
					value = root.style.cssText;
2021
				}
2022
				if (/(_moz|^$)/.test(value)) {
2023
					// Mozilla reports some special tags
2024
					// here; we don't need them.
2025
					continue;
2026
				}
2027
				html += " " + name + '="' + value + '"';
2028
			}
2029
			html += closed ? " />" : ">";
2030
		}
2031
		for (i = root.firstChild; i; i = i.nextSibling) {
2032
			html += HTMLArea.getHTML(i, true, editor);
2033
		}
2034
		if (outputRoot && !closed) {
2035
			html += "</" + root.tagName.toLowerCase() + ">";
2036
		}
2037
		break;
2038
	    case 3: // Node.TEXT_NODE
2039
		// If a text node is alone in an element and all spaces, replace it with an non breaking one
2040
		// This partially undoes the damage done by moz, which translates '&nbsp;'s into spaces in the data element
2041
		if ( !root.previousSibling && !root.nextSibling && root.data.match(/^\s*$/i) ) html = '&nbsp;';
2042
		else html = HTMLArea.htmlEncode(root.data);
2043
		break;
2044
	    case 8: // Node.COMMENT_NODE
2045
		html = "<!--" + root.data + "-->";
2046
		break;		// skip comments, for now.
2047
	}
2048
	return html;
2049
};
2050
2051
HTMLArea.prototype.stripBaseURL = function(string) {
2052
	var baseurl = this.config.baseURL;
2053
2054
	// strip to last directory in case baseurl points to a file
2055
	baseurl = baseurl.replace(/[^\/]+$/, '');
2056
	var basere = new RegExp(baseurl);
2057
	string = string.replace(basere, "");
2058
2059
	// strip host-part of URL which is added by MSIE to links relative to server root
2060
	baseurl = baseurl.replace(/^(https?:\/\/[^\/]+)(.*)$/, '$1');
2061
	basere = new RegExp(baseurl);
2062
	return string.replace(basere, "");
2063
};
2064
2065
String.prototype.trim = function() {
2066
	a = this.replace(/^\s+/, '');
2067
	return a.replace(/\s+$/, '');
2068
};
2069
2070
// creates a rgb-style color from a number
2071
HTMLArea._makeColor = function(v) {
2072
	if (typeof v != "number") {
2073
		// already in rgb (hopefully); IE doesn't get here.
2074
		return v;
2075
	}
2076
	// IE sends number; convert to rgb.
2077
	var r = v & 0xFF;
2078
	var g = (v >> 8) & 0xFF;
2079
	var b = (v >> 16) & 0xFF;
2080
	return "rgb(" + r + "," + g + "," + b + ")";
2081
};
2082
2083
// returns hexadecimal color representation from a number or a rgb-style color.
2084
HTMLArea._colorToRgb = function(v) {
2085
	if (!v)
2086
		return '';
2087
2088
	// returns the hex representation of one byte (2 digits)
2089
	function hex(d) {
2090
		return (d < 16) ? ("0" + d.toString(16)) : d.toString(16);
2091
	};
2092
2093
	if (typeof v == "number") {
2094
		// we're talking to IE here
2095
		var r = v & 0xFF;
2096
		var g = (v >> 8) & 0xFF;
2097
		var b = (v >> 16) & 0xFF;
2098
		return "#" + hex(r) + hex(g) + hex(b);
2099
	}
2100
2101
	if (v.substr(0, 3) == "rgb") {
2102
		// in rgb(...) form -- Mozilla
2103
		var re = /rgb\s*\(\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\s*\)/;
2104
		if (v.match(re)) {
2105
			var r = parseInt(RegExp.$1);
2106
			var g = parseInt(RegExp.$2);
2107
			var b = parseInt(RegExp.$3);
2108
			return "#" + hex(r) + hex(g) + hex(b);
2109
		}
2110
		// doesn't match RE?!  maybe uses percentages or float numbers
2111
		// -- FIXME: not yet implemented.
2112
		return null;
2113
	}
2114
2115
	if (v.substr(0, 1) == "#") {
2116
		// already hex rgb (hopefully :D )
2117
		return v;
2118
	}
2119
2120
	// if everything else fails ;)
2121
	return null;
2122
};
2123
2124
// modal dialogs for Mozilla (for IE we're using the showModalDialog() call).
2125
2126
// receives an URL to the popup dialog and a function that receives one value;
2127
// this function will get called after the dialog is closed, with the return
2128
// value of the dialog.
2129
HTMLArea.prototype._popupDialog = function(url, action, init) {
2130
	Dialog(this.popupURL(url), action, init);
2131
};
2132
2133
// paths
2134
2135
HTMLArea.prototype.imgURL = function(file, plugin) {
2136
	if (typeof plugin == "undefined")
2137
		return _editor_url + file;
2138
	else
2139
		return _editor_url + "plugins/" + plugin + "/img/" + file;
2140
};
2141
2142
HTMLArea.prototype.popupURL = function(file) {
2143
	var url = "";
2144
	if (file.match(/^plugin:\/\/(.*?)\/(.*)/)) {
2145
		var plugin = RegExp.$1;
2146
		var popup = RegExp.$2;
2147
		if (!/\.html$/.test(popup))
2148
			popup += ".html";
2149
		url = _editor_url + "plugins/" + plugin + "/popups/" + popup;
2150
	} else
2151
		url = _editor_url + this.config.popupURL + file;
2152
	return url;
2153
};
2154
2155
/**
2156
 * FIX: Internet Explorer returns an item having the _name_ equal to the given
2157
 * id, even if it's not having any id.  This way it can return a different form
2158
 * field even if it's not a textarea.  This workarounds the problem by
2159
 * specifically looking to search only elements having a certain tag name.
2160
 */
2161
HTMLArea.getElementById = function(tag, id) {
2162
	var el, i, objs = document.getElementsByTagName(tag);
2163
	for (i = objs.length; --i >= 0 && (el = objs[i]);)
2164
		if (el.id == id)
2165
			return el;
2166
	return null;
2167
};
2168
2169
2170
2171
// EOF
2172
// Local variables: //
2173
// c-basic-offset:8 //
2174
// indent-tabs-mode:t //
2175
// End: //