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


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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 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生成随机密码的几种方法
2011/01/17 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python打包可执行文件的方法详解
2016/09/19 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Python面向对象之继承代码详解
2018/01/29 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
python sorted函数的小练习及解答
2019/09/18 Python
Python实现打印实心和空心菱形
2019/11/23 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
python线性插值解析
2020/07/05 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
应征英语教师求职信
2013/11/27 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
求职信范文大全
2014/05/26 职场文书
个性车贴标语
2014/06/24 职场文书