发送文章__当百网

文章·资料	电脑软件	手机软件	网站源码
电脑·手机·网络学习话题娱乐故事文化·历史国学典籍法律法规	操作系统网络办公·文件音频视频图形图像硬件·驱动程序行业教学学习编程游戏	安卓苹果鸿蒙其他	ASP ASP.NET JSP PHP HTML·CSS·JavaScript

本站搜索

发送文章

解决 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+/BODYidEditbox.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
BODYonload=initeditor()
iframewidth=500height=400id=idEditbox/iframeBR
INPUTTYPE=buttonvalue=查看源代码onclick=readsource()BR
TEXTAREANAME=sourceROWS=20COLS=60/TEXTAREA
/BODY

缺点：这种方法有个bug就是在编辑器中添加一些内容后，全选（Ctrl+A）然后删除所有内容（这样就把div/div也删除了），重新输入内容后回车就还是会产生p/p

2、直接在onkeypress里面处理

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

SCRIPTLANGUAGE=javascript
!--
functioniniteditor()
{
varsz=sz+=BODYONCONTEXTMENU=\returnfalse\/BODYidEditbox.document.designMode=onidEditbox.document.write(sz)idEditbox.document.onkeypress=fnKeypress}functionfnKeypress(){
//注意：如果焦点不在编辑器内该函数就不起作用了；
varev=idEditbox.event;if(ev.keyCode==13){insertHTML(br!----);
//不知道是我浏览器问题还是其他问题，只插入br标签光标不换行，必须附加点其他标签，可以最后一起删除之
returnfalse;
//这样回车就是等于失效了，不会加上讨厌的p标签}}
//在光标位置插入htmlfunctioninsertHTML(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
BODYonload=initeditor()iframewidth=500height=400id=idEditbox/iframeBR
INPUTTYPE=buttonvalue=查看源代码onclick=readsource()onfocus=idEditbox.focus()BR
TEXTAREANAME=sourceROWS=20COLS=60/TEXTAREA
/BODY

缺点：1、insertHTML(br!----);会产生垃圾代码“!----”;
2、要保证焦点必须在编辑器中才能响应编辑器的onkeypress事件，因时间关系，本示例程序并未给出焦点不在编辑器中的处理方法。<br /><br />文章网址：<a href="https://dangbai.cn/Article.asp?ID=10001071" target="_blank">https://dangbai.cn/Article.asp?ID=10001071</a>

填写邮件内容

发信地址

填写发信人的电子邮箱

邮件签名

填写邮件签名

验证码

填写验证码，单击刷新验证码

发送协议

·欢迎使用本站在线文章发送系统。
·不得使用本站在线发送邮件系统发送垃圾邮件、广告邮件。
·如果收信人地址或其服务器出现错误，可能无法成功发送。
·如果有什么问题，或者意见建议，请联系［网站管理员］。

当百网

本站使用【啊估文章软件站】网站系统〖网站管理员留言簿〗