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


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 location.replace与location.reload的区别
Sep 08 Javascript
jquery中动态效果小结
Dec 16 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
javascript html5实现表单验证
Mar 01 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
深入理解(function(){... })();
Aug 16 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
微信小程序 本地数据存储实例详解
Apr 13 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中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
jQuery使用技巧简单汇总
2013/04/18 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
python中import学习备忘笔记
2017/01/24 Python
Python实现KNN邻近算法
2021/01/28 Python
Form表单及django的form表单的补充
2019/07/25 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
静态变量和实例变量的区别
2015/07/07 面试题
工商管理应届生求职信
2013/10/07 职场文书
计算机专业推荐信范文
2013/11/20 职场文书
产品销售计划书
2014/05/04 职场文书
报名委托书
2015/01/29 职场文书
丽江古城导游词
2015/02/03 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android