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


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 相关文章推荐
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
微信小程序canvas动态时钟
Oct 22 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
Vue实现简易计算器
2020/02/25 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
python数字图像处理之高级形态学处理
2018/04/27 Python
python实现京东秒杀功能
2018/07/30 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
Python对象与引用的介绍
2019/01/24 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Python插件机制实现详解
2020/05/04 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
大学生应聘推荐信范文
2013/11/19 职场文书
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
领导失职检讨书
2014/02/24 职场文书
法律进学校实施方案
2014/03/15 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
酒店员工管理制度
2015/08/05 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python