The JS Code is as follows:
The complete executable code is as follows: You can also modify the code before running it.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <br/> <title> text Editor </title> <br/> <style type =" text/css "> <br/> # td_btns td {<br/> text-align: center; <br/> height: 28px; <br/> width: 28px; <br/>}< br/> # Td_btns img {<br/> background-color: # ccc; <br/> border: 1px solid # b0b0b0; <br/> cursor: pointer; <br/>}< br/> </style> <br/> <script type = "text/javascript"> <br/> // initialize the Editor <br/> function initDocument () {<br/> var editor_bodyTag = "<ptml> <pead> </pead> <body bgcolor = '# ffff'> </body> </ptml> "; <br/> // obtain the iframe object. <Br/> var editor = document. getElementById ("editor_position"). contentWindow; <br/>/* sets the design mode of the editor. The default value is "off", indicating that the document cannot be edited. If it is set to "on", it is editable */<br/> editor.doc ument. designMode = "on"; <br/> editor.doc ument. open (); <br/> editor.doc ument. write (editor_bodyTag); <br/> editor.doc ument. close (); <br/> // set the encoding method of the editor. Set it to Chinese <br/> editor.doc ument. charset = "gb2312"; <br/> // This code is useless to IE. for FF, the cursor position on the initialization of FF is relatively higher. <br/> editorFormat ("justifyleft"); <br/>}< br/> // function, run the <br/> function editorFormat (what, opt) {<br/> var editor = document. getElementById ("editor_position "). contentWindow; <br/> if (opt = null) {<br/> try {<br/> editor.document.exe cCommand (what, false, null ); <br/>} catch (e) {// Error handling <br/> alert ("Error-line: 36 "); <br/>}< br/>}else {<br/> try {<br/> editor.document.exe cCommand (what, "", opt ); <br/>} catch (e) {<br/> alert ("error-line: 42 "); <br/>}< br/> editor. focus (); <br/>}< br/> // initialization button, which has an effect when mouseover or mouseout <br/> function initFormat () {<br/> var editor = document. getElementById ("editor_position "). contentWindow; <br/> var aImgs = document. getElementById ("td_btns "). getElementsByTagName ("img"); <br/> for (var I = 0; I <aImgs. length; I ++) {<br/> aImgs [I]. onmouseover = function () {<br/> this. style. padding = "2px"; <br/> editor. focus (); <br/>}< br/> aImgs [I]. onmouseout = function () {<br/> this. style. padding = "0px"; <br/>}< br/> if (I <4) {// bold, italic, underline, throughline <br/> aImgs [I]. value = false; <br/> aImgs [I]. onclick = function () {<br/> if (this. value) {<br/> this. value = false; <br/> this. style. backgroundColor = "# ccc"; <br/> this. style. border = "1px solid # b0b0b0"; <br/>}else {<br/> this. value = true; <br/> this. style. backgroundColor = "# ddd"; <br/> this. style. border = "1px inset # b0b0b0"; <br/>}< br/>} else if (I = 4) {// clear (bold, italic, underline, throughline) format <br/> aImgs [I]. onclick = function () {<br/> for (var j = 0; j <4; j ++) {<br/> aImgs [j]. value = false; <br/> aImgs [j]. style. backgroundColor = "# ccc"; <br/> aImgs [j]. style. border = "1px solid # b0b0b0"; <br/>}< br/>} else if (I> 4 & I <8) {<br/> aImgs [I]. onclick = function () {<br/> for (var j = 5; j <8; j ++) {<br/> aImgs [j]. style. backgroundColor = "# ccc"; <br/> aImgs [j]. style. border = "1px solid # b0b0b0"; <br/>}< br/> this. style. backgroundColor = "# ddd"; <br/> this. style. border = "1px inset # b0b0b0"; <br/>}< br/> window. onload = function () {<br/> initDocument (); <br/> initFormat (); <br/> var editor = document. getElementById ("editor_position "). contentWindow; <br/> // method 1 for getting button events <br/> if (document. all) {// IE <br/> editor.doc ument. attachEvent ("onkeydown", keyPress1); <br/>}else {// other <br/> editor.doc ument. addEventListener ("keydown", keyPress1, false) <br/>}< br/> // method 2 for getting button events <br/>/* editor.doc ument. body. onkeypress = function () {<br/> var editor = document. getElementById ("editor_position "). contentWindow; <br/> return keyPress2 (editor. event); <br/>}*/</p> <p >}< br/> // corresponds to the key event method 1 <br/> function keyPress1 (event) {<br/> // when the TAB key is pressed, the default event is canceled and four \ t is dynamically entered to indent the TAB key. <br/> if (event. keyCode = 9) {<br/> // cancel the default event <br/> if (document. all) {// IE <br/> event. returnValue = false; <br/>}else {// other (FF) <br/> event. preventDefault (); <br/>}< br/> var editor = document. getElementById ("editor_position "). contentWindow; <br/> if (document. all) {// IE <br/> var rng1_editor.doc ument. selection. createRange (); <br/> rng. text = "\ t"; <br/> // rng. collapse (false); <br/> // rng. select (); <br/>}else {// FF <br/> var range = document. createRange (); <br/> range. text = "OK"; <br/> var rng = editor. window. getSelection (); <br/> if (rng. rangeCount> 0) rng. removeAllRanges (); <br/> rng. text = "dovapour"; <br/>}< br/>/* <br/> IE: keyCode of a keypress event is case sensitive, but does not recognize function keys (Ctr, Shift, Alt, etc.). keyCode of a keyup or keydown event cannot be case sensitive and can recognize function keys. <br/> in FF, the keyCode of the keypress event is 0. the keyCode of the keyup and keydown events cannot be case sensitive and can recognize the function key. <br/> in Chrome, the keyCode of the keypress event is case sensitive, but cannot identify function keys (Ctr, Shift, Alt, etc.). The keyCode of the keyup and keydown events cannot be case sensitive, recognize function keys. <br/> */</p> <p> // corresponds to key event method 2 <br/> function keyPress2 (ev) {<br/> alert (ev. keyCode ); <br/>}< br/> </script> <br/> </pead> </p> <body> <br/> <table style =" background-color: # ccc; "cellpadding = 0 cellspacing = 5 border = 0> <br/> <tr> <br/> <td> <br/> <table id =" td_btns "> <br/> <tr> <br/> <td id = "bold_td" title = "bold" onclick = "editorFormat ('bold '); "> <br/> <br/> </td> </p> <p> <td title = "italic" onclick = "editorFormat ('italic '); "> <br/> <br/> </td> </p> <p> <td title = "underline" onclick = "editorFormat ('underline '); "> <br/> <br/> </td> </p> <p> <td title = "strikethrough" onclick = "editorFormat ('strikethangout '); "> <br/> <br/> </td> </p> <p> <td title = "unformatted" onclick = "editorFormat ('removeformat '); "> <br/> <br/> </td> </p> <p> <td title = "left aligned" onclick = "editorFormat ('justifyleft '); "> <br/> <br/> </td> </p> <p> <td title = "Intermediate alignment" onclick = "editorFormat ('justifycenter '); "> <br/> <br/> </td> </p> <p> <td title = "right-aligned" onclick = "editorFormat ('justifyright '); "> <br/> <br/> </td> </p> <p> </tr> <br/> </table> <br/> </td> <br/> </tr> <br/> <tr height = "4 "> <td> </tr> <br/> <tr height =" 400 "> <br/> <td valign =" top "> <iframe ID = "editor_position" marginheight = "0" style = "word-break: break-all; width: 640px; overflow: hidden; "marginwidth =" 0 "hspace =" 0 "width =" 640 "height =" 400 "> </iframe> <br/> </td> <br/> </ tr> <br/> </table> <br/> </body> <br/> </ptml> <br/>
Run codeSave codeCopy code
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
