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


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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
div移动 输入框不能输入的问题
Nov 19 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
php 表单数据的获取代码
2009/03/10 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
树结构之JavaScript
2017/01/24 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
js实现一键复制功能
2017/03/16 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
python处理json数据中的中文
2014/03/06 Python
python基于socket实现网络广播的方法
2015/04/29 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
python简单实现9宫格图片实例
2020/09/03 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
校班主任推荐信范文
2013/12/03 职场文书
澳大利亚商务邀请函
2014/01/17 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
驻村工作先进事迹
2014/08/14 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
法院执行局工作总结
2015/08/11 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python