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


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 相关文章推荐
js 目录列举函数
Nov 06 Javascript
javascript 表单验证常见正则
Sep 28 Javascript
围观tangram js库
Dec 28 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 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
php Smarty 字符比较代码
2011/02/27 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
详解pandas映射与数据转换
2021/01/22 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
Laravel中Kafka的使用详解
2021/03/24 PHP
机械工程系毕业生求职信
2013/09/27 职场文书
学校三节实施方案
2014/06/09 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL