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


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 代码也可以变得优美的实现方法
Jun 22 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
微信小程序云开发详细教程
May 16 Javascript
js实现开关灯效果
Mar 30 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 高级课程笔记 面向对象
2009/06/21 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
JSON 学习之完全手册 图文
2007/05/29 Javascript
JavaScript中的类继承
2010/11/25 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
python 获取et和excel的版本号
2009/04/09 Python
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
Django实现跨域请求过程详解
2019/07/25 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
django 多数据库及分库实现方式
2020/04/01 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
html5的localstorage详解
2017/05/09 HTML / CSS
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
nohup的用法
2012/11/26 面试题
大学生职业生涯规划书模板
2014/01/18 职场文书
仲裁协议书
2014/09/26 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书