wysiwyg.js

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

//WYSIWYD JS CODE
var agt = navigator.userAgent.toLowerCase();
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_gecko= (navigator.product == "Gecko");
var cookie_name = 0;
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/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;
}
WYSIWYD.prototype._comboSelected = function(cmdID,value){
	switch(cmdID){
	    case 'fontname':
	    case 'fontsize': this._doc.execCommand(cmdID, false, value); break;
	    case 'formatblock':
			(WYSIWYD.is_ie) && (value = '<' + value + '>');
			this._doc.execCommand(cmdID, false, value);
			break;
	}
};
WYSIWYD.prototype.execCommand = function(cmdID, UI, param){
	cmdID = cmdID.toLowerCase();
	switch(cmdID){
	    case 'htmlmode' : break;
		case 'windcode' : this.setMode(); break;
	    case 'undo':
	    case 'redo':