Home > Developer > JavaScript
Sometimes, you only need to implement some simple functions in the project. After searching for half a day, the text editor is a product with rich content. Simply write a simple webpage text editor. Not to mention, paste the effect first, for example:
This function involves three files. The source code is as follows:
1.chat.html
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"> <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 = effeccmain. gethistory ('up', El. value); El. focus (); El. select ();} break; Case 40: // SHIFT + downif (E. ctrlkey) {el. value = effeccmain. gethistory ('low', El. value); El. focus (); El. select ();} break; Case 76: If (E. ctrlkey) {// ctrl+lchat.doc ument. body. innerhtml = ''; return false;} break; Case 27: window. close (); break;} return true;} // The 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;} // italic 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 ";}Note: It looks like font, fontcolor, and fontsize are keywords, so I added my to the front.
3. Face. js
/*** @ Author DML * duanmingli@stu.xjtu.edu.cn * @ since 2012.8.9 * _ txtareaid string text box ID (required) * _ elementid string specifies the element ID, insert the expression to the specified Element (optional) */function jointskyface (_ txtareaid, _ elementid) {var facetool = new object (); facetool. textareaid = _ txtareaid; facetool. elementid = _ elementid; facetool. basepath = "images/faces/"; // image path // search for the text field facetool by ID. textarea = function () {var temp = $ ("textarea [ID = '" + facetool. text Areaid + "']"); Return temp;} // specifies the facetool element. element = function () {var temp = $ ("#" + facetool. elementid); Return temp;} // create the facial expression control facetool. create = function () {// The text field 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.attr('src', f.img}.attr('title', '{'{f.txt +'] '); vaR A = $ ('<A> '{}a.attr('title', '{'{f.txt +'] ');. append (IMG);. click (facetool. insertface); // bind the Click Event box. append (a) ;}); // determines if the specified element is not empty, insert the expression into the specified element if (facetool. element () [0]) {facetool. element (). append (box);} else {// if the specified element is null, insert the expression to the front of textarea facetool. textarea (). before (box) ;}}/* Insert expression */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;}/* expression description and path */facetool. faces = [{'txt ': 'Shut up', 'img ': facw.l.basepath}'47_47.gif'}, {'txt ': 'surprised', 'img ': facw.l.basepathw.'48_48.gif '}, {'txt ': 'smit', 'img': facw.l.basepath}'49_49.gif '}, {'txt': 'far', 'img ': facw.l.basepath}'50_50.gif'}, {'txt ': 'quarrel ', 'img': facw.l.basepath}'51_51.gif '}, {'txt': 'poisoned ', 'img': facw.l.basepath}'52_52.gif '}, {'txt': 'cell phone ', 'img ': facw.l.basepath}'64_64.gif'}, {'txt ': 'rain', 'img': facw.l.basepathw.'66_66.gif '}, {'txt': 'helpless ', 'img ': else '}, {'txt': 'hangzhou', 'img ': facw.l.basepath}'72_72.gif'}, {'txt ': 'wooyun', 'img ': facw.l.basepath}'73_73.gif '}, {'txt ': 'beach', 'img ': facw.l.basepath}'74_74.gif'}, {'txt ': 'peeping', 'img ': facw.l.basepath}'75_75.gif'}, {'txt ': 'sleepy ', 'img': facw.l.basepath='77_77.gif '}]; return facetool ;}Of course, the corresponding git image must be placed in the specified location.
For demo demo, textedit.rar.
[End]
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
