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


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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
vue监听input标签的value值方法
Aug 27 Javascript
vue实现动态按钮功能
May 13 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
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编码规范-php coding standard
2007/03/16 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
javascript一点特殊用法
2008/05/28 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python基础之函数用法实例详解
2014/09/10 Python
Python编程中的反模式实例分析
2014/12/08 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
Python标准库sched模块使用指南
2017/07/06 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
Python 获取项目根路径的代码
2019/09/27 Python
python如何进行矩阵运算
2020/06/05 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
社区党员先进事迹
2014/01/22 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技