htmleditor.js

6KB超经典BBS源代码..................ASP脚本

				HtmlDrawLink();
			}
			break;
		case 'Html_UNLINK':
			HtmlSimpleExecute('unlink');
			break;
		case 'Html_ICON':
			EditForm.focus();
			if (document.getElementById('popupName').innerHTML == mode) {
				HtmlClearTemp();
			} else {
				HtmlDrawIcon();
			}
			break;
		case 'Html_ICON_END':
			EditForm.focus();
			EDITFORM_DOCUMENT.execCommand('InsertImage', false, value);
			HtmlClearTemp();
			break;
		case 'Html_IMAGE':
			EditForm.focus();
			HtmlSelection();
			if (document.getElementById('popupName').innerHTML == mode) {
				HtmlClearTemp();
			} else {
				HtmlDrawImage();
			}
			break;
		case 'Html_MEDIA':
			EditForm.focus();
			HtmlSelection();
			if (document.getElementById('popupName').innerHTML == mode) {
				HtmlClearTemp();
			} else {
				HtmlDrawMedia();
			}
			break;
		case 'Html_FLASH':
			EditForm.focus();
			HtmlSelection();
			if (document.getElementById('popupName').innerHTML == mode) {
				HtmlClearTemp();
			} else {
				HtmlDrawFlash();
			}
			break;
		case 'Html_SPECIALCHAR':
			EditForm.focus();
			HtmlSelection();
			if (document.getElementById('popupName').innerHTML == mode) {
				HtmlClearTemp();
			} else {
				HtmlDrawSpecialchar();
			}
			break;
		case 'Html_SPECIALCHAR_END':
			EditForm.focus();
			HtmlSelect();
			var element = document.createElement("span");
			element.appendChild(document.createTextNode(value));
			HtmlInsertItem(element);
			HtmlClearTemp();
			break;
		case 'Html_LAYER':
			EditForm.focus();
			HtmlSelection();
			if (document.getElementById('popupName').innerHTML == mode) {
				HtmlClearTemp();
			} else {
				HtmlDrawColorTable('Html_LAYER');
			}
			break;
		case 'Html_LAYER_END':
			EditForm.focus();
			var element = document.createElement("div");
			element.style.width = "100px";
			element.style.height = "100px";
			element.style.padding = "5px";
			element.style.border = "1px solid #AAAAAA";
			element.style.backgroundColor = value;
			element.innerHTML = " ";
			HtmlSelect();
			HtmlInsertItem(element);
			HtmlClearTemp();
			break;
		case 'Html_TABLE':
			EditForm.focus();
			HtmlSelection();
			if (document.getElementById('popupName').innerHTML == mode) {
				HtmlClearTemp();
			} else {
				HtmlDrawTable();
			}
			break;
		case 'Html_TABLE_END':
			var location = value.split(',');
			var element = document.createElement("table");
			element.cellPadding = 0;
			element.cellSpacing = 0;
			element.border = 1;
			element.style.width = "100px";
			element.style.height = "100px";
			for (var i = 0; i < location[0]; i++) {
				var rowElement = element.insertRow(i);
				for (var j = 0; j < location[1]; j++) {
					var cellElement = rowElement.insertCell(j);
					cellElement.innerHTML = "&nbsp;";
				}
			}
			EditForm.focus();
			HtmlSelect();
			HtmlInsertItem(element);
			HtmlClearTemp();
			break;
		case 'Html_HR':
			EditForm.focus();
			HtmlSelection();
			if (document.getElementById('popupName').innerHTML == mode) {
				HtmlClearTemp();
			} else {
				HtmlDrawColorTable('Html_HR');
			}
			break;
		case 'Html_HR_END':
			EditForm.focus();
			var element = document.createElement("hr");
			element.width = "100%";
			element.color = value;
			element.size = 1;
			HtmlSelect();
			HtmlInsertItem(element);
			HtmlClearTemp();
			break;
		case 'Html_DATE':
			EditForm.focus();
			HtmlSelection();
			var date = new Date();
			var year = date.getFullYear().toString(10);
			var month = (date.getMonth() + 1).toString(10);
			month = month.length < 2 ? '0' + month : month;
			var day = date.getDate().toString(10);
			day = day.length < 2 ? '0' + day : day;
			var value = year + '-' + month + '-' + day;
			var element = document.createElement("span");
			element.appendChild(document.createTextNode(value));
			HtmlInsertItem(element);
			HtmlClearTemp();
			break;
		case 'Html_TIME':
			EditForm.focus();
			HtmlSelection();
			var date = new Date();
			var hour = date.getHours().toString(10);
			hour = hour.length < 2 ? '0' + hour : hour;
			var minute = date.getMinutes().toString(10);
			minute = minute.length < 2 ? '0' + minute : minute;
			var second = date.getSeconds().toString(10);
			second = second.length < 2 ? '0' + second : second;
			var value = hour + ':' + minute + ':' + second;
			var element = document.createElement("span");
			element.appendChild(document.createTextNode(value));
			HtmlInsertItem(element);
			HtmlClearTemp();
			break;
		case 'Html_PREVIEW':
			eval(OBJ_NAME).data();
			var newWin = window.open('', 'HtmlPreview','width=800,height=600,left=30,top=30,resizable=yes,scrollbars=yes');
			HtmlWriteFullHtml(newWin.document);
			break;
		default: 
			break;
	}
}
function HtmlOverIcon(obj)
{
	obj.style.border = '1px solid ' + MENU_BORDER_COLOR;
}
function HtmlOutIcon(obj)
{
	obj.style.border = '1px solid ' + TOOLBAR_BG_COLOR;
}
function HtmlDisableToolbar(flag)
{
	if (flag == true) {
		document.getElementById(TOP_TOOLBAR_ICON[0][0]).src = IMAGE_PATH + 'design.gif';
		for (i = 1; i < TOOLBAR_ICON.length; i++) {
			var el = document.getElementById(TOOLBAR_ICON[i][0]);
			el.style.visibility = 'hidden';
		}
	} else {
		document.getElementById(TOP_TOOLBAR_ICON[0][0]).src = IMAGE_PATH + 'source.gif';
		for (i = 0; i < TOOLBAR_ICON.length; i++) {
			var el = document.getElementById(TOOLBAR_ICON[i][0]);
			el.style.visibility = 'visible';
			EDITFORM_DOCUMENT.designMode = 'On';
		}
	}
}
function HtmlWriteFullHtml(documentObj)
{
	var editHtmlData = '<html>\r\n<head>\r\n<title>htmlEditor</title>\r\n<style type="text/css">\r\np {margin:0;}\r\n</style>\r\n</head>\r\n';
	editHtmlData += '<body style="font-size:12px;font-family:'+EDITOR_FONT_FAMILY+';margin:2px;background-color:' + FORM_BG_COLOR + '">\r\n';
	editHtmlData += HtmlHtmlentitiesDecode(document.getElementsByName(eval(OBJ_NAME).hiddenName)[0].value);
	editHtmlData += '\r\n</body>\r\n</html>\r\n';
	documentObj.open();
	documentObj.write(editHtmlData);
	documentObj.close();
}



function htmlEditor(objName) 
{
	this.objName = objName;
	this.hiddenName = objName;
	this.width = "100%";
	this.height = "200px";
	this.imagePath = 'images/';
	this.iconPath = 'images/face/';
	this.imageAttachPath = 'attached/';
	this.imageUploadCgi = "upload.php";
	this.menuBorderColor = '#4169e1';
	this.menuBgColor = '#e6e6fa';
	this.menuTextColor = '#8b0000';
	this.menuSelectedColor = '#6495ed';
	this.toolbarBgColor = '#DDDDDD';
	this.formBorderColor = '#AAAAAA';
	this.formBgColor = '#FFFFFF';

	this.init = function()
	{
		IMAGE_PATH = this.imagePath;
		ICON_PATH = this.iconPath;
		IMAGE_ATTACH_PATH = this.imageAttachPath;
		IMAGE_UPLOAD_CGI = this.imageUploadCgi;
		MENU_BORDER_COLOR = this.menuBorderColor;
		MENU_BG_COLOR = this.menuBgColor;
		MENU_TEXT_COLOR = this.menuTextColor;
		MENU_SELECTED_COLOR = this.menuSelectedColor;
		TOOLBAR_BG_COLOR = this.toolbarBgColor;
		FORM_BORDER_COLOR = this.formBorderColor;
		FORM_BG_COLOR = this.formBgColor;
		OBJ_NAME = this.objName;
		BROWSER = HtmlGetBrowser();
		TOOLBAR_ICON = Array();
		for (var i = 0; i < TOP_TOOLBAR_ICON.length; i++) {
			TOOLBAR_ICON.push(TOP_TOOLBAR_ICON[i]);
		}
		for (var i = 0; i < BOTTOM_TOOLBAR_ICON.length; i++) {
			TOOLBAR_ICON.push(BOTTOM_TOOLBAR_ICON[i]);
		}
	}
	this.show = function()
	{
		this.init();
		var iframeSize = '';
		iframeSize += 'width:' + this.width + ';';
		iframeSize += 'height:' + this.height + ';';
		if (BROWSER == '') {
			var htmlData = '<div id="editTextarea" style="' + iframeSize + '">' +
			'<textarea name="CodeForm" id="CodeForm" style="' + iframeSize + 
			'padding:2px;margin:0;border:1px solid '+ FORM_BORDER_COLOR + 
			';font-size:12px;line-height:16px;font-family:'+EDITOR_FONT_FAMILY+';background-color:'+ 
			FORM_BG_COLOR +';">' + document.getElementsByName(this.hiddenName)[0].value + '</textarea></div>';
			document.open();
			document.write(htmlData);
			document.close();
			return;
		}
		var htmlData = '<div id="Htmldiv" style="font-family:'+EDITOR_FONT_FAMILY+';">' +
			'<div id="htmltoolbar" style="padding:1px;background-color:'+ TOOLBAR_BG_COLOR +'">' +
			'<table cellpadding="0" cellspacing="0" border="0"><tr>';
		for (i = 0; i < TOP_TOOLBAR_ICON.length; i++) {
			htmlData += '<td width="' + TOP_TOOLBAR_ICON[i][2] + 
			'" height="' + TOP_TOOLBAR_ICON[i][3] + '"><img id="'+ TOP_TOOLBAR_ICON[i][0] +'" src="' + IMAGE_PATH + 
			TOP_TOOLBAR_ICON[i][1] + '" width="' + TOP_TOOLBAR_ICON[i][2] + 
			'" height="' + TOP_TOOLBAR_ICON[i][3] + '" alt="' + TOP_TOOLBAR_ICON[i][4] + 
			'" title="' + TOP_TOOLBAR_ICON[i][4] + 
			'" align="absmiddle" style="border:1px solid '+ 
			TOOLBAR_BG_COLOR +';cursor:pointer;" onclick="javascript:HtmlExecute(\''+ TOP_TOOLBAR_ICON[i][0] +'\');"'+
			' onmouseover="javascript:HtmlOverIcon(this);" onmouseout="javascript:HtmlOutIcon(this);"></td>';
		}
		htmlData += '</tr></table><table cellpadding="0" cellspacing="0" border="0"><tr>';
		for (i = 0; i < BOTTOM_TOOLBAR_ICON.length; i++) {
			htmlData += '<td width="' + BOTTOM_TOOLBAR_ICON[i][2] + 
			'" height="' + BOTTOM_TOOLBAR_ICON[i][3] + '"><img id="'+ BOTTOM_TOOLBAR_ICON[i][0] +'" src="' + IMAGE_PATH + 
			BOTTOM_TOOLBAR_ICON[i][1] + '" width="' + BOTTOM_TOOLBAR_ICON[i][2] + 
			'" height="' + BOTTOM_TOOLBAR_ICON[i][3] + '" alt="' + BOTTOM_TOOLBAR_ICON[i][4] + 
			'" title="' + BOTTOM_TOOLBAR_ICON[i][4] + 
			'" align="absmiddle" style="border:1px solid '+ 
			TOOLBAR_BG_COLOR +';cursor:pointer;" onclick="javascript:HtmlExecute(\''+ BOTTOM_TOOLBAR_ICON[i][0] +'\');"'+
			' onmouseover="javascript:HtmlOverIcon(this);" onmouseout="javascript:HtmlOutIcon(this);"></td>';
		}
		htmlData += '</tr>' +
			'</table>' +
			'</div>' +
			'<div id="editIframe">' +
			'<iframe name="EditForm" id="EditForm" frameborder="0" style="' + iframeSize + 
			'padding:0;margin:0;border:1px solid '+ FORM_BORDER_COLOR +'">' +
			'</iframe>' +
			'</div>' +
			'<div id="editTextarea" style="display:none;">' +
			'<textarea onkeydown="javascript:if(event.ctrlKey && event.keyCode==13){submitform();return false}" name="CodeForm" id="CodeForm" style="' + iframeSize + 
			'padding:2px;margin:0;border:1px solid '+ FORM_BORDER_COLOR + 
			';font-size:12px;line-height:16px;font-family:'+EDITOR_FONT_FAMILY+';background-color:'+ 
			FORM_BG_COLOR +';"></textarea>' +
			'</div>' +
			'</div>' +
			'<span id="popupName" style="display:none;"></span>' +
			'<span id="popupData"></span>';
		document.open();
		document.write(htmlData);
		document.close();
		if (BROWSER == 'IE') {
			EDITFORM_DOCUMENT = document.frames("EditForm").document;
		} else {
			EDITFORM_DOCUMENT = document.getElementById('EditForm').contentDocument;
		}
		EDITFORM_DOCUMENT.designMode = 'On';
		HtmlWriteFullHtml(EDITFORM_DOCUMENT);
		var el = EDITFORM_DOCUMENT.body;
		if (BROWSER == 'OPERA') {
			el.onclick = HtmlClearTemp;
		} else {
			if (el.addEventListener){
				el.addEventListener('click', HtmlClearTemp, false); 
			} else if (el.attachEvent){
				el.attachEvent('onclick', HtmlClearTemp);
			}
		}
		el.onkeydown=new Function("with(EditForm.event)if(ctrlKey && keyCode==13){submitform();return false}")

	}
	this.data = function()
	{
		if (BROWSER == '') {
			htmlResult = document.getElementById("CodeForm").value;
			htmlResult=cleanHtml(htmlResult);
			htmlResult=FilterScript(htmlResult);
			document.getElementsByName(this.hiddenName)[0].value = htmlResult;
			return htmlResult;
		}
		var length = document.getElementById(TOP_TOOLBAR_ICON[0][0]).src.length - 10;
		var image = document.getElementById(TOP_TOOLBAR_ICON[0][0]).src.substr(length,10);
		var htmlResult;
		if (image == 'source.gif') {
			htmlResult = HtmlHtmlToXhtml(EDITFORM_DOCUMENT.body.innerHTML);
		} else {
			htmlResult = document.getElementById("CodeForm").value;
		}		
		htmlResult=cleanHtml(htmlResult);
		htmlResult=FilterScript(htmlResult);
		document.getElementsByName(this.hiddenName)[0].value = htmlResult;
		return htmlResult;
	}
}