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


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 定时器调用传递参数的方法
Nov 12 Javascript
JS 非图片动态loading效果实现代码
Apr 09 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 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 常用字符串函数总结
2008/03/15 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
JS计算斐波拉切代码实例
2019/09/12 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
Python进程间通信用法实例
2015/06/04 Python
Python对象转JSON字符串的方法
2016/04/27 Python
python下10个简单实例代码
2017/11/15 Python
Python语言的变量认识及操作方法
2018/02/11 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
python 中xpath爬虫实例详解
2019/08/26 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
关于教师节的演讲稿
2014/09/04 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏