轉:HTML編輯器的回車換行問題解決方案

在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事件

因時間關係,本示例程序並未給出焦點不在編輯器中的處理方法

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章