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


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 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
javascript闭包入门示例
Apr 30 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
js数组依据下标删除元素
Apr 14 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
vue中子组件调用兄弟组件方法
Jul 06 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 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 register_shutdown_function()函数的使用示例
2015/06/23 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
浅谈javascript中的DOM方法
2015/07/16 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
详解Python中的array数组模块相关使用
2016/07/05 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
python 格式化输出百分号的方法
2019/01/20 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
Python如何解除一个装饰器
2020/08/07 Python
详解python中的闭包
2020/09/07 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
Python 实现进度条的六种方式
2021/01/06 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
Delphi工程师笔试题
2013/09/21 面试题
物理专业本科生自荐信
2014/01/30 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
商业房地产广告语
2014/03/13 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
目标责任书格式
2014/07/28 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python