首頁 > 開發者 > JavaScript
有的時候，項目中只需要實現一些簡單的功能就可以了，找了半天，文字編輯器都是一些內容很豐富的成品。索性，自己寫一個簡單的網頁文字編輯器。不多說，先貼效果，如：
實現這個功能涉及三個檔案，源碼如下：
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><spanid="user_name" class="link" onClick="return openUserInfo();"style="padding:2px;" title="Click to show user's vcard"></span><brclear=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><iframesrc="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"onchange=myfont(this);><option selected value="宋體">宋體</option><option value="黑體">黑體</option><option value="隸書">隸書</option></select> 顏色 <select size="1" name="fontColor" onchange="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" onchange="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);"> <inputtype="button" value="B" onClick="bold(this);"> <inputtype="button" value="_" onClick="underline(this);"> <inputtype="button" value="表情" onclick="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;elsereturn true;switch (keycode) {case 38: // shift+upif (e.ctrlKey) {el.value = jwcMain.getHistory('up', el.value);el.focus();el.select();}break;case 40: // shift+downif (e.ctrlKey) {el.value = jwcMain.getHistory('down', el.value);el.focus();el.select();}break;case 76:if (e.ctrlKey) { // ctrl+lchat.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";elsedocument.getElementById('msgbox').style.fontStyle = "Italic";}function bold(el) {if (document.getElementById('msgbox').style.fontWeight == "bold")document.getElementById('msgbox').style.fontWeight = "Normal";elsedocument.getElementById('msgbox').style.fontWeight = "Bold";}function underline(el) {if (document.getElementById('msgbox').style.textDecoration == "underline")document.getElementById('msgbox').style.textDecoration = "None";elsedocument.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+'64_64.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見，textEdit.rar。
【完】
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
