關(guān)于html編輯器的回車換行問(wèn)題解決方案
發(fā)布時(shí)間:2008-10-05 閱讀數(shù): 次 來(lái)源:網(wǎng)樂(lè)原科技
在html編輯器中,一般默認(rèn)按回車總是出現(xiàn)<p> </p>,當(dāng)然按shift+enter可以是直接加<br>,而很多人希望按回車就是<br>換行而不是分段。
一直有人問(wèn)我這個(gè)問(wèn)題,而我沒有寫代碼測(cè)試就認(rèn)為在onkeydown里面判斷event.keyCode==13就可以判斷并解決,而后來(lái)發(fā)現(xiàn)似乎并沒有人能用這種方法解決成功。對(duì)此表示歉意!為此,仔細(xì)研究了一下,發(fā)現(xiàn)可以有兩種解決方法,但是都不是很完美,不過(guò)已經(jīng)基本可以滿足需要了:
1.在初始化編輯器內(nèi)容的時(shí)候,加上"<div></div>"
這樣回車的時(shí)候編輯器會(huì)直接生成"<div></div>"而不會(huì)生成<p></p>,就可以只是換行而不換段了,如下所示:
<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"//編輯模式打開 idEditbox.document.write(sz) //以下代碼只是輔助方便看編輯器源代碼的 idEditbox.document.attachEvent( "onkeyup" , readsource ); idEditbox.document.attachEvent( "onkeydown" , readsource );}//看源代碼function readsource(){ document.all.source.value=idEditbox.document.body.innerHTML;}//--></SCRIPT><BODY onload="initeditor()"><iframe width="500" height="400" id="idEditbox"></iframe><BR><INPUT TYPE="button" value="查看源代碼" onclick="readsource()"><BR><TEXTAREA NAME="source" ROWS="20" COLS="60"></TEXTAREA></BODY>
不足:
這種方法有個(gè)bug就是在編輯器中添加一些內(nèi)容后,全選(ctr+A)然后刪除所有內(nèi)容(這樣就把<div></div>也刪除了),重新輸入內(nèi)容后回車就還是會(huì)產(chǎn)生<p></p>
2.直接在onkeypress里面處理
我們可以在onkeypress里面直接出來(lái),但判斷event.keyCode==13也就是是回車的時(shí)候我們直接插入<br>標(biāo)簽,這樣無(wú)論怎么樣都不會(huì)出現(xiàn)問(wèn)題的了。以下是代碼示例:
<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(){ //注意:如果焦點(diǎn)不在編輯器內(nèi)該函數(shù)就不起作用了; var ev = idEditbox.event; if(ev.keyCode==13){ insertHTML("<br><!-- -->"); //不知道是我瀏覽器問(wèn)題還是其他問(wèn)題,只插入<br>標(biāo)簽光標(biāo)不換行,必須附加點(diǎn)其他標(biāo)簽,可以最后一起刪除之 return false;//這樣回車就是等于失效了,不會(huì)加上討厭的<p>標(biāo)簽 }}//在光標(biāo)位置插入htmlfunction insertHTML(html){var sel = idEditbox.document.selection;if (sel!=null) { var rng = sel.createRange(); if (rng!=null) rng.pasteHTML(html);}}//查看代碼function readsource(){ document.all.source.value=idEditbox.document.body.innerHTML;}//--></SCRIPT><BODY onload="initeditor()"><iframe width="500" height="400" id="idEditbox"></iframe><BR><INPUT TYPE="button" value="查看源代碼" onclick="readsource()" onfocus="idEditbox.focus()"><BR><TEXTAREA NAME="source" ROWS="20" COLS="60"></TEXTAREA></BODY>
不足:
1).insertHTML("<br><!-- -->"); 會(huì)產(chǎn)生垃圾代碼“<!-- -->”;
2).要保證焦點(diǎn)必須在編輯器中才能響應(yīng)編輯器的onkeypress事件
因時(shí)間關(guān)系,本示例程序并未給出焦點(diǎn)不在編輯器中的處理方法