js实现简单的网页文本编辑器

来源：爱够旅游网

有的时候，项目中只需要实现一些简单的功能就可以了，找了半天，文本编辑器都是一些内容很丰富的成品。索性，自己写一个简单的网页文本编辑器。不多说，先贴效果，如下图：

实现这个功能涉及三个文件，源码如下：

1.chat.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Chat</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script language="javascript" src="jquery-1.7.min.js"
	type="text/javascript"></script>
<script language="javascript" src="chat.js" type="text/javascript"></script>
<script language="javascript" src="face.js"
	type="text/javascript"></script>

</head>
<body style="margin:8px;">
	<table width="100%" height="100%">
		<tr>
			<td colspan=2>
				<table border=0 cellspacing=0 cellpadding=0 width="100%">
					<tr>
						<td width="100%" valign=top><img src="images/unavailable.gif"
							name="statusLed" width=16 height=16 border=0 align=left><span
							id="user_name" class="link" onClick="return openUserInfo();"
							style="padding:2px;" title="Click to show user's vcard"></span><br
							clear=all> <span id="awaymsg" class="statusMsg"></span></td>
						<td align=right valign=top><button id='hist_button'
								onClick="return openUserHistory();">History</button></td>
				</table>
			</td>
		</tr>
		<tr>
			<td width="100%" height="100%" colspan=2><iframe
					src="chat_iframe.html" id="chat" name="chat" scrolling="auto"></iframe>
			</td>
		</tr>
		<form name="chatform" style="border:0px;margin:0px;padding:0px;">
			<tr>
				<td colspan=2 align=left>字体 <select size="1" name="font"
					οnchange=myfont(this);>
						<option selected value="宋体">宋体</option>
						<option value="黑体">黑体</option>
						<option value="隶书">隶书</option>
				</select> 颜色 <select size="1" name="fontColor" οnchange="myfontColor(this);">
						<option selected value="black">黑</option>
						<option value="red">红</option>
						<option value="yellow">黄</option>
						<option value="green">绿</option>
						<option value="blue">蓝</option>
				</select> 字号 <select size="1" name="fontSize" οnchange="myfontSize(this);">
						<option value="10">10</option>
						<option value="20">20</option>
						<option value="30">30</option>
						<option value="40">40</option>
				</select> <input type="button" value="I" onClick="italic(this);"> <input
					type="button" value="B" onClick="bold(this);"> <input
					type="button" value="_" onClick="underline(this);"> <input
					type="button" value="表情" οnclick="showFaces(this);"><br>
					<div id="face_tool" style="display:none"></div>
					</p>
				</td>
			</tr>
			<tr>
				<td valign=top><img id="toggle_icon"
					src="images/group_close.gif" width="14" height="14"
					onClick="toggle_msgbox(this);"></td>
				<td width="100%"><textarea id="msgbox" wrap="virtual"
						name="msgbox" style="width:100%;height:1.4em;"
						onKeyPress="return msgboxKeyPressed(this,event);"
						onKeyDown="return msgboxKeyDown(this,event);">
						</textarea></td>
			</tr>
			<tr id="submitbutton">
				<td colspan=2 align=right>
					<button onClick="javascript:window.close();">close</button>
					<button onClick="submitClicked(); return false;">Send</button>
				</td>
			</tr>



		</form>
	</table>


	<script type="text/javascript">
		$(document).ready(function() {

			//构建表情空间，指定表情位置
			var xface = new JointSkyFace('msgbox', 'face_tool');
			xface.Create();
		});
	</script>
</body>
</html>

2.chat.js

function showFaces(el) {
	if (msgbox_toggled) {
		document.getElementById('face_tool').style.display = 'none';
		el.src = group_close.src;
	} else {
		document.getElementById('face_tool').style.display = '';
		el.src = group_open.src;
	}
	msgbox_toggled = !msgbox_toggled;

}

function msgboxKeyDown(el, e) {
	var keycode;
	if (window.event) {
		e = window.event;
		keycode = window.event.keyCode;
	} else if (e)
		keycode = e.which;
	else
		return true;

	switch (keycode) {
	case 38: // shift+up
		if (e.ctrlKey) {
			el.value = jwcMain.getHistory('up', el.value);
			el.focus();
			el.select();
		}
		break;
	case 40: // shift+down
		if (e.ctrlKey) {
			el.value = jwcMain.getHistory('down', el.value);
			el.focus();
			el.select();
		}
		break;
	case 76:
		if (e.ctrlKey) { // ctrl+l
			chat.document.body.innerHTML = '';
			return false;
		}
		break;
	case 27:
		window.close();
		break;
	}
	return true;
}

// dml@2012.8.22 add func:changeMsgBoxStyle 
function myfont(el) {
	document.getElementById('msgbox').style.fontFamily = chatform.font.value;
}

function myfontColor(el) {
	document.getElementById('msgbox').style.color = chatform.fontColor.value;
}
function myfontSize(el) {
	document.getElementById('msgbox').style.fontSize = chatform.fontSize.value;
}
// 斜体
function italic(el) {
	if (document.getElementById('msgbox').style.fontStyle == "italic")
		document.getElementById('msgbox').style.fontStyle = "Normal";
	else
		document.getElementById('msgbox').style.fontStyle = "Italic";
}
function bold(el) {
	if (document.getElementById('msgbox').style.fontWeight == "bold")
		document.getElementById('msgbox').style.fontWeight = "Normal";
	else
		document.getElementById('msgbox').style.fontWeight = "Bold";
}
function underline(el) {
	if (document.getElementById('msgbox').style.textDecoration == "underline")
		document.getElementById('msgbox').style.textDecoration = "None";
	else
		document.getElementById('msgbox').style.textDecoration = "underline";
}

注意的是：貌似font ,fontColor,fontSize是关键字，就在前面加了my修饰了一下。

3.face.js

/**
 * @author dml 
 * duanmingli@stu.xjtu.edu.cn
 * @since 2012.8.9
 *_txtAreaId String 文本框Id (必填)
 *_elementId String 指定元素Id,表情插入到指定的元素内  (选填)
 */
function JointSkyFace(_txtAreaId,_elementId){
	var faceTool= new Object();
	faceTool.textAreaId = _txtAreaId;
	faceTool.elementId= _elementId;
	faceTool.basePath= "images/faces/";//图片路径
	//根据id查找文本域
	faceTool.textArea = function(){
		var temp = $("textarea[id='"+faceTool.textAreaId+"']"); 
		return temp;
	}
	//指定元素
	faceTool.element = function(){
		var temp = $("#"+faceTool.elementId); 
		return temp;
	}
	
	//创建表情控件
	faceTool.Create = function(){
		//找不到文本域
		if(!faceTool.textArea().is('textarea')){
			alert("Not found textarea attr id is "+faceTool.textId);
			return false;
		}
		var box = $("<div>"); 
		$.each(faceTool.faces,function(i,f){
			var img = $('<img>');
			img.attr('src',f.img).attr('title','['+f.txt+']');
			var a = $('<a>');
			a.attr('title','['+f.txt+']');
			a.append(img);
			a.click(faceTool.insertFace); //绑定点击事件
			box.append(a);
		});
		//判断如果指定的元素不为空，将表情插入到指定元素内
		if(faceTool.element()[0]){
			faceTool.element().append(box);
		}else{//如果指定元素为空，则将表情插入到textarea前面
			faceTool.textArea().before(box);
		}
	}
	
	/*插入表情*/
	faceTool.insertFace = function(){
		var faceName = $(this).attr('title');
		faceTool.textArea().focus();
		var txtComment =faceTool.textArea()[0];
		if (document.all){
			var r = document.selection.createRange();
			document.selection.empty();
			r.text = faceName;
			r.collapse();
			r.select();
		}
		else{
			var newstart = txtComment.selectionStart+faceName.length;
			txtComment.value=txtComment.value.substr(0,txtComment.selectionStart)+faceName+txtComment.value.substring(txtComment.selectionEnd);
			txtComment.selectionStart = newstart;
			txtComment.selectionEnd = newstart;
		}
	}
	/*表情描述与路径*/
	faceTool.faces =[{'txt':'闭嘴','img':faceTool.basePath+'47_47.gif'},
				{'txt':'惊讶','img':faceTool.basePath+'48_48.gif'},
				{'txt':'得意','img':faceTool.basePath+'49_49.gif'},
				{'txt':'恍惚','img':faceTool.basePath+'50_50.gif'},             
				{'txt':'争吵','img':faceTool.basePath+'51_51.gif'},             
				{'txt':'中毒','img':faceTool.basePath+'52_52.gif'},             
				{'txt':'手机','img':faceTool.basePath+'_.gif'},             
				{'txt':'下雨','img':faceTool.basePath+'66_66.gif'},             
				{'txt':'无奈','img':faceTool.basePath+'71_71.gif'},             
				{'txt':'期待','img':faceTool.basePath+'72_72.gif'},             
				{'txt':'乌云','img':faceTool.basePath+'73_73.gif'},             
				{'txt':'沙滩','img':faceTool.basePath+'74_74.gif'},             
				{'txt':'偷窥','img':faceTool.basePath+'75_75.gif'},             
				{'txt':'困','img':faceTool.basePath+'77_77.gif'}];
	return faceTool;
}

当然，相应的git图片需要放置到指定位置。

演示demo见，。

【完】

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文