wysiwyg_editor.js

自己写的一个网络日志(BLOG)系统

//WYSIWYD JS CODE
var code_htm = new Array();
var code_num = 0;
var method = 3;
var header = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = 'js/lang/zh_cn.js';
header.appendChild(script);

function WYSIWYD(editmode){
	if(WYSIWYD.Browsercheck()){
		this._editMode = editmode;
		this.config = new WYSIWYD.Config();
		this._htmlArea = null;
		this._textArea = null;
		this._timerToolbar = null;
		this._doc = null;
	}
};
WYSIWYD.prototype.init = function(){
	this._textArea = WYSIWYD.getElementById("textarea",'textarea');
	var editor = this;
	var textarea = this._textArea;
	
	if(this._editMode == 'wysiwyg'){
		this.initIframe();
		if(WYSIWYD.is_gecko){
			this._doc.designMode = "off";
		}
		
		this._textArea.style.display = "none";
		this._iframe.style.display = "block";
		if(WYSIWYD.is_gecko){
			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;
				 case "select":
					if(newval){
						el.className = 'buttonPressed';
					} else{
						el.className = 'buttonHover';
					}
					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;

		if(txt == 'htmlmode' || txt == 'windcode'){
			WYSIWYD._addEvent(el, "click", function(ev){
				if(obj.enabled) with (WYSIWYD){
					obj.cmd(obj.name);
					_stopEvent(is_ie ? window.event : ev);
				}
			});
		} else{
			WYSIWYD._addEvent(el, "mouseover", function(){
				if(obj.enabled){
					WYSIWYD._addClass(el, "buttonHover");
					(obj.mover) && obj.cmd(obj.name,'2');
				}
			});
			
			WYSIWYD._addEvent(el, "mouseout", function(){
				if(obj.enabled) with (WYSIWYD){
					_removeClass(el, "buttonHover");
					_removeClass(el, "buttonActive");
					(obj.active) && _addClass(el, "buttonPressed");
				}
			});
			WYSIWYD._addEvent(el, "mousedown", function(ev){
				if(obj.enabled) with (WYSIWYD){
					_addClass(el, "buttonActive");
					_removeClass(el, "buttonPressed");
					_stopEvent(is_ie ? window.event : ev);
				}
			});
			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);
				}
			});
		}
	};
	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
			};
			tb_objects[txt] = obj;
			for(var i in options) {
				var op = document.createElement("option");
				op.appendChild(document.createTextNode(i));
				op.value = options[i];
				el.appendChild(op);
			}
			WYSIWYD._addEvent(el, "change", function () {
				editor.GetSelectedValue(el, txt);
			});
		}
		return el;
	};

	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 = "560px";
	this._htmlArea = htmlarea;
	this._textArea.parentNode.insertBefore(htmlarea, this._textArea);

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

	if(!WYSIWYD.is_ie){
		iframe.style.borderWidth = "0px";
	}
	var height = this._textArea.offsetHeight;
	var width = this._textArea.offsetWidth;
	height = parseInt(height);
	width = parseInt(width);
	if(!WYSIWYD.is_ie){
		height -= 2;
		width -= 2;
	}
	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:Verdana;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(WYSIWYD.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(WYSIWYD.is_ie ? editor._iframe.contentWindow.event : event);}
	);
}

WYSIWYD.prototype.getsel = function (){
	if(this._editMode == "wysiwyg"){
		return '';
	} 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 = "555px";
			break;
	    case "wysiwyg":
			if(this._htmlArea == null && !IsElement('htmlarea')){
				this.initIframe();
			}
			if(WYSIWYD.is_gecko){
				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 (WYSIWYD.is_gecko){
				this._doc.designMode = "on";
			}
			break;
	    default:
			alert("Mode <" + mode + "> not defined!");
			return false;
	}
	this._editMode = mode;
	this.focusEditor();
};

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.updateToolbar = function(noStatus){
	var doc = this._doc;
	var iftext = (this._editMode == "textmode");
	var ancestors = null;
	if(!iftext){
		ancestors = this.getAllAncestors();
	}
	for(var i in this._toolbarObjects){
		var btn = this._toolbarObjects[i];
		var cmd = i;
		var inContext = true;
		
		btn.state("enabled", (!iftext || btn.text) && inContext);
		if(typeof cmd == "function"){
			continue;
		}
		switch(cmd){
		    case "fontname":
		    case "fontsize":
		    case "formatblock":
				if(iftext){
					btn.element.selectedIndex = 0;
				} else{
					try{
						var value = ("" + doc.queryCommandValue(cmd)).toLowerCase();
						if(!value){
							break;
						}
						var options = this.config[cmd];
						var k = 1;
						for(var j in options){
							if((j.toLowerCase() == value) ||
								(options[j].substr(0, value.length).toLowerCase() == value)){
								btn.element.selectedIndex = k;
								break;
							}
							k++;
						}
					} catch(e){};
				}
				break;
		    case "htmlmode": btn.state("select", !iftext); break;
			case "windcode": btn.state("select", iftext); break;
			default:
				try{
					btn.state("active", (!iftext && doc.queryCommandState(cmd)));
				} catch (e){}
		}
	}
};
WYSIWYD.prototype.insertNodeAtSelection = function(toBeInserted){
	if(!WYSIWYD.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{
		return null;
	}
};
WYSIWYD.prototype.getParentElement = function(){
	var sel = this._getSelection();
	var range = this._createRange(sel);
	if(WYSIWYD.is_ie){
		switch(sel.type){
		    case "Text":
		    case "None":
			return range.parentElement();
		    case "Control":
			return range.item(0);
		    default:
			return this._doc.body;
		}
	} else try{
		var p = range.commonAncestorContainer;
		if(!range.collapsed && range.startContainer == range.endContainer &&
		    range.startOffset - range.endOffset <= 1 && range.startContainer.hasChildNodes())
			p = range.startContainer.childNodes[range.startOffset];
		while(p.nodeType == 3){
			p = p.parentNode;
		}
		return p;
	} catch (e){
		return null;
	}
};
WYSIWYD.prototype.getAllAncestors = function(){
	var p = this.getParentElement();
	var a = [];
	while(p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')){
		a.push(p);
		p = p.parentNode;
	}
	a.push(this._doc.body);
	return a;
};
WYSIWYD.prototype.selectNodeContents = function(node, pos){
	this.focusEditor();
	this.forceRedraw();
	var range;
	var collapsed = (typeof pos != "undefined");
	if(WYSIWYD.is_ie){
		range = this._doc.body.createTextRange();
		range.moveToElementText(node);
		(collapsed) && range.collapse(pos);
		range.select();
	} else{
		var sel = this._getSelection();
		range = this._doc.createRange();
		range.selectNodeContents(node);
		(collapsed) && range.collapse(pos);
		sel.removeAllRanges();
		sel.addRange(range);
	}
};
WYSIWYD.prototype.GetSelectedValue = function(el,cmdID){
	this.focusEditor();
	var value = el.options[el.selectedIndex].value;
	if(this._editMode == "textmode"){
		windselect(cmdID,value);
	} else{
		this._comboSelected(cmdID,value);
	}
	this.updateToolbar();
	return false;
}