在线编辑器中换行与内容自动提取


Posted in Javascript onApril 24, 2009

有的是使用“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>。

Javascript 相关文章推荐
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
JS代码实现页面切换效果
Jan 10 Javascript
Js 获取HTML DOM节点元素的方法小结
Apr 24 #Javascript
jQuery对象和DOM对象相互转化
Apr 24 #Javascript
JavaScript 学习点滴记录
Apr 24 #Javascript
用JavaScript显示随机图像或引用
Apr 21 #Javascript
JavaScript 无符号右移运算符
Apr 17 #Javascript
JavaScript 无符号右移赋值操作
Apr 17 #Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 #Javascript
You might like
一个多文件上传的例子(原创)
2006/10/09 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
wxPython实现绘图小例子
2019/11/19 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
struct和class的区别
2015/11/20 面试题
消防宣传口号
2014/06/16 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
机关作风建设工作总结
2014/10/23 职场文书
教师辞职信范文
2015/02/28 职场文书