用户名: 密码: 验证码: 注册           网站地图 高级搜索 RSS订阅 收藏本站
山东十七地市站长联盟信息: 济南 青岛 淄博 枣庄 东营 烟台 潍坊 济宁 泰安 威海 日照 莱芜 临沂 德州 聊城 滨州 菏泽      
您的位置:主页>设计在线>WEB标准>

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

[ 来源: | 作者: | 更新日期:2008-5-5 22:15:12 | 评论 0 条 | 我要投稿 ]

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

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

字串7

1.在初始化编辑器内容的时候,加上"<div></div>"
这样回车的时候编辑器会直接生成"<div></div>"而不会生成<p></p>,就可以只是换行而不换段了,如下所示:

字串8

<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 ><iframe width="500" height="400" id="idEditbox"></iframe><BR><INPUT TYPE="button" value="查看源代码" ><BR><TEXTAREA NAME="source" ROWS="20" COLS="60"></TEXTAREA></BODY>

字串6

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

2.直接在onkeypress里面处理 字串2

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

字串1

<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 ><iframe width="500" height="400" id="idEditbox"></iframe><BR><INPUT TYPE="button" value="查看源代码"  ><BR><TEXTAREA NAME="source" ROWS="20" COLS="60"></TEXTAREA></BODY> 字串6

不足:
1).insertHTML("<br><!--  -->"); 会产生垃圾代码“<!--  -->”; 
2).要保证焦点必须在编辑器中才能响应编辑器的onkeypress事件。
字串2


Tags:解决方案 问题 编辑器 // 可以 br sz var 直接 代码 标签
您的评论
用户名:新注册) 密码: 匿名评论 [所有评论]

·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为