动网论坛,站长建站首选,国内使用量最多的论坛软件 动网论坛官方技术讨论区 站长工具 申请属于您自己的免费论坛
首页 | 新闻资讯 | 网站运营 | 网络编程 | 数据库 | 服务器 | 网页设计 | 图像媒体 | 网络应用 | 搜索优化 | 资源下载 | 动网主机 | DVBOX
    本站内  互联网 ASP论坛  ASP.Net论坛  PHP论坛
   网页设计 → 阅读文章

 html编辑器的回车换行问题解决方案

作者:无从考证 来源:不详 
阅读 1878 人次 , 2006-2-15 14:40:00 

在html编辑器中,一般默认按回车总是出现<p> </p>,当然按shift+enter可以是直接加<br>,而很多人希望按回车就是<br>换行而不是分段。

一直有人问我这个问题,而我没有写代码测试就认为在onkeydown里面判断event.keyCode==13就可以判断并解决,而后来发现似乎并没有人能用这种方法解决成功。对此表示歉意!为此,仔细研究了一下,发现可以有两种解决方法,但是都不是很完美,不过已经基本可以满足需要了:

1.在初始化编辑器内容的时候,加上"<div></div>"
这样回车的时候编辑器会直接生成"<div></div>"而不会生成<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>



不足:
这种方法有个bug就是在编辑器中添加一些内容后,全选(ctr+A)然后删除所有内容(这样就把<div></div>也删除了),重新输入内容后回车就还是会产生<p></p>

2.直接在onkeypress里面处理
我们可以在onkeypress里面直接出来,但判断event.keyCode==13也就是是回车的时候我们直接插入<br>标签,这样无论怎么样都不会出现问题的了。以下是代码示例:

<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(){ //注意:如果焦点不在编辑器内该函数就不起作用了; var ev = idEditbox.event; if(ev.keyCode==13){  insertHTML("<br><!--  -->"); //不知道是我浏览器问题还是其他问题,只插入<br>标签光标不换行,必须附加点其他标签,可以最后一起删除之  return false;//这样回车就是等于失效了,不会加上讨厌的<p>标签 }}//在光标位置插入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><!--  -->"); 会产生垃圾代码“<!--  -->”; 
2).要保证焦点必须在编辑器中才能响应编辑器的onkeypress事件
因时间关系,本示例程序并未给出焦点不在编辑器中的处理方法    
 本文Tagshtml/css  
 收藏本文  打印本文  论坛讨论  关闭窗口
· 上一篇:网页设计中HTML常犯的五个错误
· 下一篇:网页中自动换行问题
· Java咖啡馆——品味第一杯咖啡(4)
· 4天学会 NoahWeb 表单 - 第一天
· HTML特殊字符 - 补遗
· CSS 循序渐进(三)样式“表”秀
· DreamWeaver,经典50问(8)


关于本站 | 联系我们 | 业务合作 | 客户案例 | 诚聘英才 | 广告合作 | 收藏本站
海口动网先锋网络科技有限公司版权所有
Copyright © 2000 - 2006 Cndw.Com
中华人民共和国电信与信息服务业务经营许可证编号 琼 ICP 020077