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


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 null和undefined区别分析
Oct 14 Javascript
jquery插件 cluetip 关键词注释
Jan 12 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 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与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
python操作MySQL数据库的方法分享
2012/05/29 Python
Python提取网页中超链接的方法
2016/09/18 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
服务员自我评价
2014/01/25 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
2015年公司工作总结
2015/04/25 职场文书
紫日观后感
2015/06/05 职场文书
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫
Win11开始菜单添加休眠选项
2022/04/19 数码科技
详解Python中的for循环
2022/04/30 Python