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


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下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
浅谈Web Storage API的使用
Jun 23 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常量的详解
2013/06/09 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
Javascript中的数学函数
2007/04/04 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
py中的目录与文件判别代码
2008/07/16 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
Selenium的使用详解
2018/10/19 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
知识竞赛主持词
2014/03/26 职场文书
党风廉设责任书
2014/04/16 职场文书
爱祖国演讲稿
2014/05/04 职场文书
团支部推优材料
2014/05/21 职场文书
爱护公共设施的标语
2014/06/24 职场文书
办公室规章制度范本
2015/08/04 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
Python关于OS文件目录处理的实例分享
2021/05/23 Python
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python