In the html editor, by default, <p> </p> will always appear when pressing Enter. Of course, pressing shift+enter can directly add <br>, and many people hope that pressing Enter will cause <br> to wrap instead of breaking. part.
People have been asking me this question, but without writing a code test, I thought that I could judge and solve it by judging event.keyCode==13 in onkeydown. But later I found that no one seemed to be able to solve it successfully using this method. Sorry about that! For this reason, after careful study, I found that there are two solutions, but neither is perfect, but it can basically meet the needs:
1. When initializing the editor content, add "<div></div>"
In this way, when you press Enter, the editor will directly generate "<div></div>" instead of <p></p>, and you can just wrap the line instead of the paragraph, as shown below:
| The following is the quoted content: <SCRIPT LANGUAGE="javascript"><!--function initeditor(){ var L_DEFAULTHTML_TEXT="<DIV></DIV>"; var sz="" sz+="<BODY ONCONTEXTMENU="return false">" +L_DEFAULTHTML_TEXT+"</BODY>" idEditbox.document.designMode="on"//Open editing mode idEditbox.document.write(sz) //The following code is just to assist in viewing the editor source code idEditbox.document.attachEvent( " onkeyup" , readsource ); idEditbox.document.attachEvent( "onkeydown" , readsource );}//Look at the source code function readsource(){ document.all.source.value=idEditbox.document.body.innerHTML;}//- -></SCRIPT><BODY ><iframe width="500" height="400" id="idEditbox"></iframe><BR><INPUT TYPE="button" value="View source code" >< BR><TEXTAREA NAME="source" ROWS="20" COLS="60"></TEXTAREA></BODY> |
insufficient:
A bug with this method is that after adding some content in the editor, select all (ctr+A) and then delete all the content (this will also delete <div></div>), re-enter the content and press Enter. Will still produce <p></p>
2. Process it directly in onkeypress
We can come out directly in onkeypress, but when judging event.keyCode==13, that is, when pressing Enter, we directly insert the <br> tag, so that no problem will occur no matter what. Here is a code example:
| The following is the quoted content: <SCRIPT LANGUAGE="javascript"><!--function initeditor(){ var sz="" sz+="<BODY ONCONTEXTMENU="return false"></BODY>" idEditbox.document.designMode="on" idEditbox.document.write(sz) idEditbox.document.onkeypress=fnKeypress}function fnKeypress(){ //Note: This function will not work if the focus is not in the editor; var ev = idEditbox.event; if(ev. keyCode==13){ insertHTML("<br><!-- -->"); //I don’t know if it’s a problem with my browser or something else. Only the <br> tag is inserted and the cursor does not wrap. You must attach other tags. , you can delete it together at the end return false;//In this way, the carriage return is equivalent to invalid, and the annoying <p> tag will not be added}}//Insert html function at the cursor position insertHTML(html){var sel = idEditbox.document. selection;if (sel!=null) { var rng = sel.createRange(); if (rng!=null) rng.pasteHTML(html);}}//View code function readsource(){ document.all.source. value=idEditbox.document.body.innerHTML;}//--></SCRIPT><BODY ><iframe width="500" height="400" id="idEditbox"></iframe><BR><INPUT TYPE="button" value="View source code" ><BR><TEXTAREA NAME="source" ROWS="20" COLS="60"></TEXTAREA></BODY> |
insufficient:
1).insertHTML("<br><!-- -->"); will generate garbage code "<!-- -->";
2). To ensure that the focus must be in the editor in order to respond to the editor's onkeypress event, due to time constraints, this sample program does not provide a processing method when the focus is not in the editor.