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


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 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
jquery操作select大全
Apr 25 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
JavaScript canvas实现雨滴特效
Jan 10 Javascript
JavaScript文档对象模型DOM
Nov 20 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
javascript textContent与innerText的异同分析
2010/10/22 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
python pygame实现五子棋小游戏
2020/10/26 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
大学生军训感想
2014/02/16 职场文书
2014政务公开实施方案
2014/02/19 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
爱心活动计划书
2014/04/26 职场文书
工程负责人任命书
2014/06/06 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
新闻稿格式范文
2015/07/18 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书