这几天在写在线编辑器,碰到个问题,当使用回车换行时不是你希望的<br>而是<p></p>对或是<div></div>对。使用google搜索,在网上找不到满意的答案。有的是使用“return false”解决了ie的插入<br>问题,但是firefox并没有解决。而且这个问题连fckeditor都没解决。呵呵,不知是否有意为之。
可能看了以上的描述还不太明白什么问题。我们做个实验,打开fckeditor切换到源码模式输入<div>test test test test test test</div>,再切换回设计模式,然后在这句的任意地方输入个回车,比如在第3个test后,你会发现源码内得到的是<div>test test test </div><div>test test test</div>,并且如果是<div style="">这形式,自动生成的也是这种形式,这样会增加许多无用代码,而且这问题在我所能找到的在线编辑器都有。
为什么一定要使用<br>换行呢?简单,而且灵活不像<p>换行空行间距大,需要大空行多输入几个回车就行。而且假如使用自动提取文章部分内容的话不怕tag没有闭包(可能'<br>'别切割,但只有很少的内容,显示不正常。而且'<br>'被切割中的概率很低,除非使用连续多个<br>,当然这也很容易修补)。这样在使用自定义层时可以使用<p>,好处是不怕被切割而使得tag没有闭包。这样可以避免使用<div>。如果使用<div>的话自动截取的文章内容而使得有个<div>没有闭包(如果一个div内的内容多,这情况很容易出现),将会对整个页面效果产生不好的影响。而去除tag,再截取内容的话也不是一个好选择,比如csdn的blog就是先去除了tag,然后截取文章,这个效果大家都看到了,肯定不好。当然如果要保证tag的完整,比如img,a还有些工作要做,那也会简单得多。记住通过这样处理后在截取文章内容存入数据库还要对用户可能使用源码编辑的<div>标签替换为<p>标签。
到底如何能得到<div>test test test <br>test test test</div>呢?
呵呵,问题的解决其实也很简单。那就是屏蔽浏览器的默认动作,而不是return false(网上搜得到这种方式,但这只能解决ie下的问题)。
使用onkeydown事件绑定函数(兼容ie,firefox)
function cancelEnter (e)
{
var keyCode = e.charCode || e.keyCode;
if(keyCode == 13)
{
// 此处使用插入字符函数加上<br>(当然也可以是其他)比如document.execCommand(cmd, false, '<br>');
// 注意ie不支持这个command
// 由于实现可能是iframe或div代码有所不同,看您的具体情况(要兼容ie,firefox这里也一定需要兼容)
// 在网上也能搜索到代码就不多说了
if(e.preventDefault) e.preventDefault();// 禁止浏览器默认动作(这里是关键)
else e.returnValue = false;
}
}
这样就可以得到<div>test test test <br>test test test</div>。
分享到:
相关推荐
5)增加提取编辑器内容中FLASH及FLV播放地址的功能,与提取图片地址使用方法相同(getflvurl和getflashurl属性)! 6)优化了控件上传页面中的部分JS脚本! 2008/4/28 Version 5.0.3 For VS2005/2008 Updates: 1)修正二...
5)增加提取编辑器内容中FLASH及FLV播放地址的功能,与提取图片地址使用方法相同(getflvurl和getflashurl属性)! 6)优化了控件上传页面中的部分JS脚本! 2008/4/28 Version 5.0.3 For VS2005/2008 Updates: 1...
迭代器与生成器并行 内置方法详解 Json与pickle数据序列化 软件目录结构规范 本周作业 第5周 心灵分享 ATM存钱取钱案例剖析 模块定义、导入、优化详解 内置模块详解之time与datetime模块 内置模块详解之Range模块 ...
【合并区域自动换行】:可以让具有合并单元格的区域在自动换行与不换行之间自由切换 【选择合并单元格】:选择指定区域中的所有合并区域 【让合并单元格合理分页】:如果合并单元格已跨页,打印时会造成合并区域的值仅...
【合并区域自动换行】:可以让具有合并单元格的区域在自动换行与不换行之间自由切换 【选择合并单元格】:选择指定区域中的所有合并区域 【让合并单元格合理分页】:如果合并单元格已跨页,打印时会造成合并区域的值仅...
【合并区域自动换行】:可以让具有合并单元格的区域在自动换行与不换行之间自由切换 【选择合并单元格】:选择指定区域中的所有合并区域 【让合并单元格合理分页】:如果合并单元格已跨页,打印时会造成合并区域的值...
10.4 利用报表生成器设计报表 实例292 简单报表 实例293 分组统计报表 实例294 主明细报表 10.5 打印邮寄单 实例295 打印汇款单 实例296 打印信封标签 10.6 打印证件 实例297 批量打印工作证 实例298 批量...
10.4 利用报表生成器设计报表 实例292 简单报表 实例293 分组统计报表 实例294 主明细报表 10.5 打印邮寄单 实例295 打印汇款单 实例296 打印信封标签 10.6 打印证件 实例297 批量打印工作证 实例298 批量...
含本书全部源码(1-16章) 共399个实例:第1章 窗体与界面设计 1.1 菜单应用实例 cc实例001 在系统菜单中添加菜单项 cc实例002 带图标的程序菜单 cc实例003 根据表中数据动态生成菜单 cc实例004 浮动的菜单...
cc实例003 根据表中数据动态生成菜单 cc实例004 浮动的菜单 1.2 弹出菜单应用实例 cc实例005 在控件上单击右键弹出菜单 cc实例006 个性化的弹出菜单 cc实例007 任务栏托盘弹出菜单 ...
cc实例003 根据表中数据动态生成菜单 cc实例004 浮动的菜单 1.2 弹出菜单应用实例 cc实例005 在控件上单击右键弹出菜单 cc实例006 个性化的弹出菜单 cc实例007 任务栏托盘弹出菜单 ...
◎XBrackets.dll: 可以在键入左括号时自动键入右括号并把光标置中 (可能与一些中 文输入法不兼容而无法自动完成右括号),高亮显示、跳转配对的括 号,选定括号间的文本。 主程序及所有插件是经过翻译了源代码后使用...