kindeditor.js

一个java的成熟的论坛模式

				KindDrawFlash();
			}
			break;
		case 'KIND_SPECIALCHAR':
			EditForm.focus();
			KindSelection();
			if (document.getElementById('popupName').innerHTML == mode) {
				KindClearTemp();
			} else {
				KindDrawSpecialchar();
			}
			break;
		case 'KIND_SPECIALCHAR_END':
			EditForm.focus();
			KindSelect();
			var element = document.createElement("span");
			element.appendChild(document.createTextNode(value));
			KindInsertItem(element);
			KindClearTemp();
			break;
		case 'KIND_LAYER':
			EditForm.focus();
			KindSelection();
			if (document.getElementById('popupName').innerHTML == mode) {
				KindClearTemp();
			} else {
				KindDrawLayer();
			}
			break;
		case 'KIND_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 = " ";
			KindSelect();
			KindInsertItem(element);
			KindClearTemp();
			break;
		case 'KIND_TABLE':
			EditForm.focus();
			KindSelection();
			if (document.getElementById('popupName').innerHTML == mode) {
				KindClearTemp();
			} else {
				KindDrawTable();
			}
			break;
		case 'KIND_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();
			KindSelect();
			KindInsertItem(element);
			KindClearTemp();
			break;
		case 'KIND_HR':
			EditForm.focus();
			KindSelection();
			if (document.getElementById('popupName').innerHTML == mode) {
				KindClearTemp();
			} else {
				KindDrawHr();
			}
			break;
		case 'KIND_HR_END':
			EditForm.focus();
			var element = document.createElement("hr");
			element.width = "100%";
			element.color = value;
			element.size = 1;
			KindSelect();
			KindInsertItem(element);
			KindClearTemp();
			break;
		case 'KIND_DATE':
			EditForm.focus();
			KindSelection();
			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));
			KindInsertItem(element);
			KindClearTemp();
			break;
		case 'KIND_TIME':
			EditForm.focus();
			KindSelection();
			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));
			KindInsertItem(element);
			KindClearTemp();
			break;
		case 'KIND_PREVIEW':
			eval(OBJ_NAME).data();
			var newWin = window.open('', 'kindPreview','width=800,height=600,left=30,top=30,resizable=yes,scrollbars=yes');
			KindWriteFullHtml(newWin.document);
			KindClearTemp();
			break;
		case 'KIND_ABOUT':
			EditForm.focus();
			if (document.getElementById('popupName').innerHTML == mode) {
				KindClearTemp();
			} else {
				KinDrawAbout();
			}
			break;
		default: 
			break;
	}
}
function KindDisableToolbar(flag)
{
	if (flag == true) {
		document.getElementById(TOP_TOOLBAR_ICON[0][0]).src = IMAGE_PATH + 'design.gif';
		for (i = 0; i < TOOLBAR_ICON.length; i++) {
			var el = document.getElementById(TOOLBAR_ICON[i][0]);
			if (TOOLBAR_ICON[i][0] == 'KIND_SOURCE' || TOOLBAR_ICON[i][0] == 'KIND_PREVIEW' || TOOLBAR_ICON[i][0] == 'KIND_ABOUT') {
				continue;
			}
			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 KindCreateIcon(icon)
{
	var str = '<img id="'+ icon[0] +'" src="' + IMAGE_PATH + icon[1] + '" alt="' + icon[4] + '" title="' + icon[4] + 
			'" align="absmiddle" style="border:1px solid ' + TOOLBAR_BG_COLOR +';cursor:pointer;" ' + 
			'onclick="javascript:KindExecute(\''+ icon[0] +'\');" '+
			'onmouseover="javascript:this.style.border=\'1px solid ' + MENU_BORDER_COLOR + '\';" ' +
			'onmouseout="javascript:this.style.border=\'1px solid ' + TOOLBAR_BG_COLOR + '\';">';
	return str;
}
function KindCreateToolbar()
{
	var htmlData = '<table cellpadding="0" cellspacing="0" border="0"><tr>';
	if (EDITOR_TYPE == 'full') {
		for (i = 0; i < TOP_TOOLBAR_ICON.length; i++) {
			htmlData += '<td style="padding:2px;">' + KindCreateIcon(TOP_TOOLBAR_ICON[i]) + '</td>';
		}
		htmlData += '</tr></table><table cellpadding="0" cellspacing="0" border="0"><tr>';
		for (i = 0; i < BOTTOM_TOOLBAR_ICON.length; i++) {
			htmlData += '<td style="padding:2px;">' + KindCreateIcon(BOTTOM_TOOLBAR_ICON[i]) + '</td>';
		}
	} else {
		for (i = 0; i < SIMPLE_TOOLBAR_ICON.length; i++) {
			htmlData += '<td style="padding:2px;">' + KindCreateIcon(SIMPLE_TOOLBAR_ICON[i]) + '</td>';
		}
	}
	htmlData += '</tr></table>';
	return htmlData;
}
function KindWriteFullHtml(documentObj)
{
	var editHtmlData = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r\n';
	editHtmlData += '<html xmlns="http://www.w3.org/1999/xhtml">\r\n<head>\r\n<title>KindEditor</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 += 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 KindEditor(objName) 
{
	this.objName = objName;
	this.hiddenName = objName;
	this.editorType = "full"; //full or simple
	this.editorWidth = "700px";
	this.editorHeight = "400px";
	this.skinPath = 'skins/default/';
	this.iconPath = 'icons/';
	this.imageAttachPath = 'attached/';
	this.imageUploadCgi = "upload.jsp";
	this.menuBorderColor = '#AAAAAA';
	this.menuBgColor = '#EFEFEF';
	this.menuTextColor = '#222222';
	this.menuSelectedColor = '#DDDDDD';
	this.toolbarBorderColor = '#DDDDDD';
	this.toolbarBgColor = '#EFEFEF';
	this.formBorderColor = '#DDDDDD';
	this.formBgColor = '#FFFFFF';
	this.buttonColor = '#AAAAAA';
	this.init = function()
	{
		EDITOR_TYPE = this.editorType.toLowerCase();
		IMAGE_PATH = this.skinPath;
		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_BORDER_COLOR = this.toolbarBorderColor;
		TOOLBAR_BG_COLOR = this.toolbarBgColor;
		FORM_BORDER_COLOR = this.formBorderColor;
		FORM_BG_COLOR = this.formBgColor;
		BUTTON_COLOR = this.buttonColor;
		OBJ_NAME = this.objName;
		BROWSER = KindGetBrowser();
		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 widthStyle = 'width:' + this.editorWidth + ';';
		var widthArr = this.editorWidth.match(/(\d+)([px%]{1,2})/);
		var iframeWidthStyle = 'width:' + (parseInt(widthArr[1]) - 2).toString(10) + widthArr[2] + ';';
		var heightStyle = 'height:' + this.editorHeight + ';';
		var heightArr = this.editorHeight.match(/(\d+)([px%]{1,2})/);
		var iframeHeightStyle = 'height:' + (parseInt(heightArr[1]) - 3).toString(10) + heightArr[2] + ';';
		if (BROWSER == '') {
			var htmlData = '<div id="editTextarea" style="' + widthStyle + heightStyle + '">' +
			'<textarea name="CodeForm" id="CodeForm" style="' + widthStyle + heightStyle + 
			'padding:0;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 style="font-family:'+EDITOR_FONT_FAMILY+';">';
		htmlData += '<div style="'+widthStyle+';border:1px solid ' + TOOLBAR_BORDER_COLOR + ';background-color:'+ TOOLBAR_BG_COLOR +'">';
		htmlData += KindCreateToolbar();
		htmlData += '</div><div id="editIframe" style="' + widthStyle + heightStyle + 
			'border:1px solid '+ FORM_BORDER_COLOR +';border-top:0;">' +
			'<iframe name="EditForm" id="EditForm" frameborder="0" style="' + iframeWidthStyle + iframeHeightStyle + 
			'padding:0;margin:0;border:0;"></iframe></div>';
		if (EDITOR_TYPE == 'full') {
			htmlData += '<div id="editTextarea" style="' + widthStyle + heightStyle + 
				'border:1px solid '+ FORM_BORDER_COLOR +';background-color:'+ 
				FORM_BG_COLOR +';border-top:0;display:none;">' +
				'<textarea name="CodeForm" id="CodeForm" style="' + iframeWidthStyle + iframeHeightStyle + 
				'padding:0;margin:0;border:0;font-size:12px;line-height:16px;font-family:'+EDITOR_FONT_FAMILY+';background-color:'+ 
				FORM_BG_COLOR +';" onclick="javascirit:parent.KindClearTemp();"></textarea></div>';
		}
		htmlData += '</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';
		KindWriteFullHtml(EDITFORM_DOCUMENT);
		var el = EDITFORM_DOCUMENT.body;
		if (BROWSER == 'OPERA') {
			el.onclick = KindClearTemp;
		} else {
			if (el.addEventListener){
				el.addEventListener('click', KindClearTemp, false); 
			} else if (el.attachEvent){
				el.attachEvent('onclick', KindClearTemp);
			}
		}
	}
	this.data = function()
	{
		if (BROWSER == '') {
			htmlResult = document.getElementById("CodeForm").value;
			document.getElementsByName(this.hiddenName)[0].value = htmlResult;
			return htmlResult;
		}
		var htmlResult;
		if (EDITOR_TYPE == 'full') {
			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);
			if (image == 'source.gif') {
				htmlResult = KindHtmlToXhtml(EDITFORM_DOCUMENT.body.innerHTML);
			} else {
				htmlResult = KindImageToObj(document.getElementById("CodeForm").value);
			}
			document.getElementsByName(this.hiddenName)[0].value = htmlResult;
		} else {
			htmlResult = KindHtmlToXhtml(EDITFORM_DOCUMENT.body.innerHTML);
		}
		return htmlResult;
	}
}