wysiwyg_editor.js

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

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":
			this._doc.execCommand(cmdID, UI, param); break;
	    case "cut":
	    case "copy":
	    case "paste":
			try{this._doc.execCommand(cmdID, UI, param);}
			catch(e){}
			break;
	    default : this._doc.execCommand(cmdID, UI, param);
	}
	return false;
};
WYSIWYD.prototype._editorEvent = function(ev){
	var editor = this;
	var keyEvent = (WYSIWYD.is_ie && ev.type == "keydown") || (ev.type == "keypress");
	if(editor._timerToolbar){
		clearTimeout(editor._timerToolbar);
	}
	editor._timerToolbar = setTimeout(function(){
		editor.updateToolbar();
		editor._timerToolbar = null;
	}, 50);
};
WYSIWYD.prototype.getHTML = function(){
	switch (this._editMode){
	    case "wysiwyg"  : return WYSIWYD.getHTML(this._doc.body, false, this);
	    case "textmode" : return this._textArea.value;
	    default : alert("Mode <" + mode + "> not defined!");
	}
	return false;
};

WYSIWYD.agt		= navigator.userAgent.toLowerCase();
WYSIWYD.is_ie	= ((WYSIWYD.agt.indexOf("msie") != -1) && (WYSIWYD.agt.indexOf("opera") == -1));
WYSIWYD.is_gecko= (navigator.product == "Gecko");

WYSIWYD.Browsercheck = function(){
	if(WYSIWYD.is_gecko){
		if(navigator.productSub < 20021201){
			alert("You need at least Mozilla-1.3 Alpha.");
			return false;
		}
		if(navigator.productSub < 20030210){
			alert("Mozilla < 1.3 Beta is not supported!");
			return false;
		}
	}
	return WYSIWYD.is_gecko || WYSIWYD.is_ie;
};
WYSIWYD.prototype._getSelection = function(){
	if(WYSIWYD.is_ie){
		return this._doc.selection;
	} else{
		return this._iframe.contentWindow.getSelection();
	}
};
WYSIWYD.prototype._createRange = function(sel){
	if(WYSIWYD.is_ie){
		return sel.createRange();
	} else{
		this.focusEditor();
		if(typeof sel != "undefined"){
			try{
				return sel.getRangeAt(0);
			} catch(e){
				return this._doc.createRange();
			}
		} else{
			return this._doc.createRange();
		}
	}
};
WYSIWYD._addEvent = function(el, evname, func){
	if(WYSIWYD.is_ie){
		el.attachEvent("on" + evname, func);
	} else{
		el.addEventListener(evname, func, true);
	}
};
WYSIWYD._addEvents = function(el, evs, func){
	for(var i in evs){
		WYSIWYD._addEvent(el, evs[i], func);
	}
};
WYSIWYD._removeEvent = function(el, evname, func){
	if(WYSIWYD.is_ie){
		el.detachEvent("on" + evname, func);
	} else{
		el.removeEventListener(evname, func, true);
	}
};
WYSIWYD._stopEvent = function(ev){
	if(WYSIWYD.is_ie){
		ev.cancelBubble = true;  //检测是否接受上层元素的事件的控制  true 不被上层原素的事件控制
		ev.returnValue = false;
	} else{
		ev.preventDefault();
		ev.stopPropagation();
	}
};
WYSIWYD._removeClass = function(el, className){
	if(!(el && el.className)){
		return;
	}
	var cls = el.className.split(" ");
	var ar = new Array();
	for(var i = cls.length; i > 0;){
		if (cls[--i] != className){
			ar[ar.length] = cls[i];
		}
	}
	el.className = ar.join(" ");
};
WYSIWYD._addClass = function(el, className){
	WYSIWYD._removeClass(el, className);
	el.className += " " + className;
};

WYSIWYD.isBlockElement = function(el){
	var blockTags = " body form textarea fieldset ul ol dl li div " +
		"p h1 h2 h3 h4 h5 h6 quote pre table thead " +
		"tbody tfoot tr td iframe address ";
	return (blockTags.indexOf(" " + el.tagName.toLowerCase() + " ") != -1);
};
WYSIWYD.needsClosingTag = function(el){
	var closingTags = " head script style div span tr td tbody table em strong font a title ";
	return (closingTags.indexOf(" " + el.tagName.toLowerCase() + " ") != -1);
};
WYSIWYD.htmlEncode = function(str){
	str = str.replace(/&/ig, "&amp;");
	str = str.replace(/</ig, "&lt;");
	str = str.replace(/>/ig, "&gt;");
	str = str.replace(/\x22/ig, "&quot;");
	return str;
};
WYSIWYD.getHTML = function(root, outputRoot, editor){
	var html = "";
	switch(root.nodeType){
	    case 1:
	    case 11:
		var closed;
		var i;
		var root_tag = (root.nodeType == 1) ? root.tagName.toLowerCase() : '';
		if(WYSIWYD.is_ie && root_tag == "head"){
			if(outputRoot)
				html += "<head>";
			var save_multiline = RegExp.multiline;
			RegExp.multiline = true;
			var txt = root.innerHTML.replace(/(<\/|<)\s*([^ \t\n>]+)/ig, function(str, p1, p2){
				return p1 + p2.toLowerCase();
			});
			RegExp.multiline = save_multiline;
			html += txt;
			if (outputRoot)
				html += "</head>";
			break;
		} else if(outputRoot){
			closed = (!(root.hasChildNodes() || WYSIWYD.needsClosingTag(root)));
			html = "<" + root.tagName.toLowerCase();
			var attrs = root.attributes;
			for(i = 0; i < attrs.length; ++i){
				var a = attrs.item(i);
				if(!a.specified){
					continue;
				}
				var name = a.nodeName.toLowerCase();
				if(/_moz|contenteditable|_msh/.test(name)){
					continue;
				}
				var value;
				if(name != "style"){
					if(typeof root[a.nodeName] != "undefined" && name != "href" && name != "src"){
						value = root[a.nodeName];
					} else{
						value = a.nodeValue;
					}
				} else{
					value = root.style.cssText;
				}
				if(/(_moz|^$)/.test(value)){
					continue;
				}
				html += " " + name + '="' + value + '"';
			}
			html += closed ? " />" : ">";
		}
		for(i = root.firstChild; i; i = i.nextSibling){
			html += WYSIWYD.getHTML(i, true, editor);
		}
		if(outputRoot && !closed){
			html += "</" + root.tagName.toLowerCase() + ">";
		}
		break;
	    case 3:
		if(!root.previousSibling && !root.nextSibling && root.data.match(/^\s*$/i) ) html = '&nbsp;';
		else html = WYSIWYD.htmlEncode(root.data);
		break;
	    case 8:
		html = "<!--" + root.data + "-->";
		break;
	}
	return html;
};
String.prototype.trim = function(){
	a = this.replace(/^\s+/, '');
	return a.replace(/\s+$/, '');
};
WYSIWYD._makeColor = function(v){
	if(typeof v != "number"){
		return v;
	}
	var r = v & 0xFF;
	var g = (v >> 8) & 0xFF;
	var b = (v >> 16) & 0xFF;
	return "rgb(" + r + "," + g + "," + b + ")";
};
WYSIWYD._colorToRgb = function(v){
	if(!v) return '';
	function hex(d){
		return (d < 16) ? ("0" + d.toString(16)) : d.toString(16);
	};
	if(typeof v == "number"){
		var r = v & 0xFF;
		var g = (v >> 8) & 0xFF;
		var b = (v >> 16) & 0xFF;
		return "#" + hex(r) + hex(g) + hex(b);
	}
	if(v.substr(0, 3) == "rgb"){
		var re = /rgb\s*\(\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\s*\)/;
		if(v.match(re)){
			var r = parseInt(RegExp.$1);
			var g = parseInt(RegExp.$2);
			var b = parseInt(RegExp.$3);
			return "#" + hex(r) + hex(g) + hex(b);
		}
		return null;
	}
	if(v.substr(0, 1) == "#"){
		return v;
	}
	return null;
};
WYSIWYD.getElementById = function(tag, id){
	var el, i, objs = document.getElementsByTagName(tag);
	for(i = objs.length; --i >= 0 && (el = objs[i]);)
		if(el.id == id)
			return el;
	return null;
};
WYSIWYD.prototype.insertHTML = function(html){
	var sel = this._getSelection();
	var range = this._createRange(sel);
	if(WYSIWYD.is_ie){
		range.pasteHTML(html);
	} else{
		var fragment = this._doc.createDocumentFragment();
		var div = this._doc.createElement("div");
		div.innerHTML = html;
		while(div.firstChild){
			fragment.appendChild(div.firstChild);
		}
		var node = this.insertNodeAtSelection(fragment);
	}
};
function editorcode(cmdID){
	editor.focusEditor();
	if(editor._editMode == "textmode"){
		windcode(cmdID);
	} else{
		editor.execCommand(cmdID,false);
	}
	editor.updateToolbar();
}
function insertImage(){
	editor.focusEditor();
	txt=prompt('URL:',"http://");
	if(txt!=null){
		if(editor._editMode == "textmode"){
			sm="[img]"+txt+"[/img]";
			AddText(sm,'');
		} else{
			try{editor._doc.execCommand("insertimage",false,txt);}
			catch(e){}
		}
	}
}
function showTable(cmdID,type){
	if(editor._editMode == "textmode") return false;
	var menu_editor = GE("menu_editor");
	menu_editor.innerHTML = '<table width="230" cellspacing="1" cellpadding="5"><tbody><tr><th class="h" colspan="2"><div class="fr" style="cursor:pointer;" onclick="closep();" title="close"><img src='+imgpath+'/code_editor/close.gif></div>'+I18N['inserttable']+'</th></tr><tr><td width="40%" align="center">'+I18N['tablerows']+'</td><td><input type="text" name="rows" id="f_rows" size="5" value="2" /></td>	</tr><tr><td align="center">'+I18N['tablecols']+'</td><td><input type="text" name="cols" id="f_cols" size="5" value="4" /></td></tr><tr><td align="center">'+I18N['tablewidth']+'</td><td><input type="text" name="width" id="f_width" size="5" value="100" /></td></tr><tr><td class="tac">'+I18N['tableunit']+'</td><td><input type="radio" name="unit" id="f_unit1" value="%" checked> Percent<input type="radio" name="unit" id="f_unit1" value="px"> Pixels</td></tr></tbody></table><ul><li style="text-align:center;padding:5px 0;"><input class="btn" type="button" onclick="return insertTable();" value="'+I18N['submit']+'" /></li></ul>';
	if(typeof type == 'undefined'){
		click_open('menu_editor','wy_inserttable','2');
	} else{
		mouseover_open('menu_editor','wy_inserttable','2');
	}
}
function insertTable(){
	editor.focusEditor();
	var sel = editor._getSelection();
	var range = editor._createRange(sel);
	var fields = ["f_rows", "f_cols", "f_width"];
	var param = new Object();
	for(var i in fields){
		var id = fields[i];
		param[id] = GE(id).value;
	}
	param['f_unit'] = GE("f_unit1").checked == true ? '%' : 'px';
	var doc = editor._doc;
	var table = doc.createElement("table");
	table.style.width = param['f_width'] + param["f_unit"];
	table.className = 't';
	var tbody = doc.createElement("tbody");
	table.appendChild(tbody);
	for(var i = 0; i < param["f_rows"]; ++i){
		var tr = doc.createElement("tr");
		tbody.appendChild(tr);
		for(var j = 0; j < param["f_cols"]; ++j){
			var td = doc.createElement("td");
			tr.appendChild(td);
			(WYSIWYD.is_gecko) && td.appendChild(doc.createElement("br"));
		}
	}
	if(WYSIWYD.is_ie){
		range.pasteHTML(table.outerHTML);
	} else{
		editor.insertNodeAtSelection(table);
	}
	closep();
}
function showcolor(cmdID,type){
	var menu_editor = GE("menu_editor");
	var colors = [
		'000000','660000','663300','666600','669900','66CC00','66FF00','666666','660066','663366','666666',
		'669966','66CC66','66FF66','CCCCCC','6600CC','6633CC','6666CC','6699CC','66CCCC','66FFCC','FF0000',
		'FF0000','FF3300','FF6600','FF9900','FFCC00','FFFF00','0000FF','FF0066','FF3366','FF6666','FF9966',
		'FFCC66','FFFF66','00FFFF','FF00CC','FF33CC','FF66CC','FF99CC','FFCCCC','FFFFCC'
	];
	var html = '<div id="colorbox">';
	for(i in colors){
		html += "<div unselectable=\"on\" style=\"background:#" + colors[i] + "\" onClick=\"SetC('" + colors[i] + "','" + cmdID + "')\"></div>";
	}
	html += '</div>';
	menu_editor.innerHTML = html;
	if(typeof type == 'undefined'){
		click_open('menu_editor','wy_' + cmdID,'2');
	} else{
		mouseover_open('menu_editor','wy_' + cmdID,'2');
	}
}
function SetC(color,cmdID){
	editor.focusEditor();
	if(editor._editMode=='textmode'){
		text = editor.getsel();
		var ctype = cmdID == 'forecolor' ? 'color' : 'backcolor';
		AddText("[" + ctype + "=#" + color + "]" + text + "[/" + ctype + "]",text);
	} else{
		if(cmdID == 'hilitecolor' && WYSIWYD.is_ie) cmdID = "backcolor";
		editor._doc.execCommand(cmdID, false, "#" + color);
	}
	closep();
}
function rming(cmdID,type){
	var menu_editor = GE("menu_editor");
	menu_editor.innerHTML = '<table width="300" cellspacing="1" cellpadding="5"><tbody><tr><th class="h" colspan="2"><div class="fr" style="cursor:pointer;" onclick="closep();" title="close"><img src='+imgpath+'/code_editor/close.gif></div>'+I18N['insertmedia']+'</th></tr><tr><td class="tac" width="25%">'+I18N['mediaurl']+'</td><td><input type="text" id="mediaurl" size="32" /></td></tr><tr><td class="tac">'+I18N['mediatype']+'</td><td><input type="radio" name="mediatype" id="mediatype1" value="1"> rm <input type="radio" name="mediatype" id="mediatype2" value="2" checked> wmv <input type="radio" name="mediatype" id="mediatype3" value="3"> mp3 <input type="radio" name="mediatype" id="mediatype4" value="4"> flash</td></tr><tr><td class="tac">'+I18N['medialength']+'</td><td><input type="text" id="medialength" value="314" size="6" />&nbsp;'+I18N['mediawidth']+'&nbsp;&nbsp;<input type="text" id="mediawidth" value="256" size="6" />&nbsp;'+I18N['mediaheight']+'</td></tr><tr><td class="tac">'+I18N['mediaplay']+'</td><td><input type="checkbox" id="midiaauto" />'+I18N['mediaauto']+'</td></tr></tbody></table><ul><li style="text-align:center;padding:5px 0;"><input class="btn" type="button" onclick="return insertmedia();" value="'+I18N['submit']+'" /></li></ul>';
	if(typeof type == 'undefined'){
		click_open('menu_editor','wy_media','2');
	} else{
		mouseover_open('menu_editor','wy_media','2');
	}
}
function insertmedia(){
	editor.focusEditor();
	var url = GE("mediaurl").value;
	if(url == ''){
		alert(I18N['mediaurl_empty']);
		return false;
	}
	var mediatype = 2;
	for(var i=1;i<5;i++){
		if(GE("mediatype"+i).checked == true){
			mediatype = i;
			break;
		}
	}
	var code   = '';
	var length = GE("medialength").value;
	var width  = GE("mediawidth").value;
	var auto   = GE("midiaauto").checked == true ? 1 : 0;
	switch(mediatype){
		case 1: code = '[rm=' + length + ',' + width + ',' + auto + ']' + url + '[/rm]';break;
		case 2: code = '[wmv=' + length + ',' + width + ',' + auto + ']' + url + '[/wmv]';break;
		case 3: code = '[wmv=' + auto + ']'  + url + '[/wmv]';break;
		case 4: code = '[flash=' + length + ',' + width + ']' + url + '[/flash]';break;
	}
	AddCode(code,'');
	closep();
}
function quote(){
	editor.focusEditor();
	text = editor.getsel();
	sm = editor._editMode == "textmode" ? "[quote]" + text + "[/quote]" : "[quote] [/quote]";
	AddCode(sm,text);
}
function code(){
	editor.focusEditor();
	text = editor.getsel();
	sm = editor._editMode == "textmode" ? "[code]" + text + "[/code]" : "[code] [/code]";
	AddCode(sm,text);
}
function br(){
	editor.focusEditor();
	if(editor._editMode == "textmode"){
		return false;
	} else{
		sm="<br />";
		editor.insertHTML(sm);
	}
}
function showsale(cmdID,type){
	var menu_editor = GE("menu_editor");
	menu_editor.innerHTML = '<table width="300" cellspacing="1" cellpadding="5"><tr><th class="h" colspan="2"><div class="fr" style="cursor:pointer;" onclick="closep();" title="close"><img src='+imgpath+'/code_editor/close.gif></div>'+I18N['showsale']+'</th></tr><tr><td width="25%" class="tac">'+I18N['seller']+'</td><td><input id="seller" size="30" /></td></tr><tr><td class="tac">'+I18N['salename']+'</td><td><input id="subject" size="30" /></td></tr><tr><td class="tac"> '+I18N['saleprice']+'</td><td><input id="price" size="7" /></td></tr><tr><td class="tac">'+I18N['saledes']+'</td><td><textarea id="saledes" rows="4" cols="33"></textarea></td></tr><tbody id="setmethod" style="display:none"><tr><td class="tac">'+I18N['transport']+'</td><td><input type="radio" value="1" name="transport" onclick="setfee(true)" checked /> '+I18N['transport1']+'&nbsp;&nbsp; <input type="radio" value="2" name="transport" onclick="setfee(false)" /> '+I18N['transport2']+'<br /><input type="hidden" value="3" />'+I18N['transport3']+'&nbsp;<input disabled size="2" id="ordinary_fee" /> &nbsp;&nbsp; '+I18N['transport4']+'&nbsp;<input disabled size="2" id="express_fee" /> '+I18N['yuan']+'</td></tr></tbody><tr><td class="tac">'+I18N['demo']+'</td><td><input id="demo" size="30" /></td></tr><tr><td class="tac">'+I18N['contact']+'</td><td><input id="contact" size="30" /></td></tr><tr><td class="tac">'+I18N['md']+'</td><td><input type="radio" name="md" value="3" onclick="setmethod(3);" checked />'+I18N['salemoney3']+'&nbsp;<input type="radio" name="md" value="1" onclick="setmethod(1);" />'+I18N['salemoney1']+'&nbsp;<input type="radio" name="md" value="2" onclick="setmethod(2);" />'+I18N['salemoney2']+'</td></tr></table><ul><li style="text-align:center;padding:5px 0;"><input class="btn" type="button" onclick="return insertsale();" value="'+I18N['submit']+'" /></li></ul>';
	if(typeof type == 'undefined'){
		click_open('menu_editor','wy_sale','2');
	} else{
		mouseover_open('menu_editor','wy_sale','2');
	}
}
function setfee(type){
	GE("ordinary_fee").disabled = type;
	GE("express_fee").disabled = type;
}
function setmethod(mode){
	method = mode;
	obj = GE("setmethod");
	obj.style.display = mode==2 ? "" : "none";
}
function insertsale(){
	editor.focusEditor();
	var required = {
		"seller": I18N['seller_empty'],
		"subject": I18N['subject_empty'],
		"price": I18N['price_empty']
	};
	for(var i in required) {
		var el = GE(i);
		if(!el.value){
			alert(required[i]);
			el.focus();