zpeditor-core.js

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

		self.execCommand(command, false, color);
		self.saveContentToField();

		// Focus editor
		self.focus();

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

		// Update toolbar icon states
		self.updateToolbar();
	};

	colorButton[0] = this.createButton(strClass, tooltip,
					function(ev) {
						if (Zapatec.is_khtml) {
							self.storeSelection();
						}

						var target = Zapatec.Utils.getTargetElement(ev);
						var isDropAction = target.isDropArrow;
						// Get current color
						var color = getter();
						// A picker is to be shown if arrow is clicked or color is not set yet
						var isShowPicker = isDropAction || null == color || "" == color;
						if (isShowPicker) {
							// Will show color picker on mouse release
							return;
						}
						setColor(color);
					},
					function(ev) {
						var target = Zapatec.Utils.getTargetElement(ev);
						var isDropAction = target.isDropArrow;
						// Get current color
						var color = getter();
						// A picker is to be shown if arrow is clicked or color is not set yet
						var isShowPicker = isDropAction || null == color || "" == color;
						if (isShowPicker) {
							var show = function() {
								// Create new color picker
								var colorEventPicker = new Zapatec.ColorPicker({
									button: colorButton[0],
									color: color,
									handleButtonClick: false,
									eventListeners:{select: setColor}
								});
								colorEventPicker.isShown = true;
								// Show color picker
								colorEventPicker.show();
							};
							// Invoke color picker show later
							setTimeout(show, 100);
						}
					},
					null, true, getter());
	colorButton[0].id = id;
	return colorButton[0];
}


/**
 * Insert DOM element in place of the current selection
 * @private
 * @param {object} insertNode A html DOM reference to insert
 */
Zapatec.MinimalEditor.prototype.insertNodeAtSelection = function(insertNode) {
	if (Zapatec.is_ie) {
		var self = this;
		setTimeout(function() {
			var sel = self.pane.getContainer().contentWindow.document.selection;
			var range = sel.createRange();
			range.pasteHTML(insertNode.outerHTML);
		}, 10);
	}
	else {
		if (Zapatec.is_khtml) {
			var sel;
			if (this.oldSelection) {
				sel = this.oldSelection;
			}
			else {
				sel = this.pane.getContainer().contentWindow.getSelection();
			}
			var range = this.pane.getContainer().contentWindow.document.createRange();

			var isRangeSet = false;
			if (sel.baseNode == sel.extentNode && sel.baseOffset == sel.extentOffset) {
				if (sel.type == "Range") {
					range.setStartBefore(sel.baseNode);
					range.setEndAfter(sel.extentNode);
					isRangeSet = true;
				}
			}
			if (!isRangeSet) {
				range.setStart(sel.baseNode, sel.baseOffset);
				range.setEnd(sel.extentNode, sel.extentOffset);
			}
		}
		else {
			var sel = this.pane.getContainer().contentWindow.getSelection();
			var range = sel.getRangeAt(0);
			sel.removeAllRanges();
		}

		range.deleteContents();

		var container = range.startContainer;
		var pos = range.startOffset;
		var doc = this.pane.getIframeDocument();
		range = doc.createRange();

		if (container.nodeType == 3 && insertNode.nodeType == 3) {
			container.insertData(pos, insertNode.nodeValue);
			range.setEnd(container, pos + insertNode.length);
			range.setStart(container, pos + insertNode.length);
		}
		else {
			var afterNode;
			if (container.nodeType == 3) {
				var textNode = container;
				container = textNode.parentNode;
				var text = textNode.nodeValue;

				var textBefore = text.substr(0, pos);
				var textAfter = text.substr(pos);

				var beforeNode = doc.createTextNode(textBefore);
				afterNode = doc.createTextNode(textAfter);

				container.insertBefore(afterNode, textNode);
				container.insertBefore(insertNode, afterNode);
				container.insertBefore(beforeNode, insertNode);

				container.removeChild(textNode);
			}
			else {
				afterNode = container.childNodes[pos];
				container.insertBefore(insertNode, afterNode);

				if (!afterNode) {
					// Move carret after currently inserted node
					range.setEnd(insertNode, 1);
					range.setStart(insertNode, 1);
				}
			}

			if (afterNode) {
				// Move carret at the node after currently inserted node
				range.setEnd(afterNode, 0);
				range.setStart(afterNode, 0);
			}
		}

		sel.addRange(range);
	}
}

/**
 * Set a given html inside both editors (HTML and WYSIWYG)
 * @private
 * @param {string} html A html content to set inside the editor
 */
Zapatec.MinimalEditor.prototype.setHTML = function(html) {
	this.pane.getIframeDocument().body.innerHTML = html;
	this.config.field.value = html;
}

/**
 * Gets html content inside the editor
 * @private
 */
Zapatec.MinimalEditor.prototype.getHTML = function() {
	var html;
	if (this.mode == "WYSIWYG") {
		if (this.config.dumpHtml) {
			html = dump.getHTML(this.pane.getIframeDocument().body, false, 0);
		}
		else {
			html = this.pane.getContentElement().innerHTML;
		}
		if (this.config.preserveImgSrc) {
			// Replace src attribute with the value of the respective _zpSrc attribute
		  // in every img
			html = html.replace(/(<img[^>]+)(src=("|')[^"']*\3)([^>]*)(_zpSrc=("|')([^"']*)\6)([^>]*>)/gi,
							"$1src=$3$7$3$4$8");
			html = html.replace(/(<img[^>]+)(_zpSrc=("|')([^"']*)\3)([^>]*)(src=("|')[^"']*\7)([^>]*>)/gi,
							"$1src=$3$4$3$5$8");
		}
		if (this.config.preserveAnchorHref) {
			// Replace href attribute with the value of the respective _zpHref attribute
		  // in every img
			html = html.replace(/(<a[^>]+)(href=("|')[^"']*\3)([^>]*)(_zpHref=("|')([^"']*)\6)([^>]*>)/gi,
							"$1href=$3$7$3$4$8");
			html = html.replace(/(<a[^>]+)(_zpHref=("|')([^"']*)\3)([^>]*)(href=("|')[^"']*\7)([^>]*>)/gi,
							"$1href=$3$4$3$5$8");
		}
		// If we need xhtml output
		if (this.config.generateXhtml) {
			html = html2Xhtml.convert(html);
		}
	}
	else {
		html = this.config.field.value;
	}
	return	html;
}

/**
 * Switch editor to HTML mode
 * @private
 */
Zapatec.MinimalEditor.prototype.switchToHTML = function() {
	if (this.mode != "WYSIWYG") {
		return false;
	}

	var html = this.getHTML();

	this.mode = "HTML";
	this.toggleButtons(false);

	this.setHTML(html);

	// show original field
	this.config.field.style.display = "block";

	// hide editable iframe
	if (Zapatec.is_khtml) {
		this.pane.getContainer().style.visibility = "hidden";
		// Store pane height
		this.pane.getContainer().hiddenHeight = this.pane.getContainer().style.height;
		// Make pane with 0 height
		this.pane.getContainer().style.height = "0";
	}
	else {
		this.pane.getContainer().style.display = "none";
	}
}

/**
 * Switch editor to WYSIWYG mode
 * @private
 */
Zapatec.MinimalEditor.prototype.switchToWYSIWYG = function() {
	if (this.mode != "HTML") {
		return false;
	}

	var html = this.getHTML();

	this.mode = "WYSIWYG";

	// Enable all toolbar buttons
	this.toggleButtons(true);
	if (this.config.preserveImgSrc) {
		// Add additional _zpSrc attribute to every <img> element using the same
		// value as the src attribute
		html = html.replace(/(<img[^>]+)(src=("|')([^"']*)\3)([^>]*>)/gi,
						"$1$2 _zpSrc=$3$4$3 $5");
	}
	if (this.config.preserveAnchorHref) {
		// Add additional _zpHref attribute to every <a> element using the same
		// value as the href attribute
		html = html.replace(/(<a[^>]+)(href=("|')([^"']*)\3)([^>]*>)/gi,
						"$1$2 _zpHref=$3$4$3 $5");
	}
	this.setHTML(html);

	// hide original field
	this.config.field.style.display = "none";

	// show editable iframe
	if (Zapatec.is_khtml) {
		this.pane.getContainer().style.visibility = "show";
		// Restore pane height
		this.pane.getContainer().style.height = this.pane.getContainer().hiddenHeight;
	}
	else {
		this.pane.getContainer().style.display = "block";
	}
}

/**
 * Creates a new toolbar button after the last one
 * @private
 * @param buttonClass - [string] A css class to apply to the button
 * @param tooltip - [string] Tooltip text
 * @param func - [function] An action handler function the be attached
 * @param isOnMouseDown - [boolean] If true the action will be triggered on
 * mouse down, otherwise it will trigger on click. Default is true.
 * @param buttonTitle - [string] Button text
 */
Zapatec.MinimalEditor.prototype.createButton = function(buttonClass,
                                                        tooltip, downAction, clickAction, text,
                                                        isDropDown, color) {
	// If text param is not specified
	if (null == text) {
		text = "";
	}

	var params = {
		theme: this.config.theme,
		themePath: this.config.themePath,
		text: text,
	//		image: this.config.themePath + "px.gif",
		className: "zpEditorButton " + buttonClass
	};

	if (isDropDown) {
		var img = this.config.themePath + this.config.theme + '/dropdown.gif';
		params.image = img;
	}

	// Attach downAction if any
	if (downAction) {
		params.downAction = downAction;
	}
	// Attach clickAction if any
	if (clickAction) {
		params.clickAction = clickAction;
	}

	// Create a new button
	var button = new Zapatec.Button(params);
	this.createProperty(button.getContainer(), "button", button);
	if (isDropDown) {
		button.img.isDropArrow = true;
		// Create a div that represents current color
		var colorDiv = document.createElement("img");
		// Set color div style
		Zapatec.Utils.addClass(colorDiv, this.getClassName({
			prefix: "zpEditor",
			suffix: "ColorMark"
		}));
		button.internalContainer.insertBefore(colorDiv, button.img);

		// Attach color marker element to its respective button
		this.createProperty(button.getContainer(), "colorDiv", colorDiv);
		// Set initial color of color marker
		if (color) {
			colorDiv.background = color;
		}

		// Set correct style of drop down button
		Zapatec.Utils.addClass(button.getContainer(), this.getClassName({
			prefix: "zpButton",
			suffix: "Container"
		}));
		Zapatec.Utils.removeClass(button.getContainer(), this.getClassName({
			prefix: "zpButtonImage",
			suffix: "Container"
		}));

		// Set correct style of drop down arrow image
		Zapatec.Utils.addClass(button.img, this.getClassName({
			prefix: "zpEditor",
			suffix: "DropDown"
		}));
	}

	// Create tooltip
	if (tooltip && this.config.enableTooltips) {
		var div = document.createElement("div");
		div.innerHTML = tooltip;
		var objTooltip = new Zapatec.Tooltip({
			target: button.container,
			tooltip: div,
			parent: this.container
		});
	}

	this.buttons.push(button);

	return button.getContainer();
}

/**
 * Help function for creating selects
 * @private
 * @param {array} options Array of string options to appear inside the select
 * @param {array} values Array of values to be associated with each option
 * @param {function} func A select onChange handler function to be attached
 */
Zapatec.MinimalEditor.prototype.createSelect = function(options, values, func) {
	if (options.length != values.length) {
		Zapatec.Log({description: this.getMessage('optionsNotEqualValuesError')});
		return null;
	}

	var select = document.createElement("select");
	select.className = "zpEditorSelect";
	for (var ii = 0; ii < options.length; ii++) {
		select.options[ii] = new Option(options[ii], values[ii])
	}

	select.onchange = func;

	return select;
}

/**
 * Enable/disable all buttons in the toolbar except the HTML/WYSIWYG switcher
 *
 * @private
 * @param {boolean} enable true to enable, false to disable
 */
Zapatec.MinimalEditor.prototype.toggleButtons = function(enable) {
	for (var ii = 0; ii < this.buttons.length; ii++) {
		var button = this.buttons[ii];

		var className = button.getContainer().className;
		// Skip HTML/WYSIWYG toggle buttons
		if (/switch/.test(className)) {
			continue;
		}

		if (enable) {
			button.enable();
		}
		else {
			button.disable();
		}
	}
}

/**
 * Gets a toolbar button given its id
 *
 * @private
 * @param {string} id button id
 */
Zapatec.MinimalEditor.prototype.getButton = function(id) {
	for (var ii = 0; ii < this.buttons.length; ii++) {
		var button = this.buttons[ii];

		var currentId = button.getContainer().id;
		if (currentId == id) {
			return button;
		}

	}
	return null;
}

/**
 * Handles Enter key pressed event. Deletes currently selected text and inserts
 * a &lt;br&gt; tag. This handler is attached only in IE where Enter produces
 * a &lt;p&gt; rather than &lt;br&gt; tag
 * @private
 */
Zapatec.MinimalEditor.prototype.onEnterPressed = function() {
	var iframeDocument = this.pane.getIframeDocument();
	if (typeof iframeDocument.selection != 'undefined') {
		var selection = iframeDocument.selection;

		if (selection.type.toLowerCase() == 'control') {
			// Delete selection
			selection.clear();
		}

		var range = selection.createRange();

		// If we are inside an ordered/bulleted list
		if (iframeDocument.queryCommandState('InsertOrderedList') ||
		    iframeDocument.queryCommandState('InsertUnorderedList')) {
			return false;
		}

		// Insert <br>
		range.pasteHTML('<br>');