editor.js

采用模块化设计,自由组合文章,软件,论坛等模块,安装方便快捷 模板支持Dreamweaver可视化编辑,创建风格更为容易,专业

// From  www.phpwind.com
var code_htm = new Array();
var code_num = 0;
var method = 4;

function WYSIWYD(editmode) {
	this._editMode = editmode;
	this.config = new WYSIWYD.Config();
	this._htmlArea = null;
	this._textArea = null;
	this._timerToolbar = null;
	this._doc = null;
	this._iframe = null;
	this._pos = 0;
	this._linknum = 1;
}
WYSIWYD.prototype.init = function() {
	this._textArea = WYSIWYD.getElementById("textarea",'textarea');
	var editor = this;
	var textarea = this._textArea;
	
	if (this._editMode == 'wysiwyg') {
		this.initIframe();
		if (!is_ie) {
			this._doc.designMode = "off";
		}
		
		this._textArea.style.display = "none";
		this._iframe.style.display = "block";
		if (!is_ie) {
			this._doc.designMode = "on";
		}
	}
	if (textarea.form) {

        WYSIWYD._addEvent(textarea, "keydown",function(event) {quickpost(event);});
		var f = textarea.form;
		if (typeof f.onsubmit == "function") {
			var funcref = f.onsubmit;
			if (typeof f.__msh_prevOnSubmit == "undefined") {
				f.__msh_prevOnSubmit = [];
			}
			f.__msh_prevOnSubmit.push(funcref);
		}
		f.onsubmit = function() {
			if (editor._editMode == "textmode") {
				editor._textArea.value = editor.getHTML();
			} else {
				editor._textArea.value = htmltocode(editor.getHTML());
			}
			var a = this.__msh_prevOnSubmit;
			if (typeof a != "undefined") {
				for (var i in a) {
					return a[i]();
				}
			}
		};
	}
	this.initButtom();
	this.updateToolbar();
}
WYSIWYD.prototype.initButtom = function() {
	var tb_objects = new Object();
	this._toolbarObjects = tb_objects;
	
	function setButtonStatus(id, newval) {
		var oldval = this[id];
		var el = this.element;
		if (oldval != newval) {
			switch(id) {
			    case "enabled":
					if (newval) {
						WYSIWYD._removeClass(el, "buttonDisabled");
						el.disabled = false;
					} else {
						WYSIWYD._addClass(el, "buttonDisabled");
						el.disabled = true;
					}
					break;
			    case "active":
					if (newval) {
						WYSIWYD._addClass(el, "buttonPressed");
					} else {
						WYSIWYD._removeClass(el, "buttonPressed");
					}
					break;
			}
			this[id] = newval;
		}
	}

	function setButton(txt,btn) {
		var el = document.getElementById('wy_' + txt);
		var obj = {
			name	: txt,
			element : el,
			enabled : true,
			active	: false,
			text	: btn[0],
			cmd		: btn[1],
			state	: setButtonStatus,
			mover   : btn[2]
		}
		tb_objects[txt] = obj;
		el.unselectable = "on";
	
		WYSIWYD._addEvent(el, "click", function(ev) {
			if (obj.enabled) with (WYSIWYD) {
				_removeClass(el, "buttonActive");
				_removeClass(el, "buttonHover");
				obj.cmd(obj.name);
				_stopEvent(is_ie ? window.event : ev);
			}
		});
		WYSIWYD._addEvent(el, "mouseover", function() {
			if (obj.enabled) with (WYSIWYD) {
				_addClass(el, "buttonHover");
			}
		});
		WYSIWYD._addEvent(el, "mouseout", function() {
			if (obj.enabled) with (WYSIWYD) {
				_removeClass(el, "buttonHover");
				_removeClass(el, "buttonActive");
				(obj.active) && _addClass(el, "buttonPressed");
			}
		});
		if (txt != 'htmlmode' && txt != 'windcode') {
			WYSIWYD._addEvent(el, "mousedown", function(ev) {
				if (obj.enabled) with (WYSIWYD) {
					_addClass(el, "buttonActive");
					_removeClass(el, "buttonPressed");
					_stopEvent(is_ie ? window.event : ev);
				}
			});
		}
	}
	function setSelect(txt) {
		var el = document.getElementById('wy_' + txt);
		var cmd = txt;
		var options = editor.config[txt];
		if (options) {
			var obj = {
				name	: txt,
				element : el,
				enabled : true,
				text	: true,
				cmd		: cmd,
				state	: setButtonStatus,
				mover   : false
			}
			tb_objects[txt] = obj;
			el.unselectable = "on";
			el.onclick = function() {
				ShowSelect(obj.name);
			}
		}
	}
	var buttoms = this.config.btnList;
	for (var txt in buttoms) {
		setButton(txt,buttoms[txt]);
	}
	var selects = this.config.selList;
	for (var i in selects) {
		setSelect(selects[i]);
	}
}
WYSIWYD.prototype.initIframe = function() {
	var htmlarea = document.createElement("div");
	htmlarea.id  = 'htmlarea';
	htmlarea.className = "htmlarea";
	htmlarea.style.width = "100%";
	this._htmlArea = htmlarea;
	this._textArea.parentNode.insertBefore(htmlarea, this._textArea);

	var iframe = document.createElement("iframe");
	iframe.name = 'iframe';
	iframe.style.display = "none";
	htmlarea.appendChild(iframe);
	this._iframe = iframe;

	if (!is_ie) {
		iframe.style.borderWidth = "0px";
	}
	var height = this._textArea.offsetHeight;
	var width  = this._textArea.offsetWidth;
	height = parseInt(height);
	width = parseInt(width);
	if (!is_ie) {
		height -= 3;
		width -= 3;
	}
	iframe.style.width   = width + "px";
	iframe.style.height  = height + "px";

	this._textArea.style.width = iframe.style.width;
	this._textArea.style.height= iframe.style.height;

	var doc = this._iframe.contentWindow.document;
	
	this._doc = doc;

	doc.open();
	var html = "<html>\n";
	html += "<head>\n";
	html += "<style> html,body {border:0px;font-family:arial;font-size:12px;margin:2;}\n";
	html += ".t {border:1px solid #D4EFF7;border-collapse : collapse}\n";
	html += ".t td {border: 1px solid #D4EFF7;}\n";
	html += "img {border:0;}p {margin:0px;}</style>\n";
	html += "</head>\n";
	html += "<body>\n";
	html += codetohtml(this._textArea.value);
	html += "</body>\n";
	html += "</html>";
	doc.write(html);
	doc.close();

	if (is_ie) {
		doc.body.contentEditable = true;
	}
	
	WYSIWYD._addEvent(doc, "keydown",function(event) {quickpost(event);});
	
	WYSIWYD._addEvents(doc, ["keydown", "keypress", "mousedown", "mouseup", "drag"],
		function(event) {return editor._editorEvent(is_ie ? editor._iframe.contentWindow.event : event);}
	);
}

WYSIWYD.prototype.getsel = function () {
	if (this._editMode == "wysiwyg") {
		if (is_ie) {
			return this._createRange(this._getSelection()).htmlText;
		} else {
			return WYSIWYD.getHTML(this._createRange(this._getSelection()).cloneContents(), false, this);
		}
	} else if (document.selection) {
		return document.selection.createRange().text;
	} else if (typeof this._textArea.selectionStart != 'undefined') {
		return this._textArea.value.substr(this._textArea.selectionStart,this._textArea.selectionEnd - this._textArea.selectionStart);
	} else if (window.getSelection) {
		return window.getSelection();
	}
}
WYSIWYD.prototype.setMode = function(mode) {
	if (typeof mode == "undefined") {
		mode = ((this._editMode == "textmode") ? "wysiwyg" : "textmode");
	}
	switch (mode) {
	    case "textmode":
			this._textArea.value = htmltocode(this.getHTML());
			this._iframe.style.display = "none";
			this._textArea.style.display = "block";
			this._textArea.style.width = "100%";
			break;
	    case "wysiwyg":
			if (this._htmlArea == null && !IsElement('htmlarea')) {
				this.initIframe();
			}
			if (!is_ie) {
				this._doc.designMode = "off";
			}
			body = this._doc.getElementsByTagName("body")[0];
			body.innerHTML = codetohtml(this.getHTML()); //Modify

			this._textArea.style.display = "none";
			this._iframe.style.display = "block";
			if (!is_ie) {
				this._doc.designMode = "on";
			}
			break;
	    default:
			alert("Mode <" + mode + "> not defined!");
			return false;
	}
	this._editMode = mode;
	this.gotoEnd();
}

WYSIWYD.prototype.forceRedraw = function() {
	this._doc.body.style.visibility = "hidden";
	this._doc.body.style.visibility = "visible";
}

WYSIWYD.prototype.focusEditor = function() {
	switch (this._editMode) {
	    case "wysiwyg" : this._iframe.contentWindow.focus(); break;
	    case "textmode": this._textArea.focus(); break;
	    default : alert("ERROR: mode " + this._editMode + " is not defined");
	}
	return this._doc;
}
WYSIWYD.prototype.gotoEnd = function() {
	this.focusEditor();
	switch (this._editMode) {
	    case "wysiwyg" : this._iframe.contentWindow.document.body.innerHTML += ''; break;
	    case "textmode": this._textArea.value += ''; break;
	}
}
WYSIWYD.prototype.updateToolbar = function(noStatus) {
	var doc = this._doc;
	var iftext = (this._editMode == "textmode");
	for (var i in this._toolbarObjects) {
		var btn = this._toolbarObjects[i];
		var cmd = i;
		
		btn.state("enabled",(!iftext || btn.text));
		if (typeof cmd == "function") {
			continue;
		}
		switch(cmd) {
		    case "fontname":
		    case "fontsize":
		    case "formatblock":
				var options = this.config[cmd];
				if (iftext) {
					btn.element.firstChild.innerHTML = options['default'];
				} else {
					try {
						var value = ("" + doc.queryCommandValue(cmd)).toLowerCase();
						if (!value) break;
						for (var j in options) {
							if ((j.toLowerCase()==value || options[j].substr(0,value.length).toLowerCase()==value) && j != btn.element.firstChild.innerHTML) {
								btn.element.firstChild.innerHTML = j;
								break;
							}
						}
					} catch(e) {};
				}
				break;
		    case "htmlmode": btn.state("active", !iftext);break;
			case "windcode": btn.state("active", iftext);break;
			default:
				try{
					btn.state("active",(!iftext && btn.mover && doc.queryCommandState(cmd)));
				} catch (e) {}
		}
	}
}
WYSIWYD.prototype.insertNodeAtSelection = function(toBeInserted) {
	if (!is_ie) {
		var sel = this._getSelection();
		var range = this._createRange(sel);
		sel.removeAllRanges();
		range.deleteContents();
		var node = range.startContainer;
		var pos = range.startOffset;
		switch(node.nodeType) {
		    case 3:
			if (toBeInserted.nodeType == 3) {
				node.insertData(pos, toBeInserted.data);
				range = this._createRange();
				range.setEnd(node, pos + toBeInserted.length);
				range.setStart(node, pos + toBeInserted.length);
				sel.addRange(range);
			} else {
				node = node.splitText(pos);
				var selnode = toBeInserted;
				if (toBeInserted.nodeType == 11) {
					selnode = selnode.firstChild;
				}
				node.parentNode.insertBefore(toBeInserted, node);
				this.selectNodeContents(selnode);
				this.updateToolbar();
			}
			break;
		    case 1:
			var selnode = toBeInserted;
			if (toBeInserted.nodeType == 11) {
				selnode = selnode.firstChild;
			}
			node.insertBefore(toBeInserted, node.childNodes[pos]);
			this.selectNodeContents(selnode);
			this.updateToolbar();
			break;
		}
	} else {