zpeditor-core.js

zapatec suite 最新版 20070204,非常棒的ajax widgets 工具包

/**
 * Sets widget size in pixels
 *
 * @public
 * @param {number} width Editor container width
 * @param {number} height Editor container height
 */
Zapatec.MinimalEditor.prototype.setSize = function(width, height) {
	if (!width && !height) {
		width = parseInt(this.container.style.width);
		height = parseInt(this.container.style.height);
	}

	// Set container dimensions
	this.container.style.width = width + 'px';
	this.container.style.height = height + 'px';

	if (!this.config.excludeToolbar) {
		// Set toolbar width
		this.toolbar.style.width = width + 'px';
	}

	// Get iframe pane size
	var paneSize = this.getPaneSize(width, height);
	var paneWidth = paneSize.width;
	var paneHeight = paneSize.height;

	var iframeWidth = paneWidth;
	var iframeHeight = paneHeight;

	if (!Zapatec.is_ie && !Zapatec.is_khtml) {
		iframeHeight -= 4;

		if (!this.isMaximize) {
			iframeWidth -= 4;
		}
	}

	if (Zapatec.is_ie7) {
		iframeWidth -= 1;
		iframeHeight -= 3;
	}

	// Set iframe dimensions
	this.pane.getContainer().style.width = iframeWidth + 'px';
	this.pane.getContainer().style.height = iframeHeight + 'px';

	var editorPanelHeight = paneHeight;
	var editorPanelWidth = width - 2;
	if (!Zapatec.is_ie && !Zapatec.is_khtml) {
		editorPanelHeight -= 4;
	}
	if (Zapatec.is_ie7) {
		editorPanelHeight -= 1;
	}

	// Set editor panel dimensions
	this.editorPanel.style.width = editorPanelWidth + 'px';
	this.editorPanel.style.height = editorPanelHeight + 'px';

	// Setup WCH
	Zapatec.Utils.setupWCH(this.wch, 0, 0, width, paneHeight);

	if (Zapatec.is_ie) {
		paneWidth -= 2;
		paneHeight -= 2;
		if (Zapatec.is_ie7) {
			paneWidth -= 5;
			paneHeight -= 6;
		}
	}
	else {
		if (!Zapatec.is_khtml) {
			if (this.isMaximize) {
				paneHeight -= 5;
			}
			else {
				paneHeight -= 5;
				paneWidth -= 4;
			}
		}
	}

	// Set textarea field dimensions
	this.config.field.style.width = paneWidth + 'px';
	this.config.field.style.height = paneHeight + 'px';
}

/**
 * Gets iframe size in pixels. Extracts toolbar dimensions from whole size
 *
 * @private
 * @param {number} width Editor container width
 * @param {number} height Editor container height
 */
Zapatec.MinimalEditor.prototype.getPaneSize = function(width, height) {

	var paneWidth = width;
	var paneHeight = height;

	// If there are toolbar buttons
	if (!this.config.excludeToolbar && 0 < this.config.toolbarElements.length) {
		paneHeight -= this.toolbar.offsetHeight;

		if (paneHeight < 50) {
			paneHeight = 50;
		}
	}

	if (Zapatec.is_ie) {
		paneWidth -= 2;
	}
	else {
		if (Zapatec.is_khtml) {
			paneWidth -= 2;
		}
		else {
			if (this.isMaximize) {
				paneWidth -= 2;
			}
			else {
				paneWidth += 2;
			}
		}
	}

	return {width: paneWidth, height: paneHeight};
}

/**
 * Loads content from TEXTAREA to editor area
 */
Zapatec.MinimalEditor.prototype.loadContentFromField = function() {
	if (this.mode == "WYSIWYG") {
		this.pane.setContent(this.config.field.value);
	}
	else {
		var html = this.config.field.value;
		this.setHTML(html);
	}
}

/**
 * Saves value from editor designer area to original TEXTAREA element 
 */
Zapatec.MinimalEditor.prototype.saveContentToField = function() {
	if (this.mode == "WYSIWYG") {
		this.config.field.value = this.getHTML();
	}
}

/**
 * Toggles design mode for editor
 * @private
 * @param {boolean} enable enable/disable design mode
 */
Zapatec.MinimalEditor.prototype.toggleDesignMode = function(enable) {
	if (Zapatec.is_ie) {
		this.pane.getContentElement().contentEditable = enable;
	}
	else {
		this.pane.getContainer().contentWindow.document.designMode = enable ? "on" : "off";
	}
}

/**
 * Invokes execCommand in a browser compatible way
 * @private
 * @param {string} command command to execute
 * @param {object} arg1 command argument 1
 * @param {object} arg2 command argument 2
 */
Zapatec.MinimalEditor.prototype.execCommand = function(command, arg1, arg2) {
	var object = null;

	if (Zapatec.is_ie) {
		object = this.pane.getIframeDocument();
	}
	else {
		object = this.pane.getContainer().contentWindow.document;
	}

	return object.execCommand(command, arg1, arg2);
}

/**
 * Invokes queryCommandValue in a browser compatible way
 * @private
 * @param {string} command command to query
 */
Zapatec.MinimalEditor.prototype.queryCommandValue = function(command) {
	var object = this.pane.getIframeDocument();
	return object.queryCommandValue(command);
}

/**
 * Invokes queryCommandState in a browser compatible way
 * @private
 * @param {string} command command to query
 */
Zapatec.MinimalEditor.prototype.queryCommandState = function(command) {
	var object = this.pane.getIframeDocument();
	return object.queryCommandState(command);
}

/**
 * Invokes queryCommandEnabled in a browser compatible way
 * @private
 * @param {string} command command to query
 */
Zapatec.MinimalEditor.prototype.queryCommandEnabled = function(command) {
	var object = this.pane.getIframeDocument();
	return object.queryCommandEnabled(command);
}

/**
 * Make the WYSIWYG editor focused
 * @private
 */
Zapatec.MinimalEditor.prototype.focus = function() {
	this.pane.getContainer().contentWindow.focus();
}

/**
 * Make the HTML text area focused
 * @private
 */
Zapatec.MinimalEditor.prototype.focusHtml = function() {
	if (Zapatec.is_ie7) {
		// Store page vertical scroll position
		var scrollTop = Zapatec.Utils.getPageScrollY();
	}
	this.config.field.focus();
	if (Zapatec.is_ie7) {
		// Restore page vertical scroll position
		window.scroll(0, scrollTop);
	}
}

/**
 * Creates toolbar with buttons under editor
 * @private
 */
Zapatec.MinimalEditor.prototype.addButtons = function() {
	if (this.config.toolbarElements.length == 0) {
		return false;
	}

	this.toolbar = document.createElement("table");
	this.toolbar.id = 'zpEditor' + this.id + 'ToolbarTable';
	// Add toolbar before original html textarea field
	this.container.insertBefore(this.toolbar, this.editorPanel);

	this.toolbar.border = 0;
	this.toolbar.className = this.getClassName({prefix: "zpEditor", suffix: "Toolbar"});
	this.toolbar.style.width = this.config.field.clientWidth + 'px';

	var tbody = document.createElement("tbody");
	this.toolbar.appendChild(tbody);

	var tr = document.createElement("tr");
	tbody.appendChild(tr)

	var td = document.createElement("td");
	td.setAttribute("nowrap", "true");
	tr.appendChild(td);

	var span = document.createElement("span");
	span.className = "toolbarPanel";
	td.appendChild(span)

	var self = this;

	// For each element in toolbar config
	for (var ii = 0; ii < this.config.toolbarElements.length; ii++) {
		var element = this.config.toolbarElements[ii];

		// Skip button if not supported
		if (this.webKitVersion && this.webKitMap[element] &&
		    this.webKitVersion < this.webKitMap[element]) {
			continue;
		}

		switch (element) {
			case "maximize":
				var tooltip = this.getMessage('maximizeTooltip');
				var button = this.createButton("maximize", tooltip, null, function() {
					self.resizeEditor();
					// Focus editor
					self.focus();
				});
				button.id = 'zpEditor' + this.id + 'Maximize';
				span.appendChild(button);
				break;
			case "fontname":
				var fontNameSelect = this.createSelect(
								["Font", "Arial", "Courier", "Times New Roman"],
								["Font", "Arial", "Courier", "Times New Roman"],
								function() {
									self.execCommand("fontname", false, this.options[this.options.selectedIndex].value);
									self.saveContentToField();

									// Focus editor
									self.focus();

									// Store an undo step
									self.undo.saveUndo();

									// Update toolbar icon states
									self.updateToolbar();
								}
								);
				fontNameSelect.id = 'zpEditor' + this.id + 'FontName';
				span.appendChild(fontNameSelect);
				break;
			case "fontsize":
				var fontSizeSelect = this.createSelect(
								["Size", "1", "2", "3", "4", "5", "6", "7"],
								["Size", "1", "2", "3", "4", "5", "6", "7"],
								function() {
									self.execCommand("fontsize", false,
													this.options[this.options.selectedIndex].value);
									self.saveContentToField();

									// Focus editor
									self.focus();

									// Store an undo step
									self.undo.saveUndo();

									// Update toolbar icon states
									self.updateToolbar();
								}
								);
				fontSizeSelect.id = 'zpEditor' + this.id + 'FontSize';
				span.appendChild(fontSizeSelect);
				break;
			case "forecolor":
			// Fall through
			case "backcolor":
				var button = this.createColorButton(element == "forecolor");
				span.appendChild(button);

				break;
			case "insertlink":
				var tooltip = this.getMessage('insertLinkTooltip');
				var button = this.createButton("link", tooltip, function() {
					// Show a insert link window
					self.showInsertLinkWindow();

					// Focus editor
					self.focus();
				});
				button.id = 'zpEditor' + this.id + 'InsertLink';
				span.appendChild(button);
				break;
			case "insertimage":
				var tooltip = this.getMessage('insertImageTooltip');
				var button = this.createButton("image", tooltip, function() {
					var text = self.getMessage('insertImagePrompt');
					var imgUrl = prompt(text, "http://");

					if (imgUrl != null && imgUrl != "") {
						self.execCommand("insertimage", false, imgUrl);
						self.saveContentToField();

						// Focus editor
						self.focus();

						// Store an undo step
						self.undo.saveUndo();

						// Update toolbar icon states
						self.updateToolbar();
					}
				});
				button.id = 'zpEditor' + this.id + 'InsertImage';
				span.appendChild(button);
				break;
			case "inserttable":
				var tooltip = this.getMessage('insertTableTooltip');
				var button = this.createButton("table", tooltip, function() {

					if (Zapatec.is_khtml) {
						self.storeSelection();
					}

					var rowsText = this.getMessage('insertTableRowsPrompt');
					var rows = parseInt(prompt(rowsText, 2));
					var colsText = this.getMessage('insertTableColsPrompt');
					var cols = parseInt(prompt(colsText, 2));
					var borderWidthText = this.getMessage('insertTableBorderWidthPrompt');
					var borderWidth = parseInt(prompt(borderWidthText, 2));

					if (isNaN(borderWidth)) {
						borderWidth = 1;
					}

					if (!isNaN(rows) && rows > 0 && !isNaN(cols) && cols > 0) {
						var tbl = self.pane.getIframeDocument().createElement("table");
						tbl.setAttribute("border", borderWidth);
						tbl.setAttribute("cellpadding", "1");
						tbl.setAttribute("cellspacing", "1");

						var tbltbody = self.pane.getIframeDocument().createElement("tbody");

						for (var kk = 0; kk < rows; kk++) {
							var tbltr = self.pane.getIframeDocument().createElement("tr");

							for (var jj = 0; jj < cols; jj++) {
								var tbltd = self.pane.getIframeDocument().createElement("td");
								tbltd.setAttribute("width", 10);

								var tblbr = self.pane.getIframeDocument().createElement("br");
								tbltd.appendChild(tblbr);
								tbltr.appendChild(tbltd);
							}

							tbltbody.appendChild(tbltr);
						}

						tbl.appendChild(tbltbody);

						self.insertNodeAtSelection(tbl);
					}

					self.saveContentToField();

					// Focus editor
					self.focus();

					// Store an undo step
					self.undo.saveUndo();

					// Update toolbar icon states
					self.updateToolbar();
				});
				button.id = 'zpEditor' + this.id + 'InsertTable';
				span.appendChild(button);
				break;
			case "inserthorizontalrule":
				var tooltip = this.getMessage('insertHorizontalRule');
				var button = this.createButton("hr", tooltip, function() {

					var hr = self.pane.getIframeDocument().createElement("hr");
					self.insertNodeAtSelection(hr);

					self.saveContentToField();

					// Focus editor
					self.focus();

					// Store an undo step
					self.undo.saveUndo();

					// Update toolbar icon states
					self.updateToolbar();
				});
				button.id = 'zpEditor' + this.id + 'InsertHorizontalRule';
				span.appendChild(button);
				break;
			case "insertspecialchar":
				var tooltip = this.getMessage('insertSpecialCharacter');
				var button = this.createButton("insertspecial", tooltip, function() {

					// Show a character map window
					self.showCharMapWindow();

					// Focus editor
					self.focus();
				});
				button.id = 'zpEditor' + this.id + 'InsertSpecialChar';
				span.appendChild(button);