在html編輯器中,一般默認按回車總是出現<p></p>,當然按shift+enter可以是直接加<br>,而很多人希望按回車就是<br>換行而不是分段。
一直有人問我這個問題,而我沒有寫代碼測試就認爲在onkeydown裏面判斷 event.keyCode==13就可以判斷並解決,而後來發現似乎並沒有人能用這種方法解決成功。對此表示歉意!爲此,仔細研究了一下,發現可以有兩 種解決方法,但是都不是很完美,不過已經基本可以滿足需要了:
1.在初始化編輯器內容的時候,加上"<div></div>"
這樣回車的時候編輯器會直接生成"<div></div>"而不會生成<p></p>,就可以只是換行而不換段了,如下所示:
<SCRIPTLANGUAGE="javascript">
<!--functioniniteditor(){
varL_DEFAULTHTML_TEXT="<DIV></DIV>";
varsz=""sz+="< BODYONCONTEXTMENU=\"returnfalse\">"+L_DEFAULTHTML_TEXT+"</BODY& gt;"idEditbox.document.designMode="on"//編輯模式打開 idEditbox.document.write(sz)
//以下代碼只是輔助方便看編輯器源代碼的
idEditbox.document.attachEvent("onkeyup",readsource);
idEditbox.document.attachEvent("onkeydown",readsource);
}//看源代碼
functionreadsource(){
document.all.source.value=idEditbox.document.body.innerHTML;
}
//-->
</SCRIPT>
<BODYοnlοad="initeditor()"><iframewidth="500"height="400"id="idEditbox"></iframe>
<BR>
<INPUTTYPE="button"value="查看源代碼"οnclick="readsource()">
<BR>
<TEXTAREANAME="source"ROWS="20"COLS="60">
</TEXTAREA>
</BODY>
不足:
這種方法有個bug就是在編輯器中添加一些內容後,全選(ctr+A)然後刪除所有內容(這樣就把<div></div>也刪除了),重新輸入內容後回車就還是會產生<p></p>
2.直接在onkeypress裏面處理
我們可以在onkeypress裏面直接出來,但判斷event.keyCode==13也就是是回車的時候我們直接插入<br>標籤,這樣無論怎麼樣都不會出現問題的了。以下是代碼示例:
<SCRIPTLANGUAGE="javascript">
<!--
functioniniteditor()
{
varsz=""sz+="<BODYONCONTEXTMENU=\"returnfalse\"></BODY>"idEditbox.document.designMode="on"idEditbox.document.write(sz)idEditbox.document.οnkeypress=fnKeypress
}
functionfnKeypress()
{
//注意:如果焦點不在編輯器內該函數就不起作用了;
varev=idEditbox.event;
if(ev.keyCode==13)
{
insertHTML("<br><!---->");//不知道是我瀏覽器問題還是其他問題,只插入<br>標籤光標不換行,必須附加點其他標籤,可以最後一起刪除之returnfalse;
//這樣回車就是等於失效了,不會加上討厭的<p>標籤}
}
//在光標位置插入html
functioninsertHTML(html)
{
varsel=idEditbox.document.selection;
if(sel!=null)
{varrng=sel.createRange();
if(rng!=null)rng.pasteHTML(html);
}
}
//查看代碼
functionreadsource()
{
document.all.source.value=idEditbox.document.body.innerHTML;
}
//-->
</SCRIPT>
<BODYοnlοad="initeditor()">
<iframewidth="500"height="400"id="idEditbox"></iframe>
<BR>
<INPUTTYPE="button"value="查看源代碼"οnclick="readsource()"οnfοcus="idEditbox.focus()">
<BR>
<TEXTAREANAME="source"ROWS="20"COLS="60">
</TEXTAREA>
</BODY>
不足:
1).insertHTML("<br><!---->");會產生垃圾代碼“<!---->”;
2).要保證焦點必須在編輯器中才能響應編輯器的onkeypress事件
因時間關係,本示例程序並未給出焦點不在編輯器中的處理方法