相关文章
Wizard网站制作软件 V3.1
全球15个顶级技术类博客
北京网站建设CSS在表格边框上的美学应用
北京网站制作SQL数据库建立
企通互联HTML的排版标记
网站建设利用CSS改善网站可访问性(2005-02-21 10:13:09)
北京网站制作DreamwaverMX与ASP.NET(四)
网站建设Dreamweaver 4 简明教程(五、让你的网页更漂亮之三)
北京网页设计商业Flash设计经验谈(节奏控制)
北京网站建设Flash MX 2004 编程(AS2.0)教程(四)
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 企通互联企通互联html编辑器的回车换行问题解决方案
企通互联企通互联html编辑器的回车换行问题解决方案
在 网站制作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> 网站制作
企通互联
北京网站建设
北京网站建设 www.qt-net.com
不足： 网站设计
这种方法有个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=i
dEditbox.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事件 网站设计
因时间关系，本示例程序并未给出焦点不在编辑器中的处理方法